<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 ----------> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="top-heading bg-blue"> <div class="container"> <div class="row"> <div class="col-md-8"> </div> <div class="col-md-2 pull-right"> <h6> Contact Us : xxxxxx </h6> </div> <div class="col-md-2 pull-right"> <h6 class="yellow-font"> Login : </h6> </div> </div> </div> </div> <div class="bg-nav bg-primary"> <div class="container"> <nav class="navbar navbar-expand-sm navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Our Team</a> <a class="dropdown-item" href="#">Price Plans</a> <a class="dropdown-item" href="#">Blog</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> </div> </div> <div class="banner1"> <div class="container"> <div class="row"> <div class="col-md-6 "> <img src ="https://cdn.logoinn.com/lps/home-slider/graphic_design-home.jpg"> </div> <div class="col-md-6 "> <div class="banner1-heading d-none d-sm-block"> <h1 class="mar-t-100 "><span class="span-2">#No.1 Lorem Ipsum for All </span> <span class="span-1"> prodesset definitionem eu his </span> </h1> </div> <ul class="list-unstyled"> <li><h5><i class="material-icons">done</i> Unique Design and Memorable Brand </h5></li> <li><h5><i class="material-icons">done</i><strong> Free Delivery in 2 days</strong></h5> </li> <li><h5><i class="material-icons">done</i> Unique Design and Memorable Brand </h5></li> <li><h5><i class="material-icons">done</i><strong> Free Delivery in 2 days</strong></h5> </li> </ul> <button type="button" class="btn btn-primary rounded-0">Primary Contest</button> <button type="button" class="btn btn-warning rounded-0">Primary</button> </div> </div> </div> </div> <div class="content-main mt-5"> <div class="container"> <div class="row"> <div class="col-md-9"> <h2>Cum malis instructior ad. Vide tempor eos cu </h2> <h4 class="span-1 mb-4">Labitur euripidis ius ei, te vix adversarium, sed id simul</h4> <div class="main-package1 border "> <div class="row"> <div class="col-md-1 bg-primary "> <i class="material-icons md-48">local_offer</i> </div> <div class="col-md-8"> <small>Lorem Ipsum</small> <h4>Basic Vide tempor</h4> </div> <div class="col-md-3"> <h1 class="span-4">159</h1> </div> </div> <hr> <ul class="list-unstyled "> <li><i class="material-icons span-3">wb_sunny</i> Creative Concepts x 2</li> <li><i class="material-icons span-3">wb_sunny</i> Number of Revisions x 1</li> <li><i class="material-icons span-3">wb_sunny</i> Standard Delivery 24 Hours</li> <li><i class="material-icons span-3">wb_sunny</i> Number of Designers 1</li> <li><i class="material-icons span-3">wb_sunny</i> 100% Satisfaction Guarantee</li> <li><i class="material-icons span-3">wb_sunny</i> File-Formats</li> <button type="button" class="btn btn-dark mt-4">See Details</button> <button type="button" class="btn btn-dark mt-4">Order Now</button> </ul> </div> <div class="main-package1 border "> <div class="row"> <div class="col-md-1 bg-warning "> <i class="material-icons md-48">local_offer</i> </div> <div class="col-md-8"> <small>Lorem Ipsum</small> <h4>Basic Vide tempor</h4> </div> <div class="col-md-3"> <h1 class="span-4">159</h1> </div> </div> <hr> <ul class="list-unstyled "> <li><i class="material-icons span-3">wb_sunny</i> Creative Concepts x 2</li> <li><i class="material-icons span-3">wb_sunny</i> Number of Revisions x 1</li> <li><i class="material-icons span-3">wb_sunny</i> Standard Delivery 24 Hours</li> <li><i class="material-icons span-3">wb_sunny</i> Number of Designers 1</li> <li><i class="material-icons span-3">wb_sunny</i> 100% Satisfaction Guarantee</li> <li><i class="material-icons span-3">wb_sunny</i> File-Formats</li> <button type="button" class="btn btn-dark mt-4">See Details</button> <button type="button" class="btn btn-dark mt-4">Order Now</button> </ul> </div> <div class="main-package1 border "> <div class="row"> <div class="col-md-1 bg-danger "> <i class="material-icons md-48">local_offer</i> </div> <div class="col-md-8"> <small>Lorem Ipsum</small> <h4>Basic Vide tempor</h4> </div> <div class="col-md-3"> <h1 class="span-4">159</h1> </div> </div> <hr> <ul class="list-unstyled "> <li><i class="material-icons span-3">wb_sunny</i> Creative Concepts x 2</li> <li><i class="material-icons span-3">wb_sunny</i> Number of Revisions x 1</li> <li><i class="material-icons span-3">wb_sunny</i> Standard Delivery 24 Hours</li> <li><i class="material-icons span-3">wb_sunny</i> Number of Designers 1</li> <li><i class="material-icons span-3">wb_sunny</i> 100% Satisfaction Guarantee</li> <li><i class="material-icons span-3">wb_sunny</i> File-Formats</li> <button type="button" class="btn btn-dark mt-4">See Details</button> <button type="button" class="btn btn-dark mt-4">Order Now</button> </ul> </div> <div class="main-package1 border "> <div class="row"> <div class="col-md-1 bg-success "> <i class="material-icons md-48">local_offer</i> </div> <div class="col-md-8"> <small>Lorem Ipsum</small> <h4>Basic Vide tempor</h4> </div> <div class="col-md-3"> <h1 class="span-4">159</h1> </div> </div> <hr> <ul class="list-unstyled "> <li><i class="material-icons span-3">wb_sunny</i> Creative Concepts x 2</li> <li><i class="material-icons span-3">wb_sunny</i> Number of Revisions x 1</li> <li><i class="material-icons span-3">wb_sunny</i> Standard Delivery 24 Hours</li> <li><i class="material-icons span-3">wb_sunny</i> Number of Designers 1</li> <li><i class="material-icons span-3">wb_sunny</i> 100% Satisfaction Guarantee</li> <li><i class="material-icons span-3">wb_sunny</i> File-Formats</li> <button type="button" class="btn btn-dark mt-4">See Details</button> <button type="button" class="btn btn-dark mt-4">Order Now</button> </ul> </div> <div class="about-text"> <p>Lorem ipsum dolor sit amet, an mel mundi fastidii. Brute essent fabellas sit id, vim no wisi brute definitiones, vivendo omnesque at eam. Eligendi ocurreret ei mel, nam in melius persius, duo persius insolens id. Ne vel debet timeam habemus, et per quando invidunt. Vis amet modus dolorem et, eam no placerat lucilius rationibus. Cum malis instructior ad. Vide tempor eos cu, prodesset definitionem eu his. Alii partiendo percipitur ut mea, id vis volumus convenire, munere singulis ne qui. Labitur euripidis ius ei, te vix adversarium conclusionemque, sed id simul consequat. Lorem ipsum dolor sit amet, an mel mundi fastidii. Brute essent fabellas sit id, vim no wisi brute definitiones, vivendo omnesque at eam. Eligendi ocurreret ei mel, nam in melius persius, duo persius insolens id. Ne vel debet timeam habemus, et per quando invidunt. Vis amet modus dolorem et, eam no placerat lucilius rationibus. Cum malis instructior ad. Vide tempor eos cu, prodesset definitionem eu his. Alii partiendo percipitur ut mea, id vis volumus convenire, munere singulis ne qui. Labitur euripidis ius ei, te vix adversarium conclusionemque, sed id simul consequat. </p> </div> </div> <div class="col-md-3"> <div class="sidebar-widget1"> <img src="https://cdn.logoinn.com/lps/home-slider/usd-bundle.png"> </div> </div> </div> </div> </div> <div class="slider-portfol"> <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Los Angeles" width="1100" height="500"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>We had such a great time in LA!</p> </div> </div> <div class="carousel-item"> <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Chicago" width="1100" height="500"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="carousel-item"> <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500"> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> </div> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <div class="footer mt-5"> <div class="container"> <div class="row"> <div class="col-md-3 footer-one"> <h4><span class="span-1">10.000 </span>Client Already Connected </h4> <p>A talented in-house teams of experts outreach & social media complement the analyticals technical SEO professionals ensuring your business grows organically with hard working & get you better result.</p> <ul class="list-inline"> <a href="#"><li class="list-inline-item"><i class="fa fa-facebook"></i> </li></a> <a href="#"><li class="list-inline-item"><i class="fa fa-facebook"></i> </li></a> <a href="#"><li class="list-inline-item"><i class="fa fa-facebook"></i> </li></a> <a href="#"><li class="list-inline-item"><i class="fa fa-facebook"></i> </li></a> </ul> </div> <div class="col-md-3 footer-two"> <h4>Quick Links</h4> <ul class="list-unstyled"> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms & Condition </a></li> <li><a href="#">Support </a></li> <li><a href="#">Refund Policy </a></li> <li><a href="#">Contact Us </a></li> </ul> </div> <div class="col-md-3 footer-three"> <h4>Quick Links</h4> <ul class="list-unstyled"> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms & Condition </a></li> <li><a href="#">Support </a></li> <li><a href="#">Refund Policy </a></li> <li><a href="#">Contact Us </a></li> </ul> </div> <div class="col-md-3 footer-four"> <h4>Quick Links</h4> <ul class="list-unstyled"> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms & Condition </a></li> <li><a href="#">Support </a></li> <li><a href="#">Refund Policy </a></li> <li><a href="#">Contact Us </a></li> </ul> </div> </div> </div> </div> <div class="copyright border border-bottom-0 border-left-0 border-right-0"> <div class="container"> <div class="row "> <div class="col-md-12"> <p>© 2017 inc. All Rights Reserved. </p> </div> </div> </div> </div>

.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 14px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } /* Rules for sizing the icon. */ .material-icons.md-16 { font-size: 16px;} .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; } /************** 1. Background COLORS **************/ .bg-blue {background:#1C2331;color:#fff !important;} /************** 2. Font COLORS **************/ .yellow-font {color:#ffca28 !important;} .span-1 {color:#e57373 !important;} .span-2 {color:#1c2a48 !important;} .span-3 {color:#cfd8dc !important;} .span-4 {color:#2e7d32 !important;} /************** 3. Section Padding **************/ .top-heading {padding:3px 0px;} .main-package1 {padding:15px;margin-bottom:20px;} /************** 4. Image **************/ img {width:100%;} /************** 5. Margin **************/ .mar-t-100 {margin-top:100px;} /************** 6. Sectiomns **************/ .main-package1 ul li { padding: 9px 0px; color: #444444; font-size: 13px; border-bottom: 1px solid #dddddd; position: relative; }

https://mdbootstrap.com/css/colors/ https://material.io/icons/#ic_done