Embedded Files
Mise en page HTML introduction au CSS
Mise en page HTML introduction au CSS
En HTML, pour structurer une page l'élément le plus commun est la balise <div>, l’origine du terme. div vient du mot anglais division, c’est-à-dire "section", "division" ou encore "scission".
La balise <div> est un élément générique de type "conteneur" qui permet de diviser et de séparer le contenu d'une page web. Elle n'a aucune signification sémantique propre et son utilisation est uniquement recommandée lorsqu'aucun autre élément plus précis ne peut être utilisé.
Voici quelques exemples d'utilisations courantes de la balise <div>
Voici quelques exemples d'utilisations courantes de la balise <div>
Structurer la mise en page d'une page web:
Définir un en-tête, un pied de page, une zone de contenu principale, etc.Organiser le contenu d'une section:
Créer des colonnes, des blocs de texte, des listes, etc.Grouper des éléments pour leur appliquer un style CSS:
Modifier la couleur, la police, la marge, etc. d'un groupe d'éléments.
En résumé, il n'y a pas de liste exhaustive des <div> en HTML car leur utilisation est flexible et dépend du contexte de la page web.
HTML sans mise en forme et sans style (CSS)
HTML sans mise en forme et sans style (CSS)
Code intégré dans l'exemple de la page ci-dessous ⬇️
<section>
<div>
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe nobis blanditiis repellendus tenetur suscipit eaque veniam ut provident dolore, distinctio cupiditate vel quis deserunt quia quod recusandae beatae culpa!
Modi culpa est incidunt ratione reiciendis sequi nesciunt veniam vitae obcaecati velit! Doloremque quam reprehenderit modi optio fuga deserunt ullam, eligendi, fugiat vel nulla quibusdam. Totam et veritatis aut sunt?
Illum nulla eveniet libero porro magni eum corporis dicta id impedit nostrum, placeat praesentium autem non tempore esse dolor repudiandae perspiciatis recusandae amet aspernatur omnis? Ipsam, unde? Nobis, consequuntur eum?
</p>
</div>
<div>
<img src="https://64.media.tumblr.com/6c3adc48ff6e7fb6e8f4e224a7dbdaa2/6b38b15397067d8a-87/s1280x1920/fb6da6ebfcfe9266138b7d8534d3fa138bcb070d.jpg" class="img-content" alt="">
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <em>Eum saepe nobis blanditiis repellendus tenetur suscipit eaque veniam ut provident dolore,</em> distinctio cupiditate vel quis deserunt quia quod recusandae beatae culpa!
Modi culpa est incidunt ratione reiciendis sequi <strong>nesciunt veniam vitae</strong> obcaecati velit! Doloremque quam reprehenderit modi optio fuga deserunt ullam, eligendi, <a href="https://sites.google.com/view/corvisart-multimedia/fcil-2023-2024">fugiat vel nulla quibusdam. Totam et veritatis aut sunt?</a>
Illum nulla eveniet libero porro magni eum corporis dicta id impedit nostrum, placeat praesentium autem non tempore esse dolor repudiandae perspiciatis recusandae amet aspernatur omnis? Ipsam, unde? Nobis, consequuntur eum?
</p>
</div>
</section>
HTML page sans mise en forme et sans style (CSS)
HTML page sans mise en forme et sans style (CSS)
Code intégré dans l'exemple de la page ci-dessous ⬇️
<body>
<!-- Voici notre en‑tête principale utilisée dans toutes les pages
de notre site web -->
<header>
<h1>En-tête</h1>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">L'équipe</a></li>
<li><a href="#">Projets</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Un formulaire de recherche est une autre façon de naviguer de
façon non‑linéaire dans un site. -->
<form>
<input type="search" name="q" placeholder="Rechercher" />
<input type="submit" value="Lancer !" />
</form>
</nav>
<!-- Ici nous mettons le contenu de la page -->
<main>
<!-- Il contient un article -->
<article>
<h2>En-tête d'article</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
congue enim, ut porta lorem lacinia consectetur.
</p>
<h3>Sous‑section</h3>
<p>
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem.
Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.
</p>
<p>
Pelientesque auctor nisi id magna consequat sagittis. Curabitur
dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet.
Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.
</p>
<h3>Autre sous‑section</h3>
<p>
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
soclis natoque penatibus et manis dis parturient montes, nascetur
ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
facilisis semper ac in est.
</p>
<p>
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi
diam iaculis velit, is fringille sem nunc vet mi.
</p>
</article>
<!-- Le contenu « à côté » peut aussi être intégré dans le contenu
principal -->
<aside>
<h2>En relation</h2>
<ul>
<li><a href="#">Combien j'aime être près des rivages</a></li>
<li><a href="#">Combien j'aime être près de la mer</a></li>
<li><a href="#">Bien que dans le nord de l'Angleterre</a></li>
<li><a href="#">Il n'arrête jamais de pleuvoir</a></li>
<li><a href="#">Eh bien…</a></li>
</ul>
</aside>
</main>
<!-- Et voici notre pied de page utilisé sur toutes les pages du site -->
<footer>
<p>©Copyright 2050 par personne. Tous droits reversés.</p>
</footer>
</body>
HTML textes & images avec style (CSS)
HTML textes & images avec style (CSS)
Vous pouvez intégrer<> ce code dans votre site Google ⬇️
<section class="hor-1">
<div class="col-1">
<div class="content">
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe nobis blanditiis repellendus tenetur suscipit eaque veniam ut provident dolore, distinctio cupiditate vel quis deserunt quia quod recusandae beatae culpa!
Modi culpa est incidunt ratione reiciendis sequi nesciunt veniam vitae obcaecati velit! Doloremque quam reprehenderit modi optio fuga deserunt ullam, eligendi, fugiat vel nulla quibusdam. Totam et veritatis aut sunt?
Illum nulla eveniet libero porro magni eum corporis dicta id impedit nostrum, placeat praesentium autem non tempore esse dolor repudiandae perspiciatis recusandae amet aspernatur omnis? Ipsam, unde? Nobis, consequuntur eum?
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe nobis blanditiis repellendus tenetur suscipit eaque veniam ut provident dolore, distinctio cupiditate vel quis deserunt quia quod recusandae beatae culpa!
Modi culpa est incidunt ratione reiciendis sequi nesciunt veniam vitae obcaecati velit! Doloremque quam reprehenderit modi optio fuga deserunt ullam, eligendi, fugiat vel nulla quibusdam. Totam et veritatis aut sunt?
Illum nulla eveniet libero porro magni eum corporis dicta id impedit nostrum, placeat praesentium autem non tempore esse dolor repudiandae perspiciatis recusandae amet aspernatur omnis? Ipsam, unde? Nobis, consequuntur eum?
</p>
</div>
</div>
<div class="col-2 back-img">
<div class="content">
<img src="https://64.media.tumblr.com/6c3adc48ff6e7fb6e8f4e224a7dbdaa2/6b38b15397067d8a-87/s1280x1920/fb6da6ebfcfe9266138b7d8534d3fa138bcb070d.jpg" class="img-content" alt="">
<p>Robot dreamer Lorem ipsum dolor sit amet consectetur adipisicing elit. <em>Eum saepe nobis blanditiis repellendus tenetur suscipit eaque veniam ut provident dolore,</em> distinctio cupiditate vel quis deserunt quia quod recusandae beatae culpa! Modi culpa est incidunt ratione reiciendis sequi <strong>nesciunt veniam vitae</strong> obcaecati velit! Doloremque quam reprehenderit modi optio fuga deserunt ullam, eligendi, <a href="https://sites.google.com/view/corvisart-multimedia/fcil-2023-2024">fugiat vel nulla quibusdam. Totam et veritatis aut sunt?</a> Illum nulla eveniet libero porro magni eum corporis dicta id impedit nostrum, placeat praesentium autem non tempore esse dolor repudiandae perspiciatis recusandae amet aspernatur omnis? Ipsam, unde? Nobis, consequuntur eum?
</p>
</div>
</div>
</section>
<section class="hor-2 back-img-2">
<div class="col-3">
<div class="content-2">
<img src="https://64.media.tumblr.com/da62a125493ec93c2af694d64beb4672/38f0ece81cfa98bb-81/s1280x1920/aacce367be7129ce5ff5fff223a8ecf4874b5b9b.jpg" class="img-content-2" alt="">
</div>
</div>
<div class="col-4">
<div class="content-2">
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe nobis blanditiis repellendus tenetur suscipit eaque veniam ut provident dolore, distinctio cupiditate vel quis deserunt quia quod recusandae beatae culpa!
Modi culpa est incidunt ratione reiciendis sequi nesciunt veniam vitae obcaecati velit! Doloremque quam reprehenderit modi optio fuga deserunt ullam, eligendi, fugiat vel nulla quibusdam. Totam et veritatis aut sunt?
Illum nulla eveniet libero porro magni eum corporis dicta id impedit nostrum, placeat praesentium autem non tempore esse dolor repudiandae perspiciatis recusandae amet aspernatur omnis? Ipsam, unde? Nobis, consequuntur eum?
</p>
</div>
</div>
</section>
<section class="hor-3">
<div class="col-5">
<div class="content-3">
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe nobis blanditiis repellendus tenetur suscipit eaque veniam ut provident dolore, distinctio cupiditate vel quis deserunt quia quod recusandae beatae culpa!
Modi culpa est incidunt ratione reiciendis sequi nesciunt veniam vitae obcaecati velit! Doloremque quam reprehenderit modi optio fuga deserunt ullam, eligendi, fugiat vel nulla quibusdam. Totam et veritatis aut sunt?
Illum nulla eveniet libero porro magni eum corporis dicta id impedit nostrum, placeat praesentium autem non tempore esse dolor repudiandae perspiciatis recusandae amet aspernatur omnis? Ipsam, unde? Nobis, consequuntur eum?
</p>
</div>
</div>
<div class="col-6 back-img-3">
<div class="content-3">
<img src="https://64.media.tumblr.com/e0c15c771b496c85cc54f82ab45091dd/ce5bf12b1595594b-70/s1280x1920/91b353d04531bb18f11eb46593953e4b21bd5758.png" class="img-content-3" alt="">
</div>
</div>
<div class="col-7">
<div class="content-3">
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe nobis blanditiis repellendus tenetur suscipit eaque veniam ut provident dolore, distinctio cupiditate vel quis deserunt quia quod recusandae beatae culpa!
Modi culpa est incidunt ratione reiciendis sequi nesciunt veniam vitae obcaecati velit! Doloremque quam reprehenderit modi optio fuga deserunt ullam, eligendi, fugiat vel nulla quibusdam. Totam et veritatis aut sunt?
Illum nulla eveniet libero porro magni eum corporis dicta id impedit nostrum, placeat praesentium autem non tempore esse dolor repudiandae perspiciatis recusandae amet aspernatur omnis? Ipsam, unde? Nobis, consequuntur eum?
</p>
</div>
</div>
</section>
<style>
@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap");
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 16px;
color: rgb(7, 1, 22);
background-color: rgb(252, 247, 241);
}
.hor-1 {
display: block;
margin: 5% auto;
box-sizing: border-box;
width: 90%;
height: 90vh;
min-height: fit-content;
}
.back-img {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(0, 255, 255), rgb(127, 255, 212)),
url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: overlay;
}
.col-1 {
float: left;
padding: 6%;
width: 49%;
height: 100%;
border: 6px solid rgba(255, 255, 255, 0.5);
background-color: rgb(255, 21, 21);
overflow: hidden;
}
.col-1 .content p:nth-child(2):first-letter {
color: rgb(255, 255, 255);
float: left;
font-family: "Black Ops One", system-ui;
font-size: 8em;
line-height: 0.65em;
padding-top: 10px;
padding-right: 10px;
padding-left: 0px;
}
.content {
width: 100%;
height: auto;
}
.img-content {
margin: 0 25% 5% 25%;
width: 50%;
height: auto;
border-radius: 20px 50% 50% 20px;
}
.col-2 {
float: right;
padding: 6%;
width: 49%;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(83, 1, 65);
overflow: hidden;
}
.col-2 .content p:nth-child(2):first-letter {
color: rgb(0, 247, 255);
font-family: "Black Ops One", system-ui;
padding-right: 8px;
initial-letter: 4;
}
.hor-2 {
display: block;
margin: 5% auto;
box-sizing: border-box;
width: 90%;
height: 60vh;
border-radius: 0 0 40px 40px;
min-height: fit-content;
background-color: rgb(128, 0, 38);
}
.back-img-2 {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(134, 186, 255), rgb(101, 232, 255)),
url("https://64.media.tumblr.com/adc3bfa5d20d74e5f68acfb19baa3bb2/cdc6ec5fe0a3049a-59/s1280x1920/af6b2d94a884950d126ffe320934f791338955db.jpg");
background-size: cover;
background-blend-mode: darken;
}
.content-2 {
width: 100%;
height: auto;
}
.img-content-2 {
margin: 0 5% 5% 5%;
width: 90%;
height: auto;
border-radius: 50%;
}
.col-3 {
float: left;
padding: 4%;
width: 33%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-4 {
float: right;
padding: 6% 6% 6% 0;
width: 65%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.hor-3 {
display: block;
margin: 5% auto;
box-sizing: border-box;
border-radius: 40px;
width: 90%;
height: 90vh;
min-height: fit-content;
background-color: rgb(241, 232, 201);
}
.back-img-3 {
background-repeat: no-repeat;
background-image: linear-gradient(
0deg,
rgb(23, 2, 27) 0%,
rgb(15, 0, 54) 30%,
rgb(27, 0, 180) 100%
),
url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: hue;
}
.content-3 {
width: 100%;
height: auto;
}
.img-content-3 {
width: 100%;
height: auto;
}
.col-5 {
float: left;
padding: 6%;
width: 34%;
height: 100%;
border-radius: 40px 0 0 40px;
color: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(23, 2, 27) 0%,
rgb(15, 0, 54) 30%,
rgb(27, 0, 180) 100%
);
overflow: hidden;
}
.col-6 {
float: left;
border-radius: 300px;
padding: 12% 0 0 0;
margin: 0 4% 0 4%;
width: 24%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-7 {
float: right;
padding: 6%;
width: 34%;
height: 100%;
color: rgb(255, 255, 255);
border-radius: 0 40px 40px 0;
background: linear-gradient(
0deg,
rgb(17, 0, 37) 0%,
rgb(20, 0, 71) 30%,
rgb(89, 1, 124) 100%
);
overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Big Shoulders Display", sans-serif;
}
p {
font-family: "Sofia Sans", sans-serif;
}
h1 {
font-weight: 500;
font-size: 3.6vh;
line-height: normal;
text-align: left;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p {
padding-top: 0.7em;
font-weight: 400;
font-size: 2.1vh;
line-height: normal;
text-align: justify;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p strong {
font-weight: 900;
}
p a {
font-weight: 700;
color: rgb(187, 255, 0);
text-decoration: none;
}
/* Définit les breakpoints */
/* Règles CSS pour les ordinateurs de bureau */
@media (min-width: 1201px) {
.hor-1 {
display: block;
margin: 5% auto;
box-sizing: border-box;
width: 90%;
height: 90vh;
min-height: fit-content;
}
.back-img {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(0, 255, 255), rgb(127, 255, 212)),
url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: overlay;
}
.col-1 {
float: left;
padding: 6%;
width: 49%;
height: 100%;
border: 6px solid rgba(255, 255, 255, 0.5);
background-color: rgb(255, 21, 21);
overflow: hidden;
}
.col-1 .content p:nth-child(2):first-letter {
color: rgb(255, 255, 255);
float: left;
font-family: "Black Ops One", system-ui;
font-size: 8em;
line-height: 0.65em;
padding-top: 10px;
padding-right: 10px;
padding-left: 0px;
}
.content {
width: 100%;
height: auto;
}
.img-content {
margin: 0 25% 5% 25%;
width: 50%;
height: auto;
border-radius: 20px 50% 50% 20px;
}
.col-2 {
float: right;
padding: 6%;
width: 49%;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(83, 1, 65);
overflow: hidden;
}
.col-2 .content p:nth-child(2):first-letter {
color: rgb(0, 247, 255);
font-family: "Black Ops One", system-ui;
padding-right: 8px;
initial-letter: 4;
}
.hor-2 {
display: block;
margin: 5% auto;
box-sizing: border-box;
width: 90%;
height: 60vh;
border-radius: 0 0 40px 40px;
min-height: fit-content;
background-color: rgb(128, 0, 38);
}
.back-img-2 {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(134, 186, 255), rgb(101, 232, 255)),
url("https://64.media.tumblr.com/adc3bfa5d20d74e5f68acfb19baa3bb2/cdc6ec5fe0a3049a-59/s1280x1920/af6b2d94a884950d126ffe320934f791338955db.jpg");
background-size: cover;
background-blend-mode: darken;
}
.content-2 {
width: 100%;
height: auto;
}
.img-content-2 {
margin: 0 5% 5% 5%;
width: 90%;
height: auto;
border-radius: 50%;
}
.col-3 {
float: left;
padding: 4%;
width: 33%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-4 {
float: right;
padding: 6% 6% 6% 0;
width: 65%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.hor-3 {
display: block;
margin: 5% auto;
box-sizing: border-box;
border-radius: 40px;
width: 90%;
height: 90vh;
min-height: fit-content;
background-color: rgb(241, 232, 201);
}
.back-img-3 {
background-repeat: no-repeat;
background-image: linear-gradient(
0deg,
rgb(23, 2, 27) 0%,
rgb(15, 0, 54) 30%,
rgb(27, 0, 180) 100%
),
url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: hue;
}
.content-3 {
width: 100%;
height: auto;
}
.img-content-3 {
width: 100%;
height: auto;
}
.col-5 {
float: left;
padding: 6%;
width: 34%;
height: 100%;
border-radius: 40px 0 0 40px;
color: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(23, 2, 27) 0%,
rgb(15, 0, 54) 30%,
rgb(27, 0, 180) 100%
);
overflow: hidden;
}
.col-6 {
float: left;
border-radius: 300px;
padding: 12% 0 0 0;
margin: 0 4% 0 4%;
width: 24%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-7 {
float: right;
padding: 6%;
width: 34%;
height: 100%;
color: rgb(255, 255, 255);
border-radius: 0 40px 40px 0;
background: linear-gradient(
0deg,
rgb(17, 0, 37) 0%,
rgb(20, 0, 71) 30%,
rgb(89, 1, 124) 100%
);
overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Big Shoulders Display", sans-serif;
}
p {
font-family: "Sofia Sans", sans-serif;
}
h1 {
font-weight: 500;
font-size: 3.6vh;
line-height: normal;
text-align: left;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p {
padding-top: 0.7em;
font-weight: 400;
font-size: 2.1vh;
line-height: normal;
text-align: justify;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p strong {
font-weight: 900;
}
p a {
font-weight: 700;
color: rgb(187, 255, 0);
text-decoration: none;
}
}
/* Règles CSS pour les ordinateurs portables */
@media (min-width: 992px) and (max-width: 1200px) {
.hor-1 {
display: grid;
margin: 5% auto;
box-sizing: border-box;
width: 90%;
height: 100%;
min-height: fit-content;
}
.back-img {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(0, 255, 255), rgb(127, 255, 212)),
url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: overlay;
}
.col-1 {
float: left;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border: 3px solid rgba(255, 255, 255, 0.5);
background-color: rgb(255, 21, 21);
overflow: hidden;
}
.col-1 .content p:nth-child(2):first-letter {
color: rgb(255, 255, 255);
float: left;
font-family: "Black Ops One", system-ui;
font-size: 8em;
line-height: 0.65em;
padding-top: 10px;
padding-right: 10px;
padding-left: 0px;
}
.content {
width: 100%;
height: auto;
}
.img-content {
margin: 5% 25% 10% 25%;
width: 50%;
height: auto;
border-radius: 20px 50% 50% 20px;
}
.col-2 {
float: right;
margin-top: 6%;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(83, 1, 65);
overflow: hidden;
}
.col-2 .content p:nth-child(2):first-letter {
color: rgb(0, 247, 255);
font-family: "Black Ops One", system-ui;
padding-right: 8px;
initial-letter: 4;
}
.hor-2 {
display: grid;
margin: 10% auto;
box-sizing: border-box;
width: 90%;
height: 100%;
min-height: fit-content;
border-radius: 0 0 40px 40px;
background-color: rgb(128, 0, 38);
}
.back-img-2 {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(134, 186, 255), rgb(101, 232, 255)),
url("https://64.media.tumblr.com/adc3bfa5d20d74e5f68acfb19baa3bb2/cdc6ec5fe0a3049a-59/s1280x1920/af6b2d94a884950d126ffe320934f791338955db.jpg");
background-size: cover;
background-blend-mode: overlay;
}
.content-2 {
width: 100%;
height: auto;
}
.img-content-2 {
margin: 20%;
width: 60%;
height: auto;
border-radius: 50%;
}
.col-3 {
float: left;
padding: 0;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-4 {
float: right;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.hor-3 {
display: grid;
margin: 5% auto;
box-sizing: border-box;
border-radius: 40px;
width: 90%;
height: 100%;
min-height: fit-content;
background-color: rgb(241, 232, 201);
}
.back-img-3 {
background-repeat: no-repeat;
background-image: url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: normal;
}
.col-5 {
float: left;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border-radius: 40px;
color: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(23, 2, 27) 0%,
rgb(15, 0, 54) 30%,
rgb(27, 0, 180) 100%
);
overflow: hidden;
}
.col-6 {
float: left;
border-radius: 40px;
padding-top: 20%;
margin: 4% 0 4% 0;
width: 100%;
height: auto;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-7 {
float: right;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border-radius: 40px;
color: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(17, 0, 37) 0%,
rgb(20, 0, 71) 30%,
rgb(89, 1, 124) 100%
);
overflow: hidden;
}
.content-3 {
width: 100%;
height: auto;
}
.img-content-3 {
width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Big Shoulders Display", sans-serif;
}
p {
font-family: "Sofia Sans", sans-serif;
}
h1 {
font-weight: 500;
font-size: 1.8em;
line-height: 1.2;
text-align: left;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p {
padding-top: 0.5em;
font-weight: 400;
font-size: 1.2em;
line-height: 1.3;
text-align: justify;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p strong {
font-weight: 900;
}
p a {
font-weight: 700;
color: rgb(187, 255, 0);
text-decoration: none;
}
}
/* Règles CSS pour les tablettes */
@media (min-width: 768px) and (max-width: 991px) {
.hor-1 {
display: grid;
margin: 5% auto;
box-sizing: border-box;
width: 90%;
height: 100%;
min-height: fit-content;
}
.back-img {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(0, 255, 255), rgb(127, 255, 212)),
url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: overlay;
}
.col-1 {
float: left;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border: 3px solid rgba(255, 255, 255, 0.5);
background-color: rgb(255, 21, 21);
overflow: hidden;
}
.col-1 .content p:nth-child(2):first-letter {
color: rgb(255, 255, 255);
float: left;
font-family: "Black Ops One", system-ui;
font-size: 8em;
line-height: 0.65em;
padding-top: 10px;
padding-right: 10px;
padding-left: 0px;
}
.content {
width: 100%;
height: auto;
}
.img-content {
margin: 5% 25% 10% 25%;
width: 50%;
height: auto;
border-radius: 20px 50% 50% 20px;
}
.col-2 {
float: right;
margin-top: 6%;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(83, 1, 65);
overflow: hidden;
}
.col-2 .content p:nth-child(2):first-letter {
color: rgb(0, 247, 255);
font-family: "Black Ops One", system-ui;
padding-right: 8px;
initial-letter: 4;
}
.hor-2 {
display: grid;
margin: 10% auto;
box-sizing: border-box;
width: 90%;
height: 100%;
min-height: fit-content;
border-radius: 0 0 40px 40px;
background-color: rgb(128, 0, 38);
}
.back-img-2 {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(134, 186, 255), rgb(101, 232, 255)),
url("https://64.media.tumblr.com/adc3bfa5d20d74e5f68acfb19baa3bb2/cdc6ec5fe0a3049a-59/s1280x1920/af6b2d94a884950d126ffe320934f791338955db.jpg");
background-size: cover;
background-blend-mode: overlay;
}
.col-3 {
float: left;
padding: 0;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-4 {
float: right;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.content-2 {
width: 100%;
height: auto;
}
.img-content-2 {
margin: 20%;
width: 60%;
height: auto;
border-radius: 50%;
}
.hor-3 {
display: grid;
margin: 5% auto;
box-sizing: border-box;
border-radius: 40px;
width: 90%;
height: 100%;
min-height: fit-content;
background-color: rgb(241, 232, 201);
}
.back-img-3 {
background-repeat: no-repeat;
background-image: url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: normal;
}
.col-5 {
float: left;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border-radius: 40px;
color: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(23, 2, 27) 0%,
rgb(15, 0, 54) 30%,
rgb(27, 0, 180) 100%
);
overflow: hidden;
}
.col-6 {
float: left;
border-radius: 40px;
padding-top: 20%;
margin: 4% 0 4% 0;
width: 100%;
height: auto;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-7 {
float: right;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border-radius: 40px;
color: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(17, 0, 37) 0%,
rgb(20, 0, 71) 30%,
rgb(89, 1, 124) 100%
);
overflow: hidden;
}
.content-3 {
width: 100%;
height: auto;
}
.img-content-3 {
width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Big Shoulders Display", sans-serif;
}
p {
font-family: "Sofia Sans", sans-serif;
}
h1 {
font-weight: 500;
font-size: 1.8em;
line-height: 1.2;
text-align: left;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p {
padding-top: 0.5em;
font-weight: 400;
font-size: 1.2em;
line-height: 1.3;
text-align: justify;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p strong {
font-weight: 900;
}
p a {
font-weight: 700;
color: rgb(187, 255, 0);
text-decoration: none;
}
}
/* Règles CSS pour les petits écrans */
@media (max-width: 768px) {
.hor-1 {
display: grid;
margin: 5% auto;
box-sizing: border-box;
width: 90%;
height: 100%;
min-height: fit-content;
}
.back-img {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(0, 255, 255), rgb(127, 255, 212)),
url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: overlay;
}
.col-1 {
float: left;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border: 3px solid rgba(255, 255, 255, 0.5);
background-color: rgb(255, 21, 21);
overflow: hidden;
}
.col-1 .content p:nth-child(2):first-letter {
color: rgb(255, 255, 255);
float: left;
font-family: "Black Ops One", system-ui;
font-size: 8em;
line-height: 0.65em;
padding-top: 10px;
padding-right: 10px;
padding-left: 0px;
}
.col-2 {
float: right;
margin-top: 6%;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(83, 1, 65);
overflow: hidden;
}
.col-2 .content p:nth-child(2):first-letter {
color: rgb(0, 247, 255);
font-family: "Black Ops One", system-ui;
padding-right: 8px;
initial-letter: 4;
}
.content {
width: 100%;
height: auto;
}
.img-content {
margin: 5% 25% 10% 25%;
width: 50%;
height: auto;
border-radius: 20px 50% 50% 20px;
}
.hor-2 {
display: grid;
margin: 10% auto;
box-sizing: border-box;
width: 90%;
height: 100%;
min-height: fit-content;
border-radius: 0 0 40px 40px;
background-color: rgb(128, 0, 38);
}
.back-img-2 {
background-repeat: no-repeat;
background-image: linear-gradient(rgb(134, 186, 255), rgb(101, 232, 255)),
url("https://64.media.tumblr.com/adc3bfa5d20d74e5f68acfb19baa3bb2/cdc6ec5fe0a3049a-59/s1280x1920/af6b2d94a884950d126ffe320934f791338955db.jpg");
background-size: cover;
background-blend-mode: overlay;
}
.col-3 {
float: left;
padding: 0;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.col-4 {
float: right;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
overflow: hidden;
}
.content-2 {
width: 100%;
height: auto;
}
.img-content-2 {
margin: 20%;
width: 60%;
height: auto;
border-radius: 50%;
}
.hor-3 {
display: grid;
margin: 5% auto;
box-sizing: border-box;
border-radius: 40px;
width: 90%;
height: 100%;
min-height: fit-content;
background-color: rgb(241, 232, 201);
}
.back-img-3 {
background-repeat: no-repeat;
background-image: url("https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg");
background-size: cover;
background-blend-mode: normal;
}
.col-5 {
float: left;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border-radius: 40px;
color: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(23, 2, 27) 0%,
rgb(15, 0, 54) 30%,
rgb(27, 0, 180) 100%
);
overflow: hidden;
}
.col-6 {
float: left;
border-radius: 40px;
padding-top: 20%;
margin: 4% 0 4% 0;
width: 100%;
height: auto;
color: rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0);
overflow: hidden;
}
.col-7 {
margin-bottom: 5%;
float: right;
padding: 10% 8% 10% 8%;
width: 100%;
height: 100%;
border-radius: 40px;
color: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgb(17, 0, 37) 0%,
rgb(20, 0, 71) 30%,
rgb(89, 1, 124) 100%
);
overflow: hidden;
}
.content-3 {
width: 100%;
height: auto;
}
.img-content-3 {
width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Big Shoulders Display", sans-serif;
}
p {
font-family: "Sofia Sans", sans-serif;
}
h1 {
font-weight: 500;
font-size: 1.7em;
line-height: 1.2;
text-align: left;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p {
padding-top: 0.5em;
font-weight: 400;
font-size: 1.1em;
line-height: 1.3;
text-align: justify;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p strong {
font-weight: 900;
}
p a {
font-weight: 700;
color: rgb(187, 255, 0);
text-decoration: none;
}
}
</style>
Page updated
Google Sites
Report abuse