Skip to content

Instantly share code, notes, and snippets.

@bretth18

bretth18/Materialized Portfolio.markdown

Created April 15, 2016 05:21
Show Gist options
  • Save bretth18/f642d9679c36e2a68973376894a58e8c to your computer and use it in GitHub Desktop.
Save bretth18/f642d9679c36e2a68973376894a58e8c to your computer and use it in GitHub Desktop.
Download ZIP
Materialized Portfolio
Raw
index.html
<!--Navigation-->
<nav class="navbar navbar-fixed-top z-depth-1" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-light" href="#">Maylyn Talampas</a>
</div>
<div class="collapse navbar-collapse" id="my-navbar">
<ul class="nav navbar-nav navbar-right smooth-scroll">
<li class="active"><a href="#intro" class="waves-effect waves-light">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#about" class="waves-effect waves-light">About Me</a></li>
<li><a href="#skills" class="waves-effect waves-light">What I Do</a></li>
<li><a href="#portfolio" class="waves-effect waves-light">Portfolio</a></li>
<li><a href="#testimonials" class="waves-effect waves-light">Testimonials</a></li>
<li><a href="#contact" class="waves-effect waves-light">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--/.Navigation-->
<!-- Section: Intro -->
<section id="intro" class="full-bg-img">
<div class="view">
<div class="mask rgba-black-light">
<div class="container">
<div class="verticalcenter text-center white-text">
<h3 class="intro-text">HELLO, I'M MAYLYN</h3>
<p>Mainly I do web design but lately I learned some magic things to make your website just...glow :)</p>
<!--Call to action buttons-->
<a href="#contact" class="btn btn-primary waves-effect waves-light"><i class="fa fa-envelope-o right"></i>Contact me</a>
<a href="#about" class="btn btn-default waves-effect waves-light"><i class="fa fa-book right"></i>Learn more</a>
</div>
</div>
</div>
</div>
</section>
<!--/. Section: Intro -->
<!--Main Container-->
<div class="container">
<!--Section: About-->
<section id="about">
<div class="divider-new intro-text">WHO AM I</div>
<div class="row">
<div class="col-md-12 text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur, nisi impedit veritatis facere voluptatibus recusandae doloremque optio rerum error nemo velit, rem natus expedita.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur, nisi impedit veritatis facere voluptatibus recusandae doloremque optio rerum error nemo velit, rem natus expedita.</p>
</div>
</div>
</section>
<!--/.Section: About-->
<!--Section: What I Do-->
<section id="skills">
<div class="divider-new intro-text">What I Do</div>
<div class="row">
<div class="col-md-12 text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur.</p>
<br>
</div>
</div>
<div class="row">
<div class="col-md-3 text-center">
<i class="fa fa-desktop fa-xl"></i>
<h3>Web Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur.</p>
</div>
<div class="col-md-3 text-center">
<i class="fa fa-camera-retro fa-xl"></i>
<h3>Branding</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur.</p>
</div>
<div class="col-md-3 text-center">
<i class="fa fa-print fa-xl"></i>
<h3>Print Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur.</p>
</div>
<div class="col-md-3 text-center">
<i class="fa fa-puzzle-piece fa-xl"></i>
<h3>Illustration</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur.</p>
</div>
</div>
</section>
<!--/.Section: What I Do-->
<!--Section: Portfolio-->
<section id="portfolio">
<div class="divider-new intro-text">THIS IS MY WORK</div>
<div class="row">
<!--First column-->
<div class="col-md-3">
<!--Image Card-->
<div class="card hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="http://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive" alt="">
<div class="mask waves-effect"></div>
</div>
</div>
<div class="card-content">
<h5>Project 1</h5>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. </p>
</div>
</div>
<!--Image Card-->
</div>
<!--/.First column-->
<!--Second column-->
<div class="col-md-3">
<!--Image Card-->
<div class="card hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="http://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive" alt="">
<div class="mask waves-effect"></div>
</div>
</div>
<div class="card-content">
<h5>Project 2</h5>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. </p>
</div>
</div>
<!--Image Card-->
</div>
<!--/.Second column-->
<!--Third column-->
<div class="col-md-3">
<!--Image Card-->
<div class="card hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="http://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive" alt="">
<div class="mask waves-effect"></div>
</div>
</div>
<div class="card-content">
<h5>Project 3</h5>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. </p>
</div>
</div>
<!--Image Card-->
</div>
<!--/.Third column-->
<!--Fourth column-->
<div class="col-md-3">
<!--Image Card-->
<div class="card hoverable">
<div class="card-image">
<div class="view overlay hm-white-slight z-depth-1">
<img src="http://mdbootstrap.com/images/reg/reg%20(2).jpg" class="img-responsive" alt="">
<div class="mask waves-effect"></div>
</div>
</div>
<div class="card-content">
<h5>Project 4</h5>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. </p>
</div>
</div>
<!--Image Card-->
</div>
<!--/.Fourth column-->
</div>
</section>
<!--/.Section: Portfolio-->
<!--Section: Testimonials-->
<section id="testimonials">
<div class="divider-new intro-text">WHAT THEY SAY ABOUT ME</div>
<div class="row">
<!-- Carousel -->
<div id="carousel1" class="carousel slide carousel-fade hoverable">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active">
</li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner z-depth-2" role="listbox">
<!-- First slide -->
<div class="item active">
<div class="view overlay hm-blue-slight">
<a><img src="http://mdbootstrap.com/images/slides/slide%20(7).jpg" class="img-responsive" alt="slide1">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<img class="img-circle avatar" src="https://pixabay.com/static/uploads/photo/2016/02/11/16/59/dog-1194083_960_720.jpg">
<p>John Dog, CEO Breeding</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur.</p>
</div>
</div>
</div>
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<div class="view overlay hm-blue-slight">
<a><img src="http://mdbootstrap.com/images/slides/slide%20(23).jpg" class="img-responsive" alt="slide2">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<img class="img-circle avatar" src="https://pixabay.com/static/uploads/photo/2016/02/11/16/59/dog-1194083_960_720.jpg">
<p>John Dog, CEO Breeding</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur.</p>
</div>
</div>
</div>
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<div class="view overlay hm-blue-slight">
<a><img src="http://mdbootstrap.com/images/slides/slide%20(2).jpg" class="img-responsive" alt="slide3">
<div class="mask waves-effect waves-light"></div>
</a>
<div class="carousel-caption hidden-xs">
<div class="animated fadeInDown">
<img class="img-circle avatar" src="https://pixabay.com/static/uploads/photo/2016/02/11/16/59/dog-1194083_960_720.jpg">
<p>John Dog, CEO Breeding</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis atque dolores aperiam ea ducimus, consequuntur.</p>
</div>
</div>
</div>
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control new-control" href="#carousel1" role="button" data-slide="prev">
<span class="fa fa fa-angle-left waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control new-control" href="#carousel1" role="button" data-slide="next">
<span class="fa fa fa-angle-right waves-effect waves-light"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<!-- /.carousel -->
</div>
</section>
<!--/.Section: Testimonials-->
<!--Section: Contact-->
<section id="contact">
<div class="divider-new intro-text">LET'S GET IN TOUCH</div>
<div class="row">
<!--Google Map-->
<div class="col-md-8">
<div id="map-container" class="card-panel hoverable wow fadeInUp" style="height: 300px">
</div>
</div>
<!-- Contact details -->
<div class="col-md-4 text-center">
<ul class="contact-data">
<li><a class="btn-floating btn-small waves-effect waves-light blue-grey"><i class="fa fa-map-marker"></i></a>
<p>831 La Torre, Talavera, Nueva Ecija, 3114, Philippines</p>
</li>
<li><a class="btn-floating btn-small waves-effect waves-light blue-grey"><i class="fa fa-mobile"></i></a>
<p>+ 63 997 534 1434</p>
</li>
<li><a class="btn-floating btn-small waves-effect waves-light blue-grey"><i class="fa fa-paper-plane"></i></a>
<p>[email protected]</p>
</li>
</ul>
</div>
</div>
</section>
<!--/.Section: Contact-->
</div>
<!--/.Main Container-->
<!--Section: Parallax-->
<section class="parallax full-bg-img" id="id-example">
<div class="container text-center">
</div>
</section>
<!--/.Section: Parallax-->
<footer class="page-footer special-color center-on-small-only">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">Here you can use rows and columns here to organize your footer content.</p>
</div>
<div class="col-md-6">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#intro">Home</a></li>
<li><a class="grey-text text-lighten-3" href="#about">About Me</a></li>
<li><a class="grey-text text-lighten-3" href="#skills">What I Do</a></li>
<li><a class="grey-text text-lighten-3" href="#portfolio">Portfolio</a></li>
<li><a class="grey-text text-lighten-3" href="#testimonials">Testimonials</a></li>
<li><a class="grey-text text-lighten-3" href="#contact">Contact</a></li>
<li><a class="grey-text text-lighten-3" href="#">Curriculum Vitae</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright text-center rgba-black-light">
<div class="container-fluid">
© 2016 Copyright: <a href="#"> Maylyn Talampas </a>
</div>
</div>
</footer>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
Raw
script.js
function init_map() {
var var_location = new google.maps.LatLng(15.567929, 120.921616);
var var_mapoptions = {
center: var_location,
zoom: 14
};
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "New York"
});
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://mdbootstrap.com/mdbcdn/mdb.min.js"></script>
Raw
style.css
html,
body {
height: 100%;
}
.full-bg-img {
background: url("http://res.cloudinary.com/dar4cecpp/image/upload/v1455865941/FK0EAPWWS7_nlgaaq.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-nav-collapse {
background-color: #37474F;
}
.fa-xxl {
font-size: 150px;
}
.fa-xl {
font-size: 75px;
}
#id-example {
background-image: url(http://brandflow.pl/wp-content/uploads/2015/09/slider3.jpg);
background-size: cover;
margin: 0;
}
footer.page-footer {
margin-top: 0;
}
.intro-text {
font-weight: 800;
text-transform: uppercase;
}
.avatar {
width: 100px;
height: 100px;
margin: auto;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment