On vous demande de créer une nouvelle page activite15.html respectant la mise en page (layout) suivante:
Afficher le code 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">
<link rel="stylesheet" href="dcd.css">
<title>dc2</title>
</head>
<body>
<header id="header" class="header">header </header>
<nav id="nav" class="nav">nav sticky</nav>
<section id="section" class="section">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum optio eos in perferendis non vero nostrum ipsam, quos earum, dignissimos quas obcaecati veniam officiis, eum ad ea vitae? Deserunt. Earum eaque id culpa ipsam, explicabo commodi,
voluptatem ratione magnam illum nobis quis sint magni doloremque illo distinctio, saepe perferendis incidunt mollitia voluptas tempora voluptatum. Porro numquam optio qui repellendus! Ducimus, consequatur iusto? Debitis nesciunt nemo quibusdam
quidem voluptatem corrupti recusandae laudantium commodi! Consequatur laudantium et doloribus perspiciatis molestias nihil officia reprehenderit nam aliquid veritatis illum totam, sit dolore quaerat. Reprehenderit quod id ducimus, nisi labore
sunt, officiis corporis tempore reiciendis aut accusamus, neque sequi ipsa? Illo obcaecati labore, quasi cupiditate repellendus facilis magni. Veritatis exercitationem ut voluptatibus aut aspernatur. Corporis, cumque odio libero quidem fuga suscipit
</section>
<aside id="aside" class="aside">aside</aside>
<footer id="footer" class="footer">footer</footer>
</body>
</html>Afficher le code CSS
body {
min-height: 100vh;
}
.header {
background-color: bisque;
width: 100%;
height: 70px;
}
.nav {
background-color: gold;
width: 100%;
height: 50px;
position: sticky;
top: 1px;
}
.section {
background-color: darkkhaki;
width: 80%;
min-height: 100%;
}
.aside {
background-color: skyblue;
width: 19.8%;
position: absolute;
top: 127.5px;
left: 79.8%;
height: 200px;
}
.footer {
background-color: khaki;
width: 100%;
height: 50px;
}
