index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adel Coffee Project</title>
    <link rel="stylesheet" href="./CSS/style.css">
    <link rel="stylesheet" href="./CSS/normalize.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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=Marck+Script&family=Work+Sans:wght@300;400;500;600;800&display=swap"
    rel="stylesheet">
   
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <!-- start aheader -->
    <div class="header">
<div class="container">

    <i class="fa-solid fa-mug-hot fa-fade"></i>
        <div class="welcome-text">Welcome To Adel Coffee</div>

    <div class="links">
        <span class="burger-icon">
            <span></span>
            <span></span>
            <span></span>
        </span>
        <ul>
<li><a href="#Services">Services</a></li>
<li><a href="#Portofilio">Portfolio</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>

        </ul>


    </div>


</div>


    </div>
    <!-- header end -->
    <!-- start landing section -->
<div class="landing">
        <div class="intro-text">
    
            <h1>
                Hello there
            </h1>
            <p>
                We are Adel coffee Super Creative & And Delecious Taste
            </p>
        </div>
    
    
    </div>
    <!-- end landing section -->
    <!-- start feautres section -->


<div class="feautres">


<div class="container">
    <div class="feat">
    <i class="fa-solid fa-wand-magic-sparkles"></i>
        <h3>Tell us Your Idea</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur hic voluptatem ipsum explicabo aspernatur
            totam
            esse mollitia amet molestias deserunt, inventore, neque necessitatibus aliquam assumenda velit facere,
            consequuntur officiis accusantium.</p>
    </div>
    <div class="feat">
    <i class="fa-solid fa-globe"></i>

        <h3>Test Our Products</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad sit dolorem voluptates impedit quia est ratione,
            quaerat aliquid? Libero quos ab autem ullam. Earum quasi quo temporibus perferendis distinctio quibusdam.
        </p>
    </div>
    <div class="feat">
        <i class="fa-regular fa-handshake"></i>

        <h3>We will Do The Work </h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis nostrum atque quia, a necessitatibus
            impedit esse assumenda nesciunt libero. Tempora ducimus provident aspernatur incidunt perspiciatis quia.
            Distinctio consequuntur nostrum voluptatibus?</p>
    </div>


</div>

</div>

<!-- start feautres section -->

<!-- start services section -->
<div class="services">
    <div class="container">
        <h2 class="special-heading">Services</h2>
        <p>Dont be busy.be productive</p>
        <!-- services contnent start -->
        <div class="services-content">
<!-- frist col -->
<div class="col">
<div class="serv">
    <i class="fa-solid fa-check-double"></i>

    <div class="text">
        <h3>Choose Your Blend</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo reprehenderit nam cupiditate quo</p>
    </div>

</div>
    <div class="serv">
        <i class="fa-solid fa-headset"></i>

        <div class="text">
            <h3>Call Us</h3>
            <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, labore? Illo id maiores </P>
        </div>
    </div>

</div>
<!-- second col -->
<div class="col">
    <div class="serv">
        <i class="fa-solid fa-people-carry-box"></i>
        <div class="text">
            <h3>Delivery</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, rem in. Aut nu</p>
        </div>
    </div>
    <div class="serv">
<i class="fa-solid fa-mug-saucer"></i>
        <div class="text">
            <h3>Coffe Blender</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum temporibus eligen</p>
        </div>
    
    </div>
</div>
<!-- third col -->
<div class="col col3">
    <img  class="serv-img" src="./img/pexels-jonathan-borba-2878709.jpg" alt="">
</div>

        </div>


    </div>
    </div>
    <!-- start portfolio -->
    <div class="portfolio">
        <div class="container">
            <h2 class="special-heading">Portfolio</h2>
            <p>If you did it right it will make you happy</p>
            <div class="portfolio-content">
                <!-- card 1 -->
<div class="card">
    <img src="./img/pexels-anna-tarazevich-4927142.jpg" alt="">
  <div class="info">
    <h3>Fabilous Brand</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, vitae!</p>
  </div>
</div>
<!-- card 2 -->
<div class="card">
    <img src="./img/pexels-valeriia-miller-3020919.jpg" alt="">
    <div class="info">
        <h3>Amazing Taste</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea, animi?</p>
</div>
</div>
<!-- card 3 -->
<div class="card">
    <img src="./img/coffee beans.jpg" alt="">
    <div class="info">
        <h3>Our Coffee Beans</h3>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, in?</p>
</div>
</div>

            </div>
            </div>
            </div>
            <!-- end portofolio section -->
            <!-- about section -->
                <div class="about">
                    <div class="container">
                        <h2 class="special-heading">About</h2>
                        <p>Less Is More Work</p>
                        <div class="about-content">
                            <div class="image">
                        <img class="about-img" src="./img/about-section.jpg" alt="">
                            </div>
                            <div class="text-about">
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum debitis dolor earum dicta quam assumenda f</p>
                                <hr>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero nisi atque dolore accusantium nemo recusandae amet
                                    autem voluptatem in. Similique?</p>
                            </div>
                            
                            </div>
                            
                
                        </div>
                    </div>
                </div>
            <!-- about section end -->
            <!-- footer section -->
                    <div class="contact">
                        <div class="container">
                            <h2 class="special-heading">Contact</h2>
                            <p>We Care of You</p>
                            <div class="info-footer">
                                <p class="lable">Feel Free To Drob Us A Line At :</p>
                    <a href="mailto:adel.lamloum@gmail.com?subject=Contact" class="footer-mail">adel.lamloum@gmail.com</a>
                    <div class="social">
<i class="fa-brands fa-square-facebook"></i>
<i class="fa-brands fa-square-twitter"></i>
<i class="fa-brands fa-square-instagram"></i>
                    </div>
                            </div>
                            </div>
                            </div>
                            <footer>
&copy; 2023 Adel Lamloum All Right Resirved
                            </footer>
            <!-- the end of contact-footer section -->


</body>
</html>