templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Website Template Design in HTML & CSS</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
	<div class="header">
     <div class="navbar">
         <div class="logo">
             <a href="#"><img src="images/logo.png"></a>
         </div>
         <div class="menu">
             <ul>
                 <li>Home</li>
                 <li>About</li>
                 <li>Services</li>
                 <li>Mission</li>
                 <li>Contact</li>
             </ul>
         </div>
         <div class="login-btn">Login</div>
     </div>   

     <div class="banner">
         <div class="app-text">
             <h3>airbnb for yatchting</h3>
             <h1>Manage<br>Adventures</h1>
             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>

             <div class="btn-group">
                 <div class="signup-btn">Sign up now</div>
                 <div class="play-btn">
                     <div class="play-btn-inner">
                         <i class="fa fa-play"></i>
                     </div>
                     <span>How it works</span>
                 </div>
             </div>
         </div>
         <div class="app-picture">
             <img src="images/10.jpg">
         </div>
     </div>

     <div class="about-services">
         <ul>
             <li>
                 <img src="images/1.png">
                 <h1>SEO Consultancy</h1>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
             </li>
             <li>
                 <img src="images/2.png">
                 <h1>Competitor Analysis</h1>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
             </li>
             <li>
                 <img src="images/3.png">
                 <h1>Social Media Marketing</h1>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
             </li>
         </ul>
     </div>

     <div class="social-icons">
         <ul>
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
         </ul>
     </div>
    </div>
</body>
</html>