"Scroll"
Bootstrap 3.3.0 Snippet by goforazhar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Scroll Down</title> <link href="css/bootstrap.css" rel="stylesheet"/> <link href="css/custom.css" rel="stylesheet"/> <link href="css/responsive.css" rel="stylesheet"/> <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> </head> <body> <!--row 1--> <div class="container-fluid"> <div class="div1"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r1c1"> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r1c2"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r1c3"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r1c4"></div> </div> </div> </div> <!--row 2--> <div class="container-fluid"> <div class="div2"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r2c1"> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r2c2"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r2c3"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r2c4"></div> </div> </div> </div> <div class="container heading"> <h1>Welcome Here !!</h1> <div class="caption"> <a target="_blank" href="http://goforazhar.com/">Azhar</a> </div> </div> <!--row 3--> <div class="container-fluid"> <div class="div3"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r3c1"> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r3c2"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r3c3"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r3c4"></div> </div> </div> </div> <!--row 4--> <div class="container-fluid"> <div class="div4"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r4c1"> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r4c2"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r4c3"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r4c4"></div> </div> </div> </div> <!--row 5--> <div class="container-fluid"> <div class="div5"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r5c1"> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r5c2"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r5c3"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r5c4"></div> </div> </div> </div> <!--row 6--> <div class="container-fluid"> <div class="div6"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r6c1"> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r6c2"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r6c3"></div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 r6c4"></div> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery.js"></script> <script src="js/bootstrap.js"></script> <script src="js/xyz.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> </body> </html>
@charset "utf-8"; /* CSS Document */ .r1c1 ,.r1c3, .r2c1,.r2c4 { height:100%; } .r1c4 { background:#E31; height:800px; } .r2c4 { background:#fff; } .r1c3 { background:#0C9; height:1200px; } .r2c3 { background:#fff; } .r1c2 { background:#E31c35; height:1600px; } .r2c2{ background:#fff; } .r1c1 { background:#FFCB36; height:2400px; margin-bottom:800px; } .r2c1{ background:#fff; } .r3c4,.r4c4 { background:#036; height:1200px; } .r4c3{ background:#ccc; height:1200px } .r5c4{ background:#036; height:1200px; } .r5c3 { background:#ccc; height:1200px; } .r5c2 { background:#C33; height:1200px; } .r6c2,r6c3,.r6c4,.r6c3,.r6c1{ height:800px; } .r6c2{ background: #C33; } .r6c4{ background:#036; } .r6c3{ background:#ccc; } .r6c1{ background:#FF0; } h1 , a{ position: relative; bottom: 450px; font-size:88px; font-family: 'Kaushan Script', cursive; } a,a:hover{ text-decoration:none; color:#900; } .heading { text-align:center; position:relative; }

Related: See More

Rubik Presentation Page
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe

Questions / Comments: