Template1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLCSS</title>
    <!-- Main Css file -->
    <link rel="stylesheet" href="css/Template1.css">
    <!-- Normalize library  -->
    <link rel="stylesheet" href="css/Normalize.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/all.min.css">
    <!-- Google fonts : Work-Sans -->
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    </head>
<body>
<header>
<div class="container">
    <img class="logo" src="images/logo.png" alt="">
<div class="links">
    <span class="icon">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </span>
    <ul>
        <li><a href="Services">Services</a></li>
        <li><a href="About">About</a></li>
        <li><a href="Contact">Contact</a></li>
        <li><a href="Portfolio">Portfolio</a></li>
    </ul>
</div>
</div>

</header>
<section class="Landing-section">
<div class="sec-container">
    <h1> Hello There</h1>
    <p>We are Leon - Super Creative & Minimal Agency Web Template    </p>
</div>
</section>
<section class="features-section">
    <div class="container">
    <div class="feat">
        <i class="fas fa-magic fa-3x"></i>
        <h3>Tell Us Your Idea</h3>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut lab        </p>
    </div>
    <div class="feat">
        <i class="far fa-gem fa-3x"></i>
        <h3>Tell Us Your Idea</h3>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut lab        </p>
    </div>
    <div class="feat">
        <i class="fas fa-globe-asia fa-3x"></i>
        <h3>Tell Us Your Idea</h3>
        <p>Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut lab        </p>
    </div>
</div>
</section>

<section class="services-sec">
    <div class="container">
        <h2 class="special-heading">Services</h2>
        <p>Don't be busy, be productive</p>

    <div class="services-content">
<div class="col">
    <div class="srv">
        <i class="fas fa-palette fa-2x"></i>
<div class="text">
    <h3>Graphic Design</h3>
    <p>Graphic design is the process of visual communication and problem-solving using one or more of typography, photography and illustration.    </p>

</div>
    </div>
    <div class="srv">
        <i class="fab fa-sketch fa-2x"></i>
    <div class="text">
        <h3>UI & UX    </h3>
        <p>Process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction.
    
        </p>
    </div>
        </div>

</div>
<div class="col">
    <div class="srv">
        <i class="fas fa-vector-square fa-2x"></i>
    <div class="text">
        <h3>Web Design    </h3>
        <p>Web design encompasses many different skills and disciplines in the production and maintenance of websites.
    
        </p>
    </div>
    </div>
        <div class="srv">
            <i class="fas fa-pencil-ruler fa-2x"></i>
<div class="text">
    <h3>Web Development
    </h3>
    <p>Web development is a broad term for the work involved in developing a web site for the Internet or an intranet.

    </p>
</div>
        </div>


</div>
<div class="col">
    <div class="service-img">
        <img src="images/services.jpg" alt="">
        
        </div>
</div>
</div>
</div>
</section>
<!-- End of Services Section -->

<section class="portfolio">
<div class="container">
<div class="h2p">
    <h3 class="special-heading">Portfolio</h3>
    <p>If you do it right, it will last forever.    </p>
</div>
<div class="projects-content">
    <div class="project">
    <img src="images/portfolio-1.jpg" alt="">
    <div class="text">
        <h3>Project Here
        </h3>
        <p>My creative ability is very difficult to measure because it can manifest in so many surprising and.        </p>
    </div>
</div>
    <div class="project">
    <img src="images/portfolio-2.jpg" alt="">
    <div class="text">
        <h3>Project Here
        </h3>
        <p>My creative ability is very difficult to measure because it can manifest in so many surprising and.        </p>
    </div>
</div>
    <div class="project">
    <img src="images/portfolio-3.jpg" alt="">
    <div class="text">
        <h3>Project Here
        </h3>
        <p>My creative ability is very difficult to measure because it can manifest in so many surprising and.        </p>
    </div>
</div>
</div>
</div>
</section>
<section class="About">
    <div class="container">
        
        <div class="h2p">
            <h3 class="special-heading">About</h3>
            <p>Less is more work            </p>
        </div>
        
        <div class="about-content">
            <div class="about-img">
            <img src="images/about.jpg" alt="">
        </div>
            <div class="p1">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil nemo neque voluptate tempora velit cum non, fuga vitae architecto delectus sed maxime rerum impedit aliquam obcaecati, aut excepturi iusto laudantium!            </p>

                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil nemo neque voluptate tempora velit cum non, fuga vitae architecto delectus sed maxime rerum impedit aliquam obcaecati, aut excepturi iusto laudantium!            </p>
            </div>
    </div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="h2p">
    <h3 class="special-heading">Contact</h3>
    <p>We are born to create</p>
</div>
<div class="call">
    <h3>Feel free to drop us a line at:    </h3>
    <a href="leonagency@mail.com">leonagency@mail.com</a>
    <p >Find Us On Social Networks</p>
    <i  class="fab fa-youtube"></i>
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-twitter"></i>
</div>
</div>
</section>
<footer>
    <p>© 2021 <strong>Leon</strong> All Right Reserved</p>
</footer>
</body>
</html>