Build website using HTML and CSS

November 08, 2017

HTML



<html lang="en">
 <head>
  <title>MENGSENG</title>
  <!-- Required meta tags -->
  
  
  <!-- Bootstrap CSS -->
  <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" rel="stylesheet"></link>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
   <link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet"></link>
   <link href="css/style.css" rel="stylesheet"></link>
  </head>
  <body>
   <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">MENGSENG</a>
    <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav">
<li class="nav-item active">
       <a class="nav-link" href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">Home <span class="sr-only">(current)</span></a>
      </li>
<li class="nav-item">
       <a class="nav-link" href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">Service</a>
      </li>
<li class="nav-item">
       <a class="nav-link" href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">About Us</a>
      </li>
<li class="nav-item">
       <a class="nav-link" href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">Contact Us</a>
      </li>
<li class="nav-item">
       <a class="nav-link" href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#"><i class="fa fa-search"></i></a>
      </li>
</ul>
</div>
</nav>
   <div class="row">
    <div class="bg-image">
     <div class="container">
      <div class="over-image">
       <h1>
WELCOME TO <span>MENGSENG</span></h1>
We created beautiful design &amp; great user experience, for your best projects.


       <div class="button">
        <a class="active" href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">buy a theme</a>
        <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">view features</a>
       </div>
</div>
</div>
</div>
<div class="container-fluid">
     <div class="row">
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12 no-margin">
       <div class="item">
        <i class="fa fa-tablet"></i>
        <h4>
FULLY RESPONSIVE</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque recusandae numquam laboriosam,
        qui similique.


       </div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12 no-margin">
       <div class="item item-even">
        <i class="fa fa-heart-o"></i>
        <h4>
WITH LOVE</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque recusandae numquam laboriosam,
        qui similique.


       </div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12 no-margin">
       <div class="item">
        <i class="fa fa-columns"></i>
        <h4>
ONE&amp;MULTI PAGE</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque recusandae numquam laboriosam,
        qui similique.


       </div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12 no-margin">
       <div class="item item-even">
        <i class="fa fa-tv"></i>
        <h4>
RETINA READY</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque recusandae numquam laboriosam,
        qui similique.


       </div>
</div>
</div>
</div>
</div>
<div class="row-bgc">
    <div class="container">
     <div class="row row-eq-height align-items-center d-flex">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 no-margin">
       <img alt="1" class="img-fluid" src="images/1.png" />
      </div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 no-margin row-text">
       <h4>
FULLY RESPONSIVE</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad blanditiis eaque eligendi
        ipsam minus nisi nobis numquam officiis praesentium, provident quasi quibusdam quis, rem unde? Quasi
       quo, vel! Porro.


       <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">LEARN MORE <i class="fa fa-angle-right"></i></a>
      </div>
</div>
</div>
</div>
<div class="row-bgc bgc-odd">
    <div class="container">
     <div class="row row-eq-height align-items-center d-flex">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 no-margin order-2">
       <img alt="1" class="img-fluid" src="images/2.png" />
      </div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 no-margin order-1 row-text">
       <h4>
WITH LOVE</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad blanditiis eaque eligendi
        ipsam minus nisi nobis numquam officiis praesentium, provident quasi quibusdam quis, rem unde? Quasi
       quo, vel! Porro.


       <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">LEARN MORE <i class="fa fa-angle-right"></i></a>
      </div>
</div>
</div>
</div>
<div class="row-bgc">
    <div class="container">
     <div class="row row-eq-height align-items-center d-flex">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 no-margin">
       <img alt="1" class="img-fluid" src="images/3.png" />
      </div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 no-margin row-text">
       <h4>
ONE&amp;MULTI PAGE</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad blanditiis eaque eligendi
        ipsam minus nisi nobis numquam officiis praesentium, provident quasi quibusdam quis, rem unde? Quasi
       quo, vel! Porro.


       <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">LEARN MORE <i class="fa fa-angle-right"></i></a>
      </div>
</div>
</div>
</div>
<div class="row-bgc bgc-odd">
    <div class="container">
     <div class="row row-eq-height align-items-center d-flex">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 no-margin order-2">
       <img alt="1" class="img-fluid" src="images/4.png" />
      </div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 no-margin order-1 row-text">
       <h4>
