"Website Module"
Bootstrap 4.0.0 Snippet by meniachmaddy

<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 class="no-js" lang="en"> <head> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <title>TechnoGeek</title> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <div class="container"> <a href="index.html" class="navbar-brand">TechnoGeeK</a> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"> </span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a href="#home" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#explore-head-section" class="nav-link">Explore</a> </li> <li class="nav-item"> <a href="#create-head-section" class="nav-link">Create</a> </li> <li class="nav-item"> <a href="#share-head-section" class="nav-link">Share</a> </li> </ul> </div> </div> </nav> <!--Home Section--> <header id="home-section"> <div class="dark-overlay"> <div class="home-inner"> <div class="container"> <div class="row"> <div class="col-lg-8 d-none d-lg-block"> <h1 class="display-4"><strong>Social Profiles</strong> and gain revenue & profits</h1> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> </div> <div class="lg-col-4"> <div class="card bg-primary text-center card-form"> <div class="card-body"> <h3>Sign Up Today</h3> <p>Please fill up the below form to register</p> <form> <div class="form-group"> <input type="text" class="form-control form-control-lg" placeholder="Username"> </div> <div class="form-group"> <input type="email" class="form-control form-control-lg" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control form-control-lg" placeholder="Password"> </div> <div class="form-group"> <input type="Password" class="form-control form-control-lg" placeholder="Confirm Password"> </div> <input type="submit" value="Submit" class="btn btn-outline btn-block"> </form> </div> </div> </div> </div> </div> </div> </div> </header> <!--Explore Head--> <section id="explore-head-section"> <div class="container"> <div class="row"> <div class="col text-center"> <div class="p-5"> <h1 class="display-4">Explore</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, aliquam pariatur quos. Iusto, error, commodi. Nam enim tempore necessitatibus explicabo!</p> <a href="#" class="btn btn-outline-secondary">Find Out More</a> </div> </div> </div> </div> </section> <!--EXPLORE SECTION--> <section id="explore-section" class="bg-light text-muted py-5"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="img/explore-section1.jpeg" alt="" class="img-fluid mb-3 rounded-circle"> </div> <div class="col-md-6"> <h3>Explore & Connect</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quasi beatae consequuntur ullam, corrupti ipsum. Alias amet, deserunt dicta natus expedita repellat voluptas exercitationem necessitatibus sint officiis, praesentium, fuga eos!</p> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> </div> </div> </section> <!--Create Head--> <section id="create-head-section" class="bg-primary"> <div class="container"> <div class="row"> <div class="col text-center"> <div class="p-5"> <h1 class="display-4">Create</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, aliquam pariatur quos. Iusto, error, commodi. Nam enim tempore necessitatibus explicabo!</p> <a href="#" class="btn btn-outline-light">Find Out More</a> </div> </div> </div> </div> </section> <!--CREATE SECTION--> <section id="create-section" class="py-5"> <div class="container"> <div class="row"> <div class="col-md-6"> <h3>Create Your Passion</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quasi beatae consequuntur ullam, corrupti ipsum. Alias amet, deserunt dicta natus expedita repellat voluptas exercitationem necessitatibus sint officiis, praesentium, fuga eos!</p> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> </div> <div class="col-md-6"> <img src="img/create-section1.jpeg" alt="" class="img-fluid mb-3 rounded-circle"> </div> </div> </section> <!--Explore Head--> <section id="share-head-section" class="bg-primary"> <div class="container"> <div class="row"> <div class="col text-center"> <div class="p-5"> <h1 class="display-4">Share</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, aliquam pariatur quos. Iusto, error, commodi. Nam enim tempore necessitatibus explicabo!</p> <a href="#" class="btn btn-outline-light">Find Out More</a> </div> </div> </div> </div> </section> <!--SHARE Section--> <section id="share-section" class="bg-light text-muted py-5"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="img/social.jpeg" alt="" class="img-fluid mb-3 rounded-circle"> </div> <div class="col-md-6"> <h3>Share What You Create</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quasi beatae consequuntur ullam, corrupti ipsum. Alias amet, deserunt dicta natus expedita repellat voluptas exercitationem necessitatibus sint officiis, praesentium, fuga eos!</p> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> <div class="d-flex flex-row"> <div class="p-4 align-self-start"> <i class="fa fa-check"></i> </div> <div class="p-4 align-self-end"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores labore voluptatem animi doloribus. Ut, autem. </div> </div> </div> </div> </section> <!--MAIN FOOTER--> <footer id="main-footer" class="bg-dark"> <div class="container"> <div class="row"> <div class="col text-center"> <div class="py-4"> <h1 class="h3">TechnoGeeK</h1> <p>Copyright by: Madhav Prasad Kushwaha <br> 2017</p> <button class="bt btn-primary" data-toggle="modal" data-target="contactModal">Contact Us</button> </div> </div> </div> </div> </footer> <!--CONTACT MODAL--> <div class="modal fade text-dark" id="contactModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="contactModalTitle"> Contact Us </h5> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control"> </div> <div class="form-group"> <label for="message">Message</label> <textarea class="form-control"></textarea> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-primary btn-block">Submit</button> </div> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
body { background: #333; color: #fff; } .navbar { border-bottom: #008ed6 3px solid; opacity: 0.8; } #home-section { background: url("../img/home.jpeg") no-repeat; min-height: 700px; background-size: cover; background-attachment: fixed; } #home-section .dark-overlay { background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; width: 100%; min-height: 700px; } #home-section .home-inner { padding-top: 150px; } #home-section .card-form { opacity: 0.8; } #home-section .fa { color: #008ed6; background: #fff; padding: 4px; border-radius: 5px; font-size: 30px; } #explore-section .fa, #share-section .fa { color: #fff; background: #333; padding: 4px; border-radius: 5px; font-size: 30px; }

Related: See More


Questions / Comments: