<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  georgii</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <head>
  <meta charset="UTF-8">
  <title>A Pen by  georgii</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">

  
</head>

<body>

  <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="container-fluid ">
    <div class="row header  pt-5">
      <div class="col-sm-12 col-md-12 col-lg-6 text-center pl-0">
        <h1 class="maintext">Hi! I am</h1>
        <h1 class="textmain">web-developer</h1>
        <h1 class="text-right"><strong class="maintext">GEORGE</strong></h1>
      </div>
      <div class="col-sm-12 col-md-12 col-lg-6">
        <img src="http://svgur.com/i/4pU.svg" alt="portfolio" class="">
      </div>
    </div>
  </div>

  <div class="container-fluid  nextp pb-5 pt-5 pl-0">
    <h2 class="text-left  wcid pl-4  pb-3 pt-3 col-sm-6 col-md-6 col-lg-6">what can I do</h2>

    <div class="row text-center pb-5  pt-5">
  <div class="col-sm-12 col-md-5 loe">
    <img src="https://image.flaticon.com/icons/svg/145/145843.svg" width="110px">
    <p><div class="textabout">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo ullam ipsa sed in accusamus distinctio doloribus nihil omnis maiores, expedita ratione atque consequuntur, eius praesentium, consequatur fugiat ut eligendi dolorum!</div></p>
    
  </div>
  </div>


</div>

  </div>
  <div class="container-fluid n3 pb-5 pt-5 pl-0">
    <h2 class="text-left  wcid pl-4  pb-3 pt-3 col-sm-6 col-md-6 col-lg-6">What you will get?</h2>
    <div class="row text-center pt-5">
      <div class="col-sm-6 col-md-4 col-lg-4 pb-5">
        <img src="https://image.flaticon.com/icons/svg/682/682019.svg" alt="" class="w-25 pb-2 ">
        <p>1 YEAR SUPPORT</p>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-4 pb-5">
        <img src="https://image.flaticon.com/icons/svg/321/321768.svg" alt="" class="w-25 pb-2">
        <p>ADAPTIVE DESIGN</p>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-4 pb-5">
        <img src="https://image.flaticon.com/icons/svg/148/148941.svg" alt="" class="w-25 pb-2">
        <p>REALLY QUICKLY</p>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-4 pb-5">
        <img src="https://image.flaticon.com/icons/svg/501/501414.svg" alt="" class="w-25 pb-2">
        <p>PROFESSIONAL</p>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-4 pb-5">
        <img src="https://image.flaticon.com/icons/svg/272/272370.svg" alt="" class="w-25 pb-2">
        <p>CREATIVE</p>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-4 pb-5">
        <img src="https://image.flaticon.com/icons/svg/272/272369.svg" alt="" class="w-25 pb-2">
        <p>ANALYS</p>
      </div>
    </div>
    
  </div>
  
  <div class="container-fluid  pb-5 pt-5 n5 pl-0">
    <h2 class="text-left  wcid pl-4 pt-3 pb-3 col-5">my works</h2>
    <div class="row text-center pt-5">
      <div class="col-sm-6 col-md-4 col-lg-4v porf"><div class="card " style="max-width: 10rem;">
  <img class="card-img-top" src="https://www.awesomescreenshot.com/upload//775610/52bb8644-9bb9-4bda-5d50-3b871684b192.png" alt="Card image cap">
</div></div>
      
    </div>
    </div>
  <div class="container-fluid n6 pb-5 pt-5 pl-0">
    <h2 class="text-left  wcid pl-4  pb-3 pt-3 col-4">Ask me</h2>

    <div class="row pt-5 text-center">
     <div class="col-sm-6 col-md-6 col-lg-5 lkl ">
       <div class="head rounded-top">
         <div class="cir1"></div>
         <div class="cir2"></div>
         <div class="cir3"></div>
       </div>
       <div class="shoulders rounded-bottom">
         <form method="post" role="form">
              <div class="form-group w-75 pt-3">
    <label for="exampleFormControlInput1"><p>Email address</p></label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
           
                   <div class="form-group w-75">
    <label for="exampleFormControlInput1"><p>Full name</p></label>
    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Ivan Ivanov">
  </div>
           
           
             <div class="form-group w-75 ">
    <label for="exampleFormControlTextarea1"><p>Your question</p></label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Hi..."></textarea>
  </div>
            <button type="submit" class="btn btn-primary mb-2 mt-3">Submit</button>
            
         </form>
       </div>
     </div>
    </div>

  
    
  </div>

 <div class="container-fluid n7 text-center">
   <div class="row  pb-3 pt-5">
      <div class="col-sm-12 col-md-12 p-1">
     <img src="https://image.flaticon.com/icons/svg/145/145813.svg" alt="" class="jstask">
      <img src="https://image.flaticon.com/icons/svg/145/145802.svg" alt="" class="jatask1">
     <img src="https://image.flaticon.com/icons/svg/174/174855.svg" alt="" class="jstask2">
      
    </div>
   </div>
   <div class="oneline mb-2"></div>
   <div class="secondline mb-2"></div>
   <div class="therdline"></div>

<p>© 2018 Travin George</p>
 </div>

 



<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script  src="js/index.js"></script>




</body>

</html>
*{
  box-sizing: border-box
}


h2{

font-family: 'Kanit', sans-serif;
}
.n3{
  background-color:#33cc66;
}

.n3 p{
  font-weight:bold;
  
}
/* WHAT CAN I DO*/
.loe{
  
  padding-top:3rem;

}


.textabout{
  max-width: 250px;
  margin:0 auto;
  font-style:italic;
}

.hcj img{
  max-width: 10rem;
}


.wc{
  border:1px solid black;
}
/*------------*/

.nextp{
  background-color:#e4f1fe;
}

.header{
  background-color:#3366cc;
}


/*what can i do */
.wcid{
  font-size:3rem;
  background-color:#333333;
  color:white;
  font-weight:bold;
  
  


}

.card{
  margin:0 auto;
  
}
.col-3:nth-child(1){
  border:1px solid black;
  padding-top:5rem;
  
  
  
}
  .lead{
  font-weight:bold;
  padding-top:1rem;
}

/*strange stuff*/








.maintext{
  font-size:5rem;
   font-weight:bold;
  
}
.textmain{
  background-color:#333366;
  color:white;
  padding:0.5rem 0rem;
  font-size:3.9rem;
  font-weight:bold;
}

.porf{
  padding:1rem;
 
}

.n5{
  background-color:#cccccc;
}

/*ask me*/
.head{
  max-width:49rem;
  height:2rem;
  background-color:#cccccc;
}
.shoulders{
  max-width:49rem;
  height:25rem;
  background-color:#333366;
}



.n6{
  background-color:#66ccff;

}


.cir1{
  width:0.7rem;
  height: 0.7rem;
  background-color:red;
  border-radius:50%;
  margin-right:0.3rem;
}

.cir2{
  width:0.7rem;
  height:0.7rem;
  background-color:yellow;
  border-radius:50%;
  margin-right:0.3rem;
}

.cir3{
  width:0.7rem;
  height: 0.7rem;
  background-color:green;
  border-radius:50%;
}

.head {
  display: flex;
  padding:0.5rem;
}
/*footer*/
.n7{
  background-color:#666666;
  font-weight:bold;
  font-size:1.5rem;
  
}

.n7 p{
  padding:1rem 0rem 0rem 0rem;
  margin:0px;
  color:lightgrey;
  font-size: 0.8rem;
}
.n7 img{
  max-width:3rem;
  
  
}

.oneline{
  width:10rem;
  height:0.2rem;
  background-color:#EAE8E8;
  margin:0 auto;
  border-radius:10px;
 
}

.secondline{
   width:7rem;
  height:0.2rem;
  background-color:#BEBDBD;
  margin:0 auto;
  border-radius:10px;
}

.therdline{
   width:3rem;
  height:0.2rem;
  background-color:grey;
  margin:0 auto;
  border-radius:10px;
}
/*----------------*/
.lkl{
margin:0 auto;
}


/*FORM*/


.form-group{
  margin:0 auto;
  max-width: 18rem;
 

}

.form-group p{
  margin-bottom:0px;
  color:white;
}

textarea {
  resize: vertical;
  min-height: 50px;
  height: 100px;
  max-height: 100px;
}

$(document).ready(function(){
  $(".jstask").hover(function(){
    $(".oneline").toggle("slow");
 

    
  });

   $(".jatask1").hover(function(){
    $(".secondline ").toggle("slow");
      
  });
  $(".jstask2").hover(function(){
    $(".therdline ").toggle("slow");
   
  });
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js