"legend"
Bootstrap 4.1.1 Snippet by hareeshvudari

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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> <title>sample temp</title> <link rel="icon" href="http://sslabs.co.in/wp-content/uploads/2018/02/s1600-w286.png"> <meta charset="UTF-8"> <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="css/legend.css"> </head> <body> <div class="row"> <div class="banner"> Legend! </div> <div class="menu"> <ul> <li><a href="">Portfolio</a></li> <li><a href="">Services</a></li> <li><a href="">News</a></li> <li><a href="">Team</a></li> <li><a href="">Contact</a></li> </ul> </div> <div class="clear"></div> </div> <div class="row1"> <h1><span class="legend">Legend!</span> we make web a beautiful place.</h1> <p>Signup for our Newsletter to be updated</p> <input type="text" placeholder="you@yourmail.com"> <button>Notify me</button> <div class="social-icon"> <a href=""><img src="images/g.png" width="50px" height="50px"> <a href=""><img src="images/f.png" width="50px" height="50px"> <a href=""><img src="images/s.png" width="50px" height="50px"> <a href=""><img src="images/t.png" width="50px" height="50px"> <a href=""><img src="images/p.png" width="50px" height="50px"> </div> </div> <div class="row2"> <p>Legend! we make web a beautiful place.</p> <p>landscape Legend! we make web a beautiful place.</p> <p>Legend! we make web a beautiful place.</p> </div> <div class="row3"> <img src="images/m.png" width="80px" height="80px" alt=""> <p>Portfolio....</p> </div> <div class="row4"> <div class="img1"> <img src="images/1.jpg" width="100%"> <h2>welcome to sslabs</h2> <p>If a field in a table is optional, it is possible to insert a new record or update a record without adding a value to this field. Then, the field will be saved with a NULL valueIf a field in a table is optional, it is possible to insert a new record or update a record without adding a value to this field. Then, the field will be saved with a NULL value</p> </div> <div class="img2"> <img src="images/1.jpg" width="100%"> <h2>welcome to sslabs</h2> <p>If a field in a table is optional, it is possible to insert a new record or update a record without adding a value to this field. Then, the field will be saved with a NULL valueIf a field in a table is optional, it is possible to insert a new record or update a record without adding a value to this field. Then, the field will be saved with a NULL value</p> </div> <div class="img3"> <img src="images/1.jpg" width="100%"> <h2>welcome to sslabs</h2> <p>If a field in a table is optional, it is possible to insert a new record or update a record without adding a value to this field. Then, the field will be saved with a NULL valueIf a field in a table is optional, it is possible to insert a new record or update a record without adding a value to this field. Then, the field will be saved with a NULL value</p> </div> </div> </body> </html>
* { margin:0px; padding:0px; } body { background-color:#ddd; font-family:arial; font-size:20px; } ul,ol { list-style:none; } a { text-decoration:none; } input[type="text"],input[type="email"],input[type="password"] { } .row { background:#0b333f; height:70px; line-height:70px; border-bottom:2px solid #fdc300; } .row .banner { font-size:35px; color:#fff; font-weight:200px; width:30%; float:left; text-align:center; } .row .menu { float:right; margin-right:150px; } .row .menu ul li { float:left; margin:0px 1px; } .row .menu ul li a { text-decoration:none; color:#fff; padding:20px 15px; } .row .menu ul li a:hover { background:#fdc300; color:#0b333f; } .row1 { background-image:url("https://s3.envato.com/files/154267037/1.jpg"); background-size:100% 100%; height:300px; text-align:center; color:#fff; padding-top:40px; border-bottom:15px solid #0b333f; } .row1 .legend { color:#fdc300; } .row1 p { padding-top:30px; padding-bottom:10px; } .row1 input[type="text"] { padding:10px; width:300px; background:#e2e7e3; border:0px; border-radius:2px; } .row1 button { padding:10px; background:#fdc300; border:0px; border-radius:2px; color:#fff; } .row1 .social-icon { padding:25px; } .row1 .social-icon a { padding:10px; } .row2 { background: #fdc300; color:#fff; padding:50px; font-size:30px; text-align:center; } .row3 { text-align:center; padding:50px; font-size:30px; color:#000; font-weight:bold; } .row4 { } .row4 .img1,.img2,.img3 { width:30%; padding:10px; margin:10px; float:left; text-align:justify; } .clear { clear:both; }

Related: See More


Questions / Comments: