<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Materialize</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><img src="https://cdn3.iconfinder.com/data/icons/happily-colored-snlogo/128/medium.png" alt="" class="circle responsive-img"></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">CLOTHING</a></li>
<li><a href="#">HEALTH & BEAUTY </a></li>
<li><a href="#">SPORTS & FITNESS</a></li>
<li><a href="#">ELECTRONICS</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="#">Navbar Link</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 class="header center teal-text text-lighten-2">ARE YOU READY?</h1>
<div class="row center">
<h5 class="header col s12 light">As organizations are building talent pool, the most-sought after skill sets include:</h5>
</div>
<div class="row center">
<p class="btn-large waves-effect waves-light teal lighten-1">Get Started</p>
</div>
<br><br>
</div>
</div>
<div class="parallax"><img src="img/fgf.jpg" alt="Unsplashed background img 1" width="100%"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12">
<h3 class="text-center">CLOTHING</h3>
</div>
</div>
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">Personal Tech <br> Mentors</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate
our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">group</i></h2>
<h5 class="center">Project-based <br> Learning</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a
framework that incorporates components and animations that provide more feedback to users. Additionally,
a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">settings</i></h2>
<h5 class="center">Digital Learning Resources</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get
started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h2 class="text-center">HEALTH & BEAUTY </h2>
<h5 class="header col s12 light">PROGRAMS UNDER DIGINXT</h5>
</div>
</div>
</div>
<div class="parallax"><img src="img/download.jpg" alt="Unsplashed background img 2" width="100%"></div>
</div>
<div class="container">
<div class="section">
<div class="row">
<div class="col s12 center">
<h3><i class="mdi-content-send brown-text"></i></h3>
<h4 class="brown-text">Contact Us</h4>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc
nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas
eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin
lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio,
condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">PROGRAM HIGHLIGHTS</h5>
</div>
</div>
</div>
<div class="parallax"><img src="img/abandoned-sdfa_1400x.progressive.jpg" alt="Unsplashed background img 3" width="100%"></div>
</div>
<div class="had-container">
<div class="parallax-container logueo">
<div class="parallax"><img src="https://alistapart.com/d/438/fig-6--background-blend-mode.jpg"></div>
<div class="row"><br>
<div class="col m8 s8 offset-m2 offset-s2 center">
<h4 class="truncate bg-card-user">
<img src="https://cdn3.iconfinder.com/data/icons/happily-colored-snlogo/128/medium.png" alt="" class="circle responsive-img">
<div class="row login">
<h4>Inicia sesión.</h4>
<form class="col s12">
<div class="row">
<div class="input-field col m12 s12">
<i class="material-icons iconis prefix">account_box</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Nombre o Email</label>
</div>
</div>
<div class="row">
<div class="input-field col m12 s12">
<i class="material-icons iconis prefix">enhanced_encryption</i>
<input id="password" type="password" class="validate">
<label for="password">Contraseña</label>
</div>
</div>
<div class="row">
<button class="btn waves-effect waves-light" type="submit" name="action">Iniciar sesión!</button>
</div>
</form>
</div>
</h4>
</div>
</div>
</div>
</div>
<footer class="page-footer teal">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">COMPANY INFO</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job.
Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">SHOPPING GUIDE</h5>
<ul>
<li><a class="white-text" href="#!">Size Guide</a></li>
<li><a class="white-text" href="#!">Shipping & Handling</a></li>
<li><a class="white-text" href="#!">Size Guide</a></li>
<li><a class="white-text" href="#!">About Us</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">NAVIGATION</h5>
<ul>
<li><a class="white-text" href="#!">Search</a></li>
<li><a class="white-text" href="#!">Contact Us</a></li>
<li><a class="white-text" href="#!">Terms of Service</a></li>
<li><a class="white-text" href="#!">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">Company Bio</a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script>
$(document).ready(function(){
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
draggable: true, // Choose whether you can drag to open on touch screens,
onOpen: function(el) { /* Do Stuff*/ }, // A function to be called when sideNav is opened
onClose: function(el) { /* Do Stuff*/ }, // A function to be called when sideNav is closed
}
);
$('.parallax').parallax();
});
</script>
</body>
</html>
p{line-height:1.6!important;text-align:center!important;}
.text-center{ text-align:center !important;}
nav ul a,nav .brand-logo{color:#444;}
.button-collapse{color: #26a69a;}
.parallax-container{min-height:380px;line-height:0;height:auto;color:rgba(255,255,255,.9);}
.parallax-container .section {width:100%;}
@media only screen and (max-width : 992px) {
.parallax-container .section{position:absolute;top:40%;}
#index-bann.section{top:10}
}
@media only screen and (max-width : 600px) {
#index-banner .section {top: 0;}
}
h3.text-center {color: #26a69a;}
.icon-block {padding:0 15px;}
.icon-block .material-icons{font-size:inherit;}
footer.page-footer{margin:0;}
.white{background-color:#26a69a!important;}
.brown-text{color:#26a69a!important;}
p.btn-large.waves-effect.waves-light.teal.lighten-1{padding-top:16px;}
main {flex: 1 0 auto;}
.brand-logo >img{width:50px;height:50px;margin-top:5px;}
.bg-card-user{background:rgba(0,77,64,.5);padding:15px 0;}
.truncate >img{width:180px;margin-top:6px;margin-bottom:6px;}
footer.foot-text{margin-top:10px;}
.logueo{height:650px!important;}
i.iconis{font-size:1em!important;margin-top:8px;}
.login {border:1px solid #FFF;width:80%;margin:0 auto;background-color:rgba(255,255,255,.7);padding:20px;}
p.grey-text.text-lighten-4{text-align:left!important;}