RETINA READY</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad blanditiis eaque eligendi
        ipsam minus nisi nobis numquam officiis praesentium, provident quasi quibusdam quis, rem unde? Quasi
       quo, vel! Porro.


       <a href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">LEARN MORE <i class="fa fa-angle-right"></i></a>
      </div>
</div>
</div>
</div>
<div class="row-subscribe">
    <div class="over-image">
     <div class="container">
      <h2>
 Subscribe to Our Newsletter</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deleniti eaque eum exercitationem
      fugit in, ipsum, itaque minus eum exercitationem


      <div class="form-group">
       <input class="txt-email" placeholder="Enter your email" type="text" />
       <button class="btn">Subscribe</button>
      </div>
</div>
</div>
</div>
<div class="footer d-flex flex-column align-items-center justify-content-center">
    <div class="container text-center">
     <a class="brand" href="https://www.blogger.com/blogger.g?blogID=1440965824283997059#">MENGSENG</a>
     We believe in Simple, Creative &amp; Flexible Design Standards.


     <div class="social ">
      <i class="fa fa-facebook"></i>
      <i class="fa fa-pinterest"></i>
      <i class="fa fa-twitter"></i>
      <i class="fa fa-google-plus"></i>
      <i class="fa fa-instagram"></i>
     </div>
</div>
</div>
<div class="copyright">
    &#169; 2017 All Rights Reserved Terms of Use and Privacy Policy


   </div>
<!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script crossorigin="anonymous" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script crossorigin="anonymous" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
   <script crossorigin="anonymous" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  </body>
 </html>

CSS


body{
    overflow-x: hidden;
    font-family: 'Maven Pro', sans-serif;
}
a:hover {
    text-decoration: none;
}
.bg-image {
    width: 100%;
    height: 85vh;
    background-image: url('../images/slider-1.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.no-margin {
    margin: 0;
    padding: 0;
}
.navbar{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    background-color: transparent !important;
    margin: 15px 0;
}
.navbar .navbar-brand{
    color: #ffc107;
    border: 1px solid #fff;
    padding: 7px 20px;
}
.navbar .navbar-nav a{
    color: #fff;
}
#navbarSupportedContent{
    justify-content: flex-end;
}

.over-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    width: 100%;
}

.over-image h1 {
    font-size: 45px;
    letter-spacing: 2px;
}

.over-image span {
    color: #ffc107;
}

.over-image a {
    text-transform: uppercase;
    padding: 10px 25px;
    border: 1px solid #ddd;
    display: inline-block;
    border-radius: 30px;
    transition: all 0.4s;
    color: #fff;
}
.over-image .button{
    margin-top: 25px;
}
.over-image a.active{
    background-color: #ffc107;
}

.over-image a:hover {
    background-color: #ffc107;
    color: #fff;
}

.item {
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 25px 15px;
    background-color: #383838;
}
.item.item-even{
    background-color: #464646;
}
.item h4 {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 2px;
}

.item p {
    font-size: 14px;
}

.item i.fa {
    font-size: 56px;
    margin: 20px 0;
}
.row-bgc{
    padding: 50px 0;
}

.row-bgc .row-text{
    padding: 0 50px;
}
.row-bgc .row-text{
    color: #666;
}
.row-bgc .row-text a{
    color: #666;
    font-size: 14px;
}
.row-bgc .row-text a:hover{
    color: #ffc107;
}
.row-bgc.bgc-odd{
    background-color: #f5f5f5;
}

.row-subscribe{
    background-image: url('../images/subscribe.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    height: 40vh;
}

.row-subscribe input,.row-subscribe button{
    border-radius: 25px;
    padding: 8px 12px;
    border: none;
}
.row-subscribe input {
    width: 40%;
}
.row-subscribe button{
    background-color: #ffc107;
    color: #fff;
    cursor: pointer;
}

.footer{
    height: 40vh;
    padding-bottom: 15px;
}
.footer .brand{
    color: #ffc107;
    font-size: 32px;
    margin: 15px 0;
}
.footer p{
    color: #838383;
}
.footer i{
    padding: 5px 15px;
    cursor: pointer;
    font-size: 22px;
    color: #ddd;
}

.copyright{
    height: 70px;
    line-height: 70px;
    background-color: #f5f5f5;
}
.copyright p{
    margin: 0;
    padding: 0;
    color: #838383;
    text-align: center;
}

Renweb

Search This Blog

Build website using HTML and CSS

HTML

CSS

Comments

Post a Comment