<!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">
<link rel="stylesheet" href="css\home.css">
<title>Welcome</title>
</head>
<body>
<nav>
<div class="nav-brand">
<img src="\images\Yummy Cookies-logos_black.png" alt="">
</div>
<ol>
<li><a href="">Home</a></li>
<li><a href="">Our Journey</a></li>
<li><a href="">Place Your Order</a></li>
<li><a href="">About</a></li>
</ol>
</nav>
<section class="video-greeting">
<video autoplay loop muted src="videos\pexels-olya-kobruseva-5264841.mp4"> </video>
<a href="">Place Your Order</a>
</section>
<section class="cookie-tab">
<img class="first-image"width=300px src="images\delish-ms-fields-cookies-024-1544735513.jpg" alt="">
<p class="first-lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur mollitia, voluptates laudantium adipisci deserunt consequuntur sequi assumenda veritatis quaerat id asperiores saepe est. Unde magnam dolores rem, neque tempora perspiciatis.</p>
<p class="second-lorem">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea, quibusdam est facere, alias rem perferendis animi, architecto nobis at iste aliquam quis adipisci error? Itaque porro quam odit est laboriosam obcaecati soluta sapiente earum quas rerum, tempora magni excepturi maiores saepe aperiam ipsum eaque quasi libero vero corrupti dolorum dolor! Vero magni recusandae cum nesciunt aliquam quo debitis placeat eos reprehenderit harum repellendus, dolore rerum doloribus, accusamus, aliquid corporis laborum praesentium molestias neque porro magnam. Quam corrupti delectus provident cum vitae sed earum nihil nemo. Cupiditate ab, voluptate aspernatur ullam libero dolorum animi qui nisi eaque impedit, a tempora veniam.</p>
<img class="second-image"width=300px src="\images\soft-sugar-cookies-5.jpg" alt="">
</section>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
body{
font-family: 'Cookie', cursive;
margin: 0px;
box-sizing: border-box;
}
/* navbar ________________ */
nav{
background-color: pink;
position: fixed;
z-index: 12;
width: 100%;
top: 0px;
display: flex;
justify-content: space-between;
max-height: 120px;
}
.nav-brand{
width: 100px;
display: inline-block;
}
.nav-brand img{
width: 100%;
}
nav ol{
display: flex;
gap: 5px;
margin-right: 20px
}
nav li{
display: inline-block;
list-style: none;
}
nav li a{
display: inline-block;
text-decoration: none;
color: black;
font-size: 1em;
padding:2px;
padding-top: 30px;
}
nav li a:hover{
color: white;
}
/* video greeting */
.video-greeting{
margin-top: 90px;
background-color: pink;
width: 100%;
height: 400px;
}
.video-greeting video {
width: 100%;
height: 100%;
position: relative;
object-fit: cover;
left: 50%;
transform: translateX(-50%);
}
.video-greeting a {
position: absolute;
z-index: 2;
font-size: 1em;
background-color: pink;
background-color: rgba(251, 231, 239, 1);
padding: 10px;
border-radius: 50%;
top: 43%;
left: 39%;
text-decoration: none;
color: black;
}
.cookie-tab{
background-color: pink;
padding: 20px 10px;
display: grid;
grid-template-columns: auto auto;
gap: 20px;
}
.cookie-tab img{
border: 2px black solid;
width: 100%;
display: block;
}
.cookie-tab p{
width: 100%;
display: inline-block;
text-align: center;
}
Je souhaite rendre cette page plus réactive. Je sais que je peux utiliser l'outil @media mais je me demande s'il existe une meilleure façon de changer le type d'unité. Par exemple, comment redimensionner une police à mesure que la taille de la page augmente, ou comment faire en sorte que certains éléments (tels qu'un élément de message d'accueil vidéo) ne bougent pas mais restent au même endroit. Merci
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ce code est destiné aux appareils plus petits. Utilisez-le comme point de départ
@media only screen and (max-width: 600px) { .nav { flex-direction: column; } }Fondamentalement, le style sera appliqué à cette largeur ou moins