Page web de Modern

2,303 idrisse2319

Remix Open In Editor Fullscreen Discuss Publish Your Code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" 
    integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" 
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <title>Modern</title>
</head>
<body>
    <header>
        <h3>Modern</h3>
        <nav>
            <ul>
                <li>
                    <a href="mapage.html">Accueil</a>
                </li>
                <li>
                    <a href="mapage.html">A propos</a>
                </li>
                <li>
                    <a href="mailto:modern@gmail.com">Contact</a>
                </li>
            </ul>
        </nav>
        <button>Connectez-vous</button>
    </header>
    <main>
        
<section id="hero">
    <div class="gauche">
        <h1>Bienvenue sur Modern</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Magni cum excepturi labore, vitae reiciendis autem 
            corporis iure incidunt, 
            eos expedita qui provident, 
            numquam laudantium minus debitis rem 
            voluptates maiores facere.
        </p>
        <button>Apprendre plus</button>
    </div>
    <div class="droite">
        <img src="/assets/images/Tecno Phantom Fold BLANC.png">
        <div class="effet">
            <div class="cercle"></div>
            <div class="cercle"></div>
            <div class="cercle"></div>
        </div>
    </div>
</section>

<section id="services">
    <h2>Services</h2>

<div class="services-list">
        <div class="card-service">
            <div class="icon">
                <i class="fa-solid fa-briefcase"></i>
            </div>
            <h3>Services 1</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Fuga, nostrum alias? 
                Inventore doloremque laboriosam molestiae quae, 
                quasi suscipit molestias totam eius reiciendis.
        
        </div>
        <div class="card-service">
            <div class="icon">
                <i class="fa-solid fa-cart-flatbed-suitcase"></i>
            </div>
            <h3>Services 2</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur 
                adipisicing elit. 
                Fuga, nostrum alias? 
                Inventore doloremque laboriosam molestiae quae, 
                quasi suscipit molestias totam eius reiciendis. 
            </p>
        </div>
        <div class="card-service">
            <div class="icon">
                <i class="fa-solid fa-cart fa-users-gear"></i>
            </div>
            <h3>Services 3</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Fuga, nostrum alias? 
                Inventore doloremque laboriosam molestiae quae, 
                quasi suscipit molestias totam eius reiciendis.  
            </p>
        </div>
        <div class="card-service">
            <div class="icon">
                <i class="fa-solid fa-chart-pie"></i>
            </div>
            <h3>Services 4</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Fuga, nostrum alias? 
                Inventore doloremque laboriosam molestiae quae, 
                quasi suscipit molestias totam eius reiciendis.
        </div>
    </div>
</section>

<section id="images">
    <h2>Images</h2>
    <div class="photo">
        <img src="/assets/images/Huawei-P60-pro-256Gb-8Gb-Ram.png" >
        <img src="/assets/images/iphone-13-pro-max-silver.webp" >
        <img src="/assets/images/iPhone 15 Pro - Front-Back_0.png.webp" >
        <img src="/assets/images/Xiaomi-12-pro.webp" >
        <img src="/assets/images/xiaomi-mi-12-pro 256gb-12gb-ram.png" >
        <img src="/assets/images/XIAOMI-11T.png" >
    </div>
</section>

<section id="contact">
    <div class="partie1">
        <h2>Qui sommes-nous ?</h2>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
             Sint sequi doloribus ipsa consectetur corrupti nobis 
             debitis quaerat, 
             reiciendis error ipsum repellat cumque, nulla, 
             ipsam vero tempore beatae.
             Quod libero quidem modi veniam exercitationem totam, 
             eligendi, 
             odit magni odio est delectus voluptatum. 
             Dolore mollitia rerum necessitatibus libero porro 
             cupiditate, sit laboriosam!
        </p>
        <p>
            Lorem ipsum dolor, sit amet consectetur 
            adipisicing elit. Quam iusto nemo labore 
            ullam esse possimus similique molestias 
            magnam, saepe ad!
        </p>
    </div>
    <div class="partie2">
        <h2>Contactez-nous</h2>
        <form action="">
            <input type="text" placeholder="votre nom">
            <input type="email" placeholder="votre adresse mail">
            <input name="message" placeholder="votre message" />
            <button type="submit">Envoyer</button>
        </form>
    </div>
</section>

<footer>
    <p>
    @modern, tout droit reservé 2024
    </p>
 </footer>

<div class="reseau">
    <div class="carte">
        <i class="fa-brands fa-facebook-f"></i>
    </div>
    <div class="carte">
        <i class="fa-brands fa-x-twitter"></i>
    </div>
    <div class="carte">
        <i class="fa-brands fa-instagram"></i>
    </div>
 </div>

</main>
</body>
</html>

CSS

/* -----initialisation du projet----- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---DEclaration des variables-- */

html{
    --var-bg-color: #7743e9;
    --var-secodary-color: #6e51cf;
    --var-text-color-dark: #333;
    --var-bg-light: #f0f4ff;
    --var-bg-dark: #d3c9f3;
    --var-text-color: #fff;
}

body{
    font-family: 'Poppins', sans-serif;
    background-color: var(--var-bg-light);
    color: var(--var-text-color-dark);
}

header{
    height: 4rem;
    background-color: #ffff;
    padding: 0 2rem;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10000;
}

header h3{
    background: linear-gradient(to left,
    #7743e9, #6e51cf, #333,#f0f4ff);
    background-clip: text;
    display: inline-block;
    color: transparent;
    animation: animated 5s linear infinite;
    font-family: 'Poppins', serif;
    font-size: larger;
    font-weight: 1000;
}

@keyframes animated {
    to {background-position-x: 161px;
    to 
}
}

header nav ul{
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1rem;
}

nav ul li a{
    text-decoration: none;
    color: var(--var-text-color-dark);
    font-weight: 500;
    transition: 0.3s;
}

nav ul li a:hover{
    color: var(--var-secodary-color);
}

header button{
background-color: var(--var-secodary-color);
color: var(--var-text-color);
border: none;
padding:0.7rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
cursor: pointer;
transition: 0.3s;
}

header button:hover{
    background-color: var(--var-text-color);
    color: var(--var-secodary-color);
    border: 1px solid var(--var-secodary-color);
    border-radius: 0.5rem;
}

/* ----main mise en forme------ */

main{
    padding: 2rem;
}

#hero{
    width: 100%;
    height: 70vh;
    border-radius: 5px;
    padding: 1rem;
    background: linear-gradient(
        90deg,
        var(--var-bg-color)15%,
        var(--var-secodary-color)100%
    );

display: flex;
    justify-content: center;
    align-items: center;
}

#hero .gauche h1{
    font-size: 3rem;
    font-weight: 900;
    color: var(--var-text-color);
}

#hero .gauche p{
    font-size: clamp(1rem,2vw,1rem);
    color: var(--var-text-color);
}

span{
    color: rgb(247, 247, 247);
    position: relative;
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 45px;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, #e40505, #fff, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 4s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
  }

.gauche button{
    background-color: var(--var-text-color);
    color: var(--var-text-color-dark);
    margin-top: 1.4rem;
    border: none;
    padding: 0.9rem 1rem;
    border-radius: 0.3rem;
    font-weight: 500;
    cursor: pointer;
}

.droite{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.droite img{
    width: 70%;
    height: 90%;
    object-fit: cover;
    margin-right: 5px;
    z-index: 1000;
}

.effet{
    width: 100%;
    height: 100%;
    position: absolute;
}

.effet .cercle{
    width: 60px;
    height: 60px;
    border-radius: 50px;
    animation: animation 4s ease-in infinite;
}

.cercle:nth-child(1){
    background: linear-gradient(90deg, var(--var-bg-color)15%,
    #9b8dc8 100%);
    position: absolute;
    right: 10px;
    animation-delay: 0.5s;
 
}

.cercle:nth-child(2){
    background: linear-gradient(90deg, var(--var-bg-color)15%,
    #9b8dc8 100%);
    position: absolute;
    left: 10px;
    top: 90px;
    animation-delay: 1.5s;
}

.cercle:nth-child(3){
    background: linear-gradient(90deg, var(--var-bg-color)15%,
    #9b8dc8 100%);
    position: absolute;
    left: 100px;
    animation-delay: 1s;
}

@keyframes animation{
   0% {
        transform: translateY(0);
    }
    50%{
        transform: translateY(100px);
    }
    100%{
        transform: translateY(0);
    }
}

/* ------service mise en forme-------- */

#services{
    margin-top: 2rem;
}

#services h2{
    font-size: 2rem;
    font-weight: 900;
    color: var(--var-text-color-dark);
    margin-bottom: 3rem;
    text-align: center;
}

.services-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.services-list .card-service{
    flex: 1;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.card-service .icon{
    width: 50px;
    height: 50px;
    background-color: var(--var-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    position: absolute;
    top: -25px;
}

.card-service .icon i{
    font-size: 1.3em;
    color: var(--var-text-color);
}

.card-service h3{
    margin-top: 1rem;
}

/* --------images mise en forme------- */
#images{
    margin-top: 2rem;
}

#images h2{
    font-size: 2rem;
    font-weight: 900;
    color: var(--var-text-color-dark);
    margin-bottom: 1rem;
    text-align: center;
}

#images .photo{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.photo img{
    width: 80%;
    border-radius: 1rem;
}

/* ---------contact mise en forme-------- */

#contact{
    margin-top: 3rem;
    display: flex;
    height: calc(100vh - 200px);
    background-color: #fff;
    border-radius: 5px;
}

#contact .partie1,
.partie2{
    flex: 1;
    border-radius: 5px;
    margin-bottom: 1rem;
    position: relative;
    padding: 1rem;
    height: 100%;
}

#contact .partie1{
    background-color: #d5d4d7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#contact h2{
    font-size: 2rem;
    font-weight: 900;
    color: var(--var-text-color-dark);
    margin-bottom: 1rem;
    text-align: center;
}

.partie2 form{
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.partie2 form input,textarea{
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #636161;
    margin-bottom: 0.5rem;
    outline: none;
    border-radius: 5px;
    font-style: 1rem;
    transition: 1s;
}

.partie2 form textarea{
    height: 100px;
    resize: none;
}

.partie2 form input:focus{
    border: 2px solid var(--var-bg-color)
}

.partie2 form button{
    background: var(--var-bg-color);
    color: var(--var-text-color);
    padding: 0.9rem 1rem;
    border: none;
    border-radius: 0.3rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

.partie2 form button:hover{
    background-color: var(--var-secodary-color);
}

/* -------pied de page----------- */

footer{
    width: 100%;
    height: 100px;
    background-color: var(--var-text-color);
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--var-text-color-dark);
}

/* -----------Medias sociaux----------- */
.reseau{
    position: fixed;
    right: 0;
    bottom: 3rem;
    background-color: rgb(131, 131, 227);
    padding: 10px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reseau .carte{
    width: 30px;
    height: 30px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    cursor: pointer;
}

.carte:hover{
    background-color: #fff;
    border-radius: 5px;
}

/* ========les Medias query============ */
@media screen and (max-width: 768px) {
    header nav {
        display: none;
    }

#hero{
        flex-direction: column;
        min-height: 100vh;
        gap: 10px;
    }

#hero .gauche h1{
        font-size: 20px;
    }

.gauche{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.droite img{
        width: 50%;
        height: 200px;
    }

/* -----------servives----------- */

.services-list{
        flex-direction: column;
        gap: 2rem;
    }

#contact{
        min-height: 100vh;
        flex-direction: column;
        height: 100%;
    }

footer{
        margin-top: 10%;
    }
}

Page web de Modern

Recommended