CODE HTML

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pop&Art - Objets de Collection Artisanaux</title>
    <link rel="stylesheet" href="styles.css">
    <script async src="https://tally.so/widgets/embed.js"></script>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-4a59f2d1-42d8-4ac5-83b9-c4159595035a: url('../../../../../../../../../../plugins/elementskit-lite/widgets/init/assets/img/arrow.png');}:root{--wpr-bg-5c5f400f-8212-47bb-9dbe-0bd8689e6125: url('../../../../../../../../../../plugins/elementskit-lite/widgets/init/assets/img/sort_asc.png');}:root{--wpr-bg-cea18665-ece2-4acc-a8a7-f04ada771438: url('../../../../../../../../../../plugins/elementskit-lite/widgets/init/assets/img/sort_desc.png');}:root{--wpr-bg-d883bda2-51c4-4461-844a-9e5de7c7871c: url('../../../../../../../../../../plugins/elementskit-lite/widgets/init/assets/img/sort_asc_disabled.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"table.dataTable thead .sorting","style":":root{--wpr-bg-4a59f2d1-42d8-4ac5-83b9-c4159595035a: url('..\/..\/..\/..\/..\/..\/..\/..\/..\/..\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/arrow.png');}","hash":"4a59f2d1-42d8-4ac5-83b9-c4159595035a"},{"selector":"table.dataTable thead .sorting_asc","style":":root{--wpr-bg-5c5f400f-8212-47bb-9dbe-0bd8689e6125: url('..\/..\/..\/..\/..\/..\/..\/..\/..\/..\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc.png');}","hash":"5c5f400f-8212-47bb-9dbe-0bd8689e6125"},{"selector":"table.dataTable thead .sorting_desc","style":":root{--wpr-bg-cea18665-ece2-4acc-a8a7-f04ada771438: url('..\/..\/..\/..\/..\/..\/..\/..\/..\/..\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_desc.png');}","hash":"cea18665-ece2-4acc-a8a7-f04ada771438"},{"selector":"table.dataTable thead .sorting_asc_disabled","style":":root{--wpr-bg-d883bda2-51c4-4461-844a-9e5de7c7871c: url('..\/..\/..\/..\/..\/..\/..\/..\/..\/..\/plugins\/elementskit-lite\/widgets\/init\/assets\/img\/sort_asc_disabled.png');}","hash":"d883bda2-51c4-4461-844a-9e5de7c7871c"}]; const rocket_excluded_pairs = [];</script></head>
<body>
    <header>
        <div class="hero">
          <div class="div1">
            <div class="hook">
              <p>Lorem Ipsum is not simply random text. 
              It has roots in a piece of classical Latin 
              literature from 45 BC</p>
              <button class="cta">CTA</button>
            </div>
          </div>
          <div class="div2">
          </div>
        </div>
    </header>

    <main>
      <div class="maindiv">

        <section id="articles">
            <h2>Nos Top Articles</h2>
            <br>
            <div class="articles-grid">
                <div class="article">figurine Batman</div>
                <div class="titre-article">
                  <h3>Lorem Ipsum is not simply random text</h3>
                  <p>Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin</p>
                  <button class="cta">CTA</button>
                </div>
                <div class="article">figurine Batman</div>
                <div class="titre-article">
                  <h3>Lorem Ipsum is not simply random text</h3>
                  <p>Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin</p>
                  <button class="cta">CTA</button>
                </div>
            </div>
            <br>
        </section>

        <section id="about">
            <h2>A propos de nous</h2>
            <div class="mainabout">
              <div class="secondabout" id="secondabout1">
                <h3>Lorem IPSUM</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                    It has survived not only five centuries, but also the leap into electronic typesetting, 
                    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets 
                    containing Lorem Ipsum passages, and more recently with desktop publishing software like 
                    Aldus PageMaker including versions of Lorem Ipsum.</p>
                <h3>Lorem IPSUM</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                    It has survived not only five centuries, but also the leap into electronic typesetting, 
                    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets 
                    containing Lorem Ipsum passages, and more recently with desktop publishing software like 
                    Aldus PageMaker including versions of Lorem Ipsum.</p>
                <button class="cta">CTA</button>
              </div>
              <div class="secondabout">
                <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="Group 1.png"><noscript><img decoding="async" src="Group 1.png" alt=""></noscript>
              </div>
            </div>

        </section id="univers">
        <h2>UNIVERS POP CULTURE</h2>
        <div class="main-univers">

          <div class="infos">
            <div class="">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
              industry's standard dummy text ever since the 1500s, 
              when an unknown printer took a galley of type and 
              scrambled it to make a type specimen book. </p>
            </div>
            <div class="">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
              industry's standard dummy text ever since the 1500s, 
              when an unknown printer took a galley of type and 
              scrambled it to make a type specimen book.</p>
            </div>
          </div>
          <div class="image-univers">
            <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="Group 1.png"><noscript><img decoding="async" src="Group 1.png" alt=""></noscript>
            <button class="cta">CTA</button>
          </div>
          <div class="infos">
            <div class="">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
              industry's standard dummy text ever since the 1500s, 
              when an unknown printer took a galley of type and 
              scrambled it to make a type specimen book.</p>

            </div>
            <div class="">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
              industry's standard dummy text ever since the 1500s, 
              when an unknown printer took a galley of type and 
              scrambled it to make a type specimen book.</p>
            </div>
          </div>
        </div>

        <section id="articles-detailed">
            <h2>Nos Articles du moment</h2>
            <div class="detailed-articles">
                <div class="detail-article">figurine Aragorn</div>
                <div class="detail-article">figurine R2D2</div>
                <div class="detail-article">figurine DOOM</div>
                <div class="detail-article">figurine Roronoa Zoro</div>
            </div>
            <br>
            <div class="detailed-articles">
                <div class="detail-article">figurine Catwoman</div>
                <div class="detail-article">figurine PacMan</div>
                <div class="detail-article">figurine Ready Player One</div>
                <div class="detail-article">figurine Tron</div>
            </div>
            <button class="cta">CTA</button>
        </section>

        <section id="feedback">
            <h2>Les retours de nos clients</h2>
            <div class="client-feedbacks">
                <div class="client-feedback">
                    <h3>Batman</h3>
                    <p>Client feedback...It is a long established fact that a reader will be distracted by the readable content of a
                      page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                </div>
                <div class="client-feedback">
                    <h3>Luke Skywalker</h3>
                    <p>Client feedback...It is a long established fact that a reader will be distracted by the readable content of a
                      page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                </div>
                <div class="client-feedback">
                    <h3>Yasuo</h3>
                    <p>Client feedback...It is a long established fact that a reader will be distracted by the readable content of a
                      page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                </div>
            </div>
            <button class="cta">CTA</button>
        </section>
      </div>
      <div class="formulaire">

        <form id="contact-form">
            <h3>Nous laisser un message</h3>
            <div class="baniere">

            </div>
            <input type="text" name="Nom" placeholder="Nom" required class="saisie">
            <br>
            <input type="text" name="prenom" placeholder="Prénom" required class="saisie">
            <br>
            <input type="email" name="email" placeholder="Mail" required class="saisie">
            <br>
            <select name="selection" id="select"  class="saisie" >
              <option value="">Choisir une option</option>
              <option value="">Question</option>
              <option value="">demande de figurine</option>
              <option value="">support</option>
              <option value="">avis</option>
              <option value="">demande d'un article en magasin</option>
            </select>
            <br>
            <textarea name="message" placeholder="Message" required class="saisie" id="saisie-message"></textarea>
            <br>
            <button type="submit" href="#" id="bouton-form">Envoyer</button>
        </form>
      </div>

    </main>

    <footer>
        <div class="footer-info">

            <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Company Logo" class="footer-logo" data-lazy-src="http://foxgram.fr/wp-content/uploads/2024/05/Capture-decran-2024-05-17-155707.png"><noscript><img decoding="async" src="http://foxgram.fr/wp-content/uploads/2024/05/Capture-decran-2024-05-17-155707.png" alt="Company Logo" class="footer-logo"></noscript>
            <div class="useful-links">
                <h3>Liens utiles</h3>
                <a href="#">Lien 1</a>
                <a href="#">Lien 2</a>
                <a href="#">Lien 3</a>
            </div>
            <div class="company-info">
              <h3>Informations</h3>
                <p>Téléphone: +123456789</p>
                <p>Email: info@popart.com</p>
                <p>Adresse: 125 rue Mahone, Ghotam</p>
                <p>Horaires: 9H - 17H</p>
            </div>
        </div>

    </footer>
    <div class="copyright">
        <h6>© 2024 POP&ART</h6>
    </div>
    <button id="contact" data-tally-open="wdYoRd" data-tally-width="380" data-tally-align-left="1" data-tally-hide-title="1" data-tally-overlay="1" data-tally-emoji-text="🦇" data-tally-emoji-animation="heart-beat" data-tally-auto-close="1000"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="icone_contact.png"><noscript><img decoding="async" src="icone_contact.png" alt=""></noscript></button>

</body>
</html>

CODE CSS

				
					body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

header {
    background: url('Group 1.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    display: flex;
    justify-content: center;
}

header .hero {
    display: flex;
    flex-wrap: nowrap;
    width: 1240px;
    height: 600px;
}

header .div1, header .div2 {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .hook {
    background-color: white;
    text-align: center;
    padding: 50px;
    margin: 50px;
}

.cta {
    padding: 10px 20px;
    background-color: blue;
    color: white;
    border: none;
    cursor: pointer;
}

.cta:hover {
    background-color: darkblue;
}

main {
    padding: 20px;
    margin-top: 100px;
    margin-bottom: 50px;
}

main .maindiv {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

section {
    width: 1240px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 50px;
}

.articles-grid, .detailed-articles, .client-feedbacks {
    display: flex;
    justify-content: space-between;
}

.articles-grid, .article, .titre-article {
    flex: 1;
    margin: 10px;
}

.article, .detail-article {
    width: 23%;
    height: 200px;
    background-color: #ccc;
    border: solid 1px black;
}

.client-feedback {
    flex: 1;
    text-align: center;
    margin: 0 10px;
}

.cta {
    background-color: #5CBEA0;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 20px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

h2 {
    text-align: center;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta:hover {
    background-color: #F2BD0F;
}

.main-univers {
    width: 1240px;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

.image-univers {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 10px;
    width: 30%;
}

.infos {
    width: 30%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.formulaire {
    display: flex;
    justify-content: center;
}

footer {
    background-color: #f1f1f1;
    padding: 20px;
    display: flex;
    justify-content: space-around;
}

.footer-info {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

.footer-logo {
    width: 100px;
}

.useful-links a, .company-info p {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
}

#contact-form {
    width: 30%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.saisie {
    border: 2px solid black;
    height: 30px;
    border-radius: 5px;
}

.baniere {
    height: 150px;
    background-image: url("https://images.sxsw.com/BVuxGN2Fl4bnDDZRvpdiPZRTalU=/0x419:1280x1139/950x534/images.sxsw.com/151/3b497fb1-c5cd-4eab-9501-e1d75d97abd5/PP137512.png");
    margin-bottom: 15px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
}

#saisie-message {
    height: 100px;
}

#bouton-form {
    height: 30px;
}

.mainabout {
    display: flex;
    justify-content: space-around;
}

.secondabout {
    width: 50%;
    justify-content: center;
    display: flex;
}

#secondabout1 {
    width: 50%;
    justify-content: left;
    display: flex;
    flex-direction: column;
}

#contact {
    background-color: rgba(255, 0, 0, 0);
    border-color: rgba(255, 0, 0, 0);
    position: fixed;
    bottom: 1%;
    right: 1%;
    z-index: 9999;
}

.copyright {
    display: flex;
    justify-content: center;
}

/* Media Queries */
@media only screen and (max-width: 768px) {
    header .hero {
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    header .div1, header .div2 {
        width: 100%;
        margin-bottom: 20px;
    }

    section {
        width: 90%;
    }

    .articles-grid, .detailed-articles, .client-feedbacks {
        flex-direction: column;
        align-items: center;
    }

    .article, .detail-article {
        width: 90%;
        margin-bottom: 20px;
    }

    .main-univers {
        flex-direction: column;
        width: 90%;
    }

    .image-univers, .infos {
        width: 100%;
    }

    .footer-info {
        flex-direction: column;
        align-items: flex-start;
    }

    #contact-form {
        width: 90%;
    }
}

@media only screen and (max-width: 480px) {
    header {
        padding: 10px;
    }

    header .hook {
        padding: 20px;
        margin: 20px;
    }

    .cta {
        padding: 5px 10px;
        width: 100px;
    }

    main {
        padding: 10px;
    }

    h2 {
        width: 100%;
        margin: 0;
    }
}