Skip to content

Instantly share code, notes, and snippets.

@francves

francves/Portfolio materializecss.markdown

Created August 23, 2015 04:54
Show Gist options
  • Save francves/fcc4d97824257a2a3b5d to your computer and use it in GitHub Desktop.
Save francves/fcc4d97824257a2a3b5d to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio materializecss
Raw
index.html
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css"></head>
<body>
<!-- Navbar -->
<a name="home"></a>
<div class="navbar-fixed">
<nav style="background-color: #03a9f4">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo </a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#home">Home</a></li>
<li><a href="#about-me">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- NavBar end -->
<!-- Slider -->
<div class="section">
<div class="slider">
<ul class="slides">
<li>
<img src="http://k30.kn3.net/7/E/4/E/9/B/B36.jpg"> <!-- random image -->
<div class="caption left-align">
<h3 style="color: #000">Responsive Design</h3>
<h5 style="color: #696969" class="text-lighten-3">Multidevice Web Design</h5>
</br>
</br>
<a href="#contact"><button style= "background-color:#43A7F7" class="btn waves-effect waves-light" name="action"><i class="zmdi zmdi-email"></i> Contact
</button>
</div>
</li>
<li>
<img src="http://k33.kn3.net/4/B/1/7/E/E/585.jpg"> <!-- random image -->
<div class="caption center-align">
<h3 style="color: #000">DESIGNS YOUR IDEAS</h3>
<a href="#contact">
</div>
</li>
</ul>
</div>
</div>
<!-- Slider -->
<!-- About me -->
<a name="about-me"></a>
<div class="row card-panel hoverable">
<div class="col s6">
<h3 class="">Francisco Velásquez Escobar</h3>
<p>Venezuelan student in computer engineering. Programmer, designer and website developers, experience in creating self-managing websites with Wordpress and Joomla, online shops e-commerce with WooCommerce, bootstrap, materializecss, content creation, writing blog posts optimized for SEO, web analytics, website optimization, SEO rankings, SEM, creating landing pages, email marketing, social media management, automation twitter search engine profile.
Connect with me through social networks.</p>
</div>
<div class="col s6">
<div class ="row">
<img style="max-width:40%" class="responsive-img circle" src="https://pbs.twimg.com/profile_images/571457407566356480/vZ29YePx.jpeg"/>
</div>
<div class ="row">
<div class ="col s12">
<i style="color:#03a9f4" id="social-buttons" class="waves-effect waves-light zmdi zmdi-facebook-box mdc-text-light-blue zmdi-hc-3x"></i>
<i style="color:#03a9f4" id="social-buttons" class="waves-effect zmdi zmdi-twitter-box mdc-text-light-blue zmdi-hc-3x"></i>
<i style="color:#03a9f4" id="social-buttons" class="waves-effect zmdi zmdi-google-plus-box mdc-text-light-blue zmdi-hc-3x"></i>
<i style="color:#03a9f4" id="social-buttons" class="waves-effect zmdi zmdi-linkedin-box mdc-text-light-blue zmdi-hc-3x"></i>
<i style="color:#03a9f4" id="social-buttons" class="waves-effect zmdi zmdi-github-box mdc-text-light-blue zmdi-hc-3x"></i>
</div>
</div>
</div>
</div>
<!-- About me -->
<!--portfolio -->
<a name="portfolio"></a>
<div class="card-panel hoverable">
<h3 class="center-align">Check out my latest work</h3>
<div class="row">
<div class="col s4">
<img class="responsive-img materialboxed" src="http://getuikit.com/docs/images/placeholder_600x400.svg"/>
</div>
<div class="col s4">
<img class="responsive-img materialboxed" src="http://getuikit.com/docs/images/placeholder_600x400.svg"/>
</div>
<div class="col s4">
<img class="responsive-img materialboxed" src="http://getuikit.com/docs/images/placeholder_600x400.svg"/>
</div>
</div>
<div class="row">
<div class="col s4">
<img class="responsive-img materialboxed" src="http://getuikit.com/docs/images/placeholder_600x400.svg"/>
</div>
<div class="col s4">
<img class="responsive-img materialboxed" src="http://getuikit.com/docs/images/placeholder_600x400.svg"/>
</div>
<div class="col s4">
<img class="responsive-img materialboxed" src="http://getuikit.com/docs/images/placeholder_600x400.svg"/>
</div>
</div>
</div>
<!--portfolio -->
<!-- Contact -->
<a name="contact"></a>
<div class="card-panel hoverable">
<div class="row">
<div class="col s12">
<h3><i style= "color:#C62828" class="zmdi zmdi-email"></i> Contact</h3>
</div>
</div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Message</label>
</div>
</div>
<button style= "background-color:#C62828" class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="zmdi zmdi-mail-send"></i>
</button>
</form>
</div>
</div>
<!-- contact -->
</body>
<!-- footer -->
<footer style="background-color: #03a9f4" class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Francisco Velásquez Portfolio </h5>
<p class="grey-text text-lighten-4">Design and Web Development.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Socialize</h5>
<ul>
<!-- Social icons -->
<i style="color:#ffffff" id ="social-buttons-footer" class="waves-effect waves-light zmdi zmdi-facebook-box mdc-text-light-blue zmdi-hc-4x"></i>
<i style="color:#ffffff" id = "social-buttons-footer"class="waves-effect waves-light zmdi zmdi-twitter-box mdc-text-light-blue zmdi-hc-4x"></i>
<i style="color:#ffffff" id = "social-buttons-footer" class="waves-effect waves-light zmdi zmdi-google-plus-box mdc-text-light-blue zmdi-hc-4x"></i>
<i style="color:#ffffff" id = "social-buttons-footer" class="waves-effect waves-light zmdi zmdi-linkedin-box mdc-text-light-blue zmdi-hc-4x"></i>
<i style="color:#ffffff" id = "social-buttons-footer" class="waves-effect waves-light zmdi zmdi-github-box mdc-text-light-blue zmdi-hc-4x"></i>
</ul>
<!-- Social icons -->
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright © Francisco Velásquez 2015. All Rights Reserved
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
Raw
Portfolio materializecss.markdown
Raw
script.js
$(document).ready(function(){
$('.slider').slider({full_width: true});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
Raw
style.css
#social-buttons:hover {
color: #C62828 !important;
}
#social-buttons-footer:hover {
color: #212121 !important;
}
/* change form color */
/* label color */
.input-field label {
color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #42A5F5;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #42A5F5;
box-shadow: 0 1px 0 0 #42A5F5;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #000;
}
/* email */
.input-field input[type=email]:focus + label {
color: #42A5F5;
}
/* label underline focus color */
.input-field input[type=email]:focus {
border-bottom: 1px solid #42A5F5;
box-shadow: 0 1px 0 0 #42A5F5;
}
/* valid color */
.input-field input[type=email].valid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* invalid color */
.input-field input[type=email].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* text area */
#textarea1{
border-bottom: 1px solid #000;
}
#textarea1:focus + label{ /*este es el que le da color a message*/
color:#42A5F5
}
#textarea1:focus{
border-bottom: 1px solid #42A5F5;
}
/* resposive text */
h3 {
font-size: 5.5vh;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment