"banner-1"
Bootstrap 4.0.0 Snippet by sahildesigner

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit

Questions / Comments: