Embedded Files
block grid float
block grid float
Code à copier et à intégrer dans votre page ⬇️
<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="">
<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>
</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");
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Sofia Sans", sans-serif;
font-family: "Big Shoulders Display", sans-serif;
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: 90dvh;
min-height: max-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-2 {
float: right;
padding: 6%;
width: 49%;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(83, 1, 65);
overflow: hidden;
}
.content {
width: 100%;
height: auto;
text-align: justify;
}
.img-content {
margin: 0 25% 5% 25%;
width: 50%;
height: auto;
border-radius: 20px 50% 50% 20px;
}
.hor-2 {
display: block;
margin: 0 auto;
box-sizing: border-box;
width: 100%;
height: 60dvh;
border-radius: 0 0 40px 40px;
min-height: max-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: overlay;
}
.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;
}
.content-2 {
width: 100%;
height: auto;
text-align: justify;
}
.img-content-2 {
margin: 0 5% 5% 5%;
width: 90%;
height: auto;
border-radius: 50%;
}
.hor-3 {
display: block;
margin: 5% auto;
box-sizing: border-box;
border-radius: 40px;
width: 90%;
height: 90dvh;
min-height: max-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: 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%;
border-radius: 0 40px 40px 0;
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;
text-align: justify;
}
.img-content-3 {
width: 100%;
height: auto;
}
h1 h2 h3 h4 h5 h6 {
font-family: "Big Shoulders Display", sans-serif;
}
h1 {
font-weight: 500;
font-size: 3.2dvh;
line-height: 1.3;
letter-spacing: 0.02em;
word-spacing: normal;
word-wrap: break-word;
}
p {
font-family: "Sofia Sans", sans-serif;
font-weight: 400;
font-size: 1.6dvh;
line-height: 1.5;
letter-spacing: 0.03em;
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: 90dvh;
min-height: max-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-2 {
float: right;
padding: 6%;
width: 49%;
height: 100%;
color: rgb(255, 255, 255);
background-color: rgb(83, 1, 65);
overflow: hidden;
}
.content {
width: 100%;
height: auto;
text-align: justify;
}
.img-content {
margin: 0 25% 5% 25%;
/*float: none;*/
width: 50%;
height: auto;
border-radius: 20px 50% 50% 20px;
}
.hor-2 {
display: block;
margin: 5% auto;
box-sizing: border-box;
width: 90%;
height: 60dvh;
border-radius: 0 0 40px 40px;
min-height: max-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: overlay;
}
.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;
}
.content-2 {
width: 100%;
height: auto;
text-align: justify;
}
.img-content-2 {
margin: 0 5% 5% 5%;
width: 90%;
height: auto;
border-radius: 50%;
}
.hor-3 {
display: block;
margin: 5% auto;
box-sizing: border-box;
border-radius: 40px;
width: 90%;
height: 90dvh;
min-height: max-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: 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);
background-color: rgba(255, 255, 255, 0);
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;
}
.content-3 {
width: 100%;
height: auto;
text-align: justify;
}
.img-content-3 {
width: 100%;
height: auto;
}
h1 h2 h3 h4 h5 h6 {
font-family: "Big Shoulders Display", sans-serif;
}
h1 {
font-weight: 500;
font-size: 3.5dvh;
line-height: 1.2;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p {
font-family: "Sofia Sans", sans-serif;
font-weight: 400;
font-size: 1.9dvh;
line-height: 1.3;
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-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;
}
.content {
width: 100%;
height: auto;
}
.content p {
text-align: justify;
}
.content h1 {
text-align: left;
}
.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;
}
.content-2 p {
text-align: justify;
}
.content-2 h1 {
text-align: left;
}
.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-color: rgb(4, 11, 73);
background: linear-gradient(
0deg,
rgb(23, 2, 27) 0%,
rgb(15, 0, 54) 30%,
rgb(27, 0, 180) 100%
);
overflow: hidden;
}
.col-6 {
float: none;
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 {
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;
}
.content-3 p {
text-align: justify;
}
.content-3 h1 {
text-align: left;
}
.img-content-3 {
width: 100%;
height: auto;
}
h1 h2 h3 h4 h5 h6 {
font-family: "Big Shoulders Display", sans-serif;
}
h1 {
font-weight: 500;
font-size: 4dvh;
line-height: 1.1;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p {
font-family: "Sofia Sans", sans-serif;
font-weight: 400;
font-size: 1.8dvh;
line-height: 1.1;
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-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;
}
.content {
width: 100%;
height: auto;
}
.content p {
text-align: justify;
}
.content h1 {
text-align: left;
}
.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;
}
.content-2 p {
text-align: justify;
}
.content-2 h1 {
text-align: left;
}
.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: none;
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 {
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;
}
.content-3 p {
text-align: justify;
}
.content-3 h1 {
text-align: left;
}
.img-content-3 {
width: 100%;
height: auto;
}
h1 h2 h3 h4 h5 h6 {
font-family: "Big Shoulders Display", sans-serif;
}
h1 {
font-weight: 500;
font-size: 2.2em;
line-height: 1.1;
letter-spacing: 0.05em;
word-spacing: normal;
word-wrap: break-word;
}
p {
font-family: "Sofia Sans", sans-serif;
font-weight: 400;
font-size: 1.4em;
line-height: 1.3;
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-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;
}
.content {
width: 100%;
height: auto;
}
.content p {
text-align: justify;
}
.content h1 {
text-align: left;
}
.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;
}
.content-2 p {
text-align: justify;
}
.content-2 h1 {
text-align: left;
}
.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: none;
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;
}
.content-3 p {
text-align: justify;
}
.content-3 h1 {
text-align: left;
}
.img-content-3 {
width: 100%;
height: auto;
}
h1 h2 h3 h4 h5 h6 {
font-family: "Big Shoulders Display", sans-serif;
}
h1 {
font-weight: 500;
font-size: 2.2em;
line-height: 1.1;
letter-spacing: normal;
word-spacing: normal;
word-wrap: break-word;
}
p {
font-family: "Sofia Sans", sans-serif;
font-weight: 400;
font-size: 1.2em;
line-height: 1.5;
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>
slider 4 items
slider 4 items
Code à copier et à intégrer dans votre page ⬇️
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Slider 4 produits </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://unpkg.com/swiper/swiper-bundle.min.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="header">
<a class="menu-icon" href="#">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</a>
<svg version="1.0" class="logo" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 40" style="enable-background:new 0 0 400 40;" xml:space="preserve">
<g>
<g>
<path d="M49.4,11.7"/>
<path d="M17.1,19c-0.2-0.6,0.1-1.2,0.7-1.4v0c0.6-0.2,1.2,0.1,1.4,0.7l5.1,14.3c0.5,1.4,2.1,2.5,3.6,2.5c0,0,7.8,0,13,0
c3.4,0,6.5-3,6.9-6.6c0.6-5.5,1.1-11.1,1.7-16.6c0.4-3.7-2.5-6.6-6.4-6.6c-3.8,0-8.6,0-8.6,0c-1.5,0-2.2,1.1-1.7,2.5l4.9,13.1
c0.2,0.6-0.1,1.2-0.7,1.4h0c-0.6,0.2-1.2-0.1-1.4-0.7L30.3,7.6c-0.5-1.4-2.1-2.5-3.6-2.5c0,0-9.6,0-15.7,0c-3.9,0-6.8,3-6.4,6.6
c0.6,5.5,1.1,11.1,1.7,16.6C6.6,32,9.7,35,13.1,35c3.2,0,7.1,0,7.1,0c1.5,0,2.3-1.1,1.8-2.5L17.1,19z"/>
</g>
<path d="M122.8,15.2c-0.6-0.3-0.8-0.9-0.5-1.5c0.3-0.6,0.9-0.8,1.5-0.5l15.6,7.7c1.3,0.6,2.5,0,2.7-1.5c0,0,0.4-4.2,0.8-7.7
c0.4-3.7-2.5-6.6-6.4-6.6c-10.7,0-21.3,0-32,0c-3.9,0-6.8,3-6.4,6.6c0.1,1.4,0.2,1.6,0.2,1.6c0.1,1.5,1.3,3.2,2.6,3.8l16.5,8.3
c0.6,0.3,0.8,1,0.5,1.5v0c-0.3,0.6-1,0.8-1.5,0.5L101,19.8c-1.3-0.7-2.3,0-2.1,1.5c0,0,0.4,3.9,0.7,7.1c0.4,3.7,3.5,6.6,6.9,6.6
c9.3,0,18.5,0,27.8,0c3.4,0,6.5-3,6.9-6.6c0.1-1.3,0.1-1.3,0.1-1.3c0.1-1.4-0.8-3.1-2.1-3.8L122.8,15.2z"/>
<path d="M94.1,28.3c-0.5-5.5-1-11.1-1.6-16.6C92.2,8,89.2,5,85.8,5C77.5,5,69.3,5,61,5c-3.4,0-6.4,3-6.8,6.6
c-0.5,5.5-1,11.1-1.6,16.6c-0.4,3.7,2.6,6.6,6.5,6.6c9.5,0,19,0,28.5,0C91.6,34.9,94.5,32,94.1,28.3z M88.4,20
c-0.7,4.8-7.4,8.7-15,8.7c-7.5,0-14.3-3.9-15-8.7c-0.7-4.8,6-8.7,15-8.7C82.3,11.3,89.1,15.2,88.4,20z"/>
<path d="M284.6,28.3c-0.5-5.5-1-11.1-1.6-16.6C282.7,8,279.6,5,276.3,5c-8.2,0-16.5,0-24.7,0c-3.4,0-6.4,3-6.8,6.6
c-0.5,5.5-1,11.1-1.6,16.6c-0.4,3.7,2.6,6.6,6.5,6.6c9.5,0,19,0,28.5,0C282,34.9,285,32,284.6,28.3z M278.8,20
c-0.7,4.8-7.4,8.7-15,8.7c-7.5,0-14.3-3.9-15-8.7c-0.7-4.8,6-8.7,15-8.7C272.8,11.3,279.5,15.2,278.8,20z"/>
<path d="M395.5,28.3c-0.5-5.5-1-11.1-1.6-16.6C393.6,8,390.5,5,387.1,5c-8.2,0-16.5,0-24.7,0c-3.4,0-6.4,3-6.8,6.6
c-0.5,5.5-1,11.1-1.6,16.6c-0.4,3.7,2.6,6.6,6.5,6.6c9.5,0,19,0,28.5,0C392.9,34.9,395.8,32,395.5,28.3z M389.7,20
c-0.7,4.8-7.4,8.7-15,8.7c-7.5,0-14.3-3.9-15-8.7c-0.7-4.8,6-8.7,15-8.7C383.7,11.3,390.4,15.2,389.7,20z"/>
<path d="M188.6,30.2c0.9,1.2,2.2,1,2.8-0.3c0,0,0.1-0.2-0.1-1.7c-0.6-5.5-1.1-11.1-1.7-16.6C189.2,8,186.1,5,182.8,5
c-9.3,0-18.5,0-27.8,0c-3.4,0-6.5,3-6.9,6.6c-0.6,5.5-1.1,11.1-1.7,16.6c-0.2,1.7,0.1,2.1,0.1,2.1c0.7,1.3,2,1.4,2.9,0.2l10-12.7
c0.4-0.5,1.1-0.6,1.6-0.2v0c0.5,0.4,0.6,1.1,0.2,1.6l-10,12.7c-0.9,1.2-0.7,2.5,0.4,2.9c0,0,0,0,1.2,0c10.7,0,21.3,0,32,0
c1.4,0,1.4,0,1.4,0c1.3-0.6,1.6-2,0.7-3.1l-9.8-12.5c-0.4-0.5-0.3-1.2,0.2-1.6v0c0.5-0.4,1.2-0.3,1.6,0.2L188.6,30.2z"/>
<g>
<path d="M332.6,32.5c-0.5,1.4,0.3,2.5,1.8,2.5c0,0,3.6,0,6.7,0c3.4,0,6.6-3,7.1-6.6c0.8-5.5,1.6-11.1,2.3-16.6
c0.5-3.7-2.2-6.6-6.2-6.6c-6.5,0-16.8,0-16.8,0c-1.5,0-3.1,1.1-3.6,2.5l-2.4,6.3c-0.5,1.4-1.1,2.7-1.3,2.9
c-0.2,0.2-1.1,0.3-1.3,0.2c-0.3-0.1-1.1-1.7-1.6-3.1l-2.4-6.3c-0.5-1.4-2.1-2.5-3.6-2.5c0,0-10.3,0-16.8,0c-3.9,0-6.7,3-6.2,6.6
c0.8,5.5,1.6,11.1,2.3,16.6c0.5,3.7,3.7,6.6,7.1,6.6c3.1,0,6.7,0,6.7,0c1.5,0,2.3-1.1,1.8-2.5L301.4,19c-0.2-0.6,0.1-1.2,0.7-1.4
v0c0.6-0.2,1.2,0.1,1.4,0.7l5.1,14.3c0.5,1.4,2.1,2.5,3.6,2.5h14.4c1.5,0,3.1-1.1,3.6-2.5l5.1-14.3c0.2-0.6,0.9-0.9,1.4-0.7v0
c0.6,0.2,0.9,0.9,0.7,1.4L332.6,32.5z"/>
</g>
<path d="M233.6,5.1c-10.7,0-21.3,0-32,0c-3.9,0-6.8,3-6.4,6.6c0.6,5.5,1.1,11.1,1.7,16.6c0.4,3.7,3.5,6.6,6.9,6.6
c4.2,0,9.8,0,9.8,0c1.5,0,2.3-1.1,1.8-2.5l-2.8-7.7c-0.2-0.6,0.1-1.2,0.7-1.4v0c0.6-0.2,1.2,0.1,1.4,0.7l3,8.5
c0.5,1.4,2.1,2.5,3.6,2.5c0,0,6.6,0,12,0c3.4,0,3.6-2.2,2.6-5c-1-2.8-1.7-5.2-1.7-5.2c-0.2-0.6,0.1-1.3,0.7-1.4
c0.4-0.1,1.1-0.2,1.8-0.4c2.3-0.7,2.5-2.3,3-6.2c0.2-1.7,0.3-3.3,0.5-5C240.5,8.1,237.6,5.1,233.6,5.1z M229.9,15.2h-13.5
c-0.6,0-1.1-0.5-1.1-1.1c0-0.6,0.5-1.1,1.1-1.1h13.5c0.6,0,1.1,0.5,1.1,1.1C231,14.7,230.5,15.2,229.9,15.2z"/>
</g>
</svg>
<div class="header-menu">
<a href="#">casques</a>
<a href="#">bottes</a>
<a href="#">gants</a>
<a href="#">oxygène</a>
</div>
<div class="header-icons">
<svg class="search" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M437.02 330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521 243.251 404 198.548 404 148 404 66.393 337.607 0 256 0S108 66.393 108 148c0 50.548 25.479 95.251 64.262 121.962-36.21 12.495-69.398 33.136-97.281 61.018C26.629 379.333 0 443.62 0 512h40c0-119.103 96.897-216 216-216s216 96.897 216 216h40c0-68.38-26.629-132.667-74.98-181.02zM256 256c-59.551 0-108-48.448-108-108S196.449 40 256 40s108 48.448 108 108-48.449 108-108 108z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208.955 208.955">
<path d="M190.85 200.227L178.135 58.626a7.5 7.5 0 00-7.47-6.829h-26.221V39.971c0-22.04-17.93-39.971-39.969-39.971-22.038 0-39.966 17.931-39.966 39.971v11.826H38.27a7.5 7.5 0 00-7.47 6.829L18.035 200.784a7.5 7.5 0 007.47 8.17h157.946a7.5 7.5 0 007.399-8.727zM79.509 39.971c0-13.769 11.2-24.971 24.967-24.971 13.768 0 24.969 11.202 24.969 24.971v11.826H79.509V39.971zm-45.8 153.984L45.127 66.797h19.382v13.412a7.5 7.5 0 007.5 7.5 7.5 7.5 0 007.5-7.5V66.797h49.936v13.412a7.5 7.5 0 007.5 7.5 7.5 7.5 0 007.5-7.5V66.797h19.364l11.418 127.158H33.709z" />
</svg>
</div>
</div>
<div class="mySwiper">
<div class="main-wrapper swiper-wrapper">
<div class="main swiper-slide" id="beach">
<div class="left-side">
<div class="main-wrapper">
<h3 class="main-header">Combinaison spatiale</h3>
<h1 class="main-title">Gravity</h1>
<h2 class="main-subtitle">€ 33 000</h2>
</div>
<div class="main-content">
<div class="main-content__title">La combinaison idéale pour vos sorties aux limites de l'exosphère</div>
<div class="main-content__subtitle">Notre modèle Gravity, discrètement équipé de turbo-jets aux pieds vous permettra de "Chiller" en toute sécurité en survolant l’Himalaya.</div>
<div class="more-menu">
Commandez
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="-5" y1="12" x2="19" y2="12" />
<line x1="15" y1="16" x2="19" y2="12" />
<line x1="15" y1="8" x2="19" y2="12" />
</svg>
</div>
</div>
</div>
<div class="center">
<div class="right-side__img">
<img class="bottle-bg" src="https://64.media.tumblr.com/0b5c0356d9b0b8c155ce5a73df6e6199/ce5bf12b1595594b-87/s1280x1920/ecd56eb2612f3966ae8d73f781a30b6b52966b47.jpg" alt="">
<img class="bottle-img" src="https://64.media.tumblr.com/d5abd22da8b71b2e974ca6a3cc2cd1bb/ce5bf12b1595594b-7b/s1280x1920/76280be9903fbf17bf9f7b21d1466d78c6dde6d8.pnj" />
</div>
</div>
</div>
<div class="main swiper-slide" id="savanna">
<div class="left-side">
<div class="main-wrapper">
<h3 class="main-header">Combinaison lunaire</h3>
<h1 class="main-title">Lunatic</h1>
<h2 class="main-subtitle">€ 36 000</h2>
</div>
<div class="main-content">
<div class="main-content__title">Équipez vous pour vos balades au claire de terre.
</div>
<div class="main-content__subtitle">Avec Lunatic vous êtes paré pour un pique-nique au bord de la mer de la tranquillité, souple vous pourrez danser en apesanteur sous la coupole transparente du Macumba.</div>
<div class="more-menu">
Commandez
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="-5" y1="12" x2="19" y2="12" />
<line x1="15" y1="16" x2="19" y2="12" />
<line x1="15" y1="8" x2="19" y2="12" />
</svg>
</div>
</div>
</div>
<div class="center">
<div class="right-side__img">
<img class="bottle-bg" src="https://64.media.tumblr.com/774b2f2b8d29d9baf4e568267bcbb4d4/ce5bf12b1595594b-bc/s1280x1920/dc172b69dccc892dd3b3785731e9a6027da94fb3.jpg" alt="">
<img class="bottle-img" src="https://64.media.tumblr.com/1d48cadbabc35179f3e6c6d87c44e529/ce5bf12b1595594b-c4/s1280x1920/057f0b936fa0cd7d352de6950241e481c7c4a731.png" />
</div>
</div>
</div>
<div class="main swiper-slide" id="glacier">
<div class="left-side">
<div class="main-wrapper">
<h3 class="main-header">Combinaison martienne</h3>
<h1 class="main-title">Marsiel</h1>
<h2 class="main-subtitle">€ 40 000</h2>
</div>
<div class="main-content">
<div class="main-content__title">La tenue idéale pour vos randonnées martiennes ou sur un astéroïde.
</div>
<div class="main-content__subtitle">Marsiel, combinaison mixte et sportive adaptée aux activités en exterieur, efficacité garanties contre les radiations et les coups de soleil.</div>
<div class="more-menu">
Commandez
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="-5" y1="12" x2="19" y2="12" />
<line x1="15" y1="16" x2="19" y2="12" />
<line x1="15" y1="8" x2="19" y2="12" />
</svg>
</div>
</div>
</div>
<div class="center">
<div class="right-side__img">
<img class="bottle-bg" src="https://64.media.tumblr.com/edbb860941b912b09c4e85215a051bbb/ce5bf12b1595594b-eb/s1280x1920/7df708fa8c0118376807310db10efad341abb8dc.jpg" alt="">
<img class="bottle-img" src="https://64.media.tumblr.com/e0c15c771b496c85cc54f82ab45091dd/ce5bf12b1595594b-70/s1280x1920/91b353d04531bb18f11eb46593953e4b21bd5758.png" />
</div>
</div>
</div>
<div class="main swiper-slide" id="coral">
<div class="left-side">
<div class="main-wrapper">
<h3 class="main-header">Combinaison éternelle</h3>
<h1 class="main-title">Infinity</h1>
<h2 class="main-subtitle">€ 50 000</h2>
</div>
<div class="main-content">
<div class="main-content__title">Pour un infini et au-delà confortable et des explorations sans soucis.
</div>
<div class="main-content__subtitle">Infinity vous accompagnera au bout de vos aventures spatiales et aux confins de l'univers connu. Extension de garantie jusqu'à 2 cryogénisations.</div>
<div class="more-menu">
Commandez
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="-5" y1="12" x2="19" y2="12" />
<line x1="15" y1="16" x2="19" y2="12" />
<line x1="15" y1="8" x2="19" y2="12" />
</svg>
</div>
</div>
</div>
<div class="center">
<div class="right-side__img">
<img class="bottle-bg" src="https://64.media.tumblr.com/ff08e1a115d4ff4cd4f539f42ce33ee9/ce5bf12b1595594b-a2/s1280x1920/4b50089c853eb4cfb7f040e83c064d199bd1a42d.jpg" alt="">
<img class="bottle-img" src="https://64.media.tumblr.com/f4ef8d66d3b203827088f1dc3cca6826/ce5bf12b1595594b-ba/s1280x1920/8eee49ef6958406ca2daad5a6ec7fd3f99588309.png" />
</div>
</div>
</div>
</div>
</div>
<div class="button-wrapper">
<div class="swiper-button swiper-prev-button">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</div>
<div class="swiper-button swiper-next-button">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- partial -->
<script src='https://unpkg.com/swiper/swiper-bundle.min.js'></script><script src="./script.js"></script>
</body>
</html>
<style>
@import url("https://fonts.googleapis.com/css2?family=MuseoModerno: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");
@import url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
:root {
--body-color: #99ffff;
--terre-bg: rgba( 8, 0, 119, 0);
--header-terre-bgi: linear-gradient(to bottom, rgba( 8, 0, 119, 1), rgba( 8, 0, 119, 0));
--lune-bg: rgba(26, 46, 63, 0);
--header-lune-bgi: linear-gradient(to bottom, rgba(26, 46, 63, 1), rgba(26, 46, 63, 0));
--lune-bgi: linear-gradient(to top, rgba(14, 16, 17, 1), rgba( 4, 0, 30, 1), rgba(26, 46, 63, 1) 85%);
--mars-bg: rgba(48, 30, 124, 0);
--header-mars-bgi: linear-gradient(to bottom, rgba(48, 30, 124, 1), rgba(48, 30, 124, 0));
--mars-bgi: linear-gradient(to top, rgba(38, 6, 15, 1), rgba(245, 148, 75, 1), rgba(48, 30, 124, 1) 85%);
--infini-bg: rgba(250, 5, 1, 0);
--header-infini-bgi: linear-gradient(to bottom, rgba(250, 5, 1, 1), rgba(250, 5, 1, 0));
--infini-bgi: linear-gradient(to top, rgba(22, 23, 44, 1), rgba(6, 114, 154, 1), rgba(250, 5, 1, 1) 85%);
--arrow-fill: #333231;
--body-font: "Rethink Sans", sans-serif;
--italic-font: "MuseoModerno", sans-serif;
}
* {
box-sizing: border-box;
outline: none;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
color: var(--body-color);
}
h1,
h2,
h3 {
margin: 0;
}
body {
font-family: var(--body-font);
background-color: #1d1e20;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 2em;
width: 100%;
height: 100vh;
color: var(--body-color);
}
@media (max-width: 480px) {
body {
padding: 0;
}
}
.container {
max-width: 1100px;
border-radius: 4px;
max-height: 700px;
height: 90vh;
width: 100%;
display: flex;
flex-direction: column;
scroll-behavior: smooth;
background-image: linear-gradient(to bottom, #080077, #201f52, #01010f 85%);
background-color: #001d66;
padding: 0 30px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
@media (max-width: 480px) {
.container {
height: 100%;
max-height: 100%;
}
}
.logo {
width: 260px;
fill: #99ff00;
}
.header {
display: flex;
align-items: center;
height: 82px;
width: 100%;
white-space: nowrap;
flex-shrink: 0;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
border-bottom: 1px solid rgba(153, 255, 255, 0.25);
position: sticky;
top: 0;
left: 0;
background-image: var(--header-terre-bgi);
background-color: var(--terre-bg);
z-index: 6;
}
@media (max-width: 575px) {
.header {
width: calc(100% + 20px);
margin-left: -10px;
}
}
.header-menu {
display: flex;
align-items: center;
margin-left: auto;
}
@media screen and (max-width: 740px) {
.header-menu {
display: none;
}
}
.header-menu a:not(:first-child) {
margin-left: 30px;
}
.header .menu-icon {
display: flex;
align-items: center;
margin-right: 20px;
}
.header .menu-icon svg {
width: 22px;
fill: none;
}
.header-icons {
margin-left: auto;
display: flex;
align-items: center;
}
.header-icons .search {
fill: none;
}
.header-icons svg {
width: 18px;
fill: var(--body-color);
}
.header-icons svg:not(:last-child) {
margin-right: 20px;
}
.left-side {
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 320px;
}
@media screen and (max-width: 930px) {
.left-side {
text-align: center;
max-width: 450px;
}
}
.mySwiper {
display: flex;
flex-grow: 1;
position: relative;
}
.main {
padding: 42px 0 30px;
display: flex;
flex-grow: 1;
position: relative;
}
@media screen and (max-width: 930px) {
.main {
flex-direction: column-reverse;
align-items: center;
justify-content: center;
}
}
.main-header {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 4px;
font-weight: 400;
transition-delay: 0.2s;
}
.main-title {
font-family: var(--italic-font);
font-size: 80px;
font-weight: 800;
margin-top: 10px;
line-height: 1em;
transition-delay: 0.3s;
}
.main-subtitle {
font-family: var(--italic-font);
font-weight: 400;
font-size: 32px;
margin-top: 14px;
line-height: 1.6;
margin-bottom: 60px;
transition-delay: 0.4s;
}
.main-content__title {
font-size: 26px;
font-family: var(--italic-font);
font-style: italic;
margin-bottom: 14px;
transition-delay: 0.2s;
}
.main-content__subtitle {
font-size: 16px;
line-height: 1.6;
margin-top: 12px;
margin-bottom: 36px;
letter-spacing: 0.01em;
transition-delay: 0.3s;
}
.main-content .more-menu {
font-size: 13px;
font-weight: 500;
color: #66ff00;
display: flex;
align-items: center;
transition-delay: 0.4s;
}
@media screen and (max-width: 930px) {
.main-content .more-menu {
justify-content: center;
}
}
.main-content .more-menu svg {
width: 28px;
height: 18px;
margin-left: 10px;
}
.center {
display: flex;
margin-left: 120px;
position: relative;
flex-shrink: 0;
}
@media screen and (max-width: 930px) {
.center {
margin-left: 0;
margin-bottom: 56px;
}
}
.center .bottle-bg {
width: 320px;
height: 450px;
object-fit: cover;
border-radius: 80px 80px 160px 160px;
}
@media screen and (max-width: 930px) {
.center .bottle-bg {
width: 260px;
height: 390px;
}
}
@media screen and (max-width: 575px) {
.center .bottle-bg {
width: 220px;
height: 340px;
}
}
.center .bottle-img {
position: absolute;
top: 25%;
left: 0;
transform: scale(1.6);
}
.swiper-pagination {
position: absolute;
right: 30px;
left: auto;
top: 100px;
width: auto;
bottom: auto;
z-index: 2;
font-size: 14px;
font-family: var(--body-font);
font-weight: 400;
}
.button-wrapper {
position: absolute;
right: 30px;
bottom: 20px;
z-index: 1;
display: flex;
align-items: center;
}
@media screen and (max-width: 930px) {
.button-wrapper {
top: 0;
left: 0;
width: 100%;
justify-content: space-between;
padding: 0 60px;
}
}
@media screen and (max-width: 575px) {
.button-wrapper {
padding: 0 20px;
}
}
.button-wrapper svg {
width: 28px;
}
.button-wrapper .swiper-button {
border: 1px solid var(--body-color);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, var(--body-color) 40%, transparent 0%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 0.3s ease-out;
cursor: pointer;
}
.button-wrapper .swiper-button + .swiper-button {
margin-left: 16px;
}
@media screen and (max-width: 930px) {
.button-wrapper .swiper-button + .swiper-button {
margin-left: 0;
}
}
.button-wrapper .swiper-button:hover {
background-color: var(--body-color);
background-position: left bottom;
}
.button-wrapper .swiper-button:hover svg {
stroke: #fff;
}
.button-wrapper .swiper-prev-button {
background: linear-gradient(to left, var(--body-color) 40%, transparent 0%);
background-size: 200% 100%;
background-position: left bottom;
transition: all 0.3s ease-out;
}
.button-wrapper .swiper-prev-button svg {
transform: rotate(-180deg);
}
.button-wrapper .swiper-prev-button:hover {
background-position: right bottom;
}
.swiper-slide {
opacity: 0 !important;
transition: 0.4s;
}
.swiper-slide-active {
opacity: 1 !important;
}
.swiper-slide .main-wrapper > *,
.swiper-slide .main-content > * {
transform: translateY(-30px);
opacity: 0;
transition-duration: 0.8s;
}
.swiper-slide-active .main-wrapper > *,
.swiper-slide-active .main-content > * {
transform: none;
opacity: 1;
}
.swiper-slide .bottle-bg {
transition-duration: 0.6s;
opacity: 0;
object-position: 60%;
}
.swiper-slide-active .bottle-bg {
opacity: 1;
transform: none;
object-position: 50%;
}
.swiper-slide .bottle-img {
transition-duration: 0.8s;
transform: scale(1.2);
opacity: 0;
}
.swiper-slide-active .bottle-img {
opacity: 1;
transform: scale(1.6);
}
[data-sld="1"] .header {
background-color: var(--lune-bg);
background-image: var(--header-lune-bgi);
}
[data-sld="1"] .container {
background-image: var(--lune-bgi);
}
[data-sld="2"] .header {
background-color: var(--mars-bg);
background-image: var(--header-mars-bgi);
}
[data-sld="2"] .container {
background-image: var(--mars-bgi);
}
[data-sld="3"] .header {
background-color: var(--infini-bg);
background-image: var(--header-infini-bgi);
}
[data-sld="3"] .container {
background-image: var(--infini-bgi);
}
</style>
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-next-button",
prevEl: ".swiper-prev-button" },
effect: "fade",
loop: "infinite",
pagination: {
el: ".swiper-pagination",
type: "fraction" } });
swiper.on('slideChange', function (sld) {
document.body.setAttribute('data-sld', sld.realIndex);
});
</script>
Page updated
Google Sites
Report abuse