<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; }
