Kevin/website
1
0
Fork 0
mirror of https://github.com/LJ5O/website.git synced 2026-08-11 22:54:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added feature divs

Browse Source 
Used to present some facts and info
This commit is contained in:
LJ5O
2025-03-10 14:06:56 +01:00
parent 6fb42278cf
commit 17ec9b93f5
2 changed files with 80 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@@ -63,5 +63,43 @@
<div id="presentation_img"><img src="https://picsum.photos/500/250"></div> <div id="presentation_img"><img src="https://picsum.photos/500/250"></div>
</div> <!-- Presentation div --> </div> <!-- Presentation div -->
<div class="feature_div">
<div class="feature_img_div">
<img src="https://picsum.photos/600/400">
</div>
<div class="feature_text_div">
<h2>Titre de la catégorie.</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,
efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt,
suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor.
Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam.
Aenean faucibus neque id nibh facilisis auctor. </p>
</article>
<button class="feature_button">Oui ! Je veux en savoir plus !</button>
</div>
</div>
<div class="feature_div">
<div class="feature_text_div">
<h2>Titre de la catégorie.</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin felis
lectus, feugiat in eros sit amet, venenatis euismod urna. Aliquam id
porttitor erat, vitae dapibus velit. Praesent id felis tincidunt,
efficitur tortor eget, volutpat orci. Vestibulum ac lectus tincidunt,
suscipit justo at, fringilla nisl. Aliquam tincidunt congue faucibus. Duis in nisi tortor.
Nulla sit amet turpis nec turpis rhoncus venenatis. Sed nec malesuada quam.
Aenean faucibus neque id nibh facilisis auctor. </p>
</article>
<button class="feature_button">Oui ! Je veux en savoir plus !</button>
</div>
<div class="feature_img_div">
<img src="https://picsum.photos/600/400">
</div>
</div>
</body> </body>
</html> </html>

42
style.css
View File

@@ -145,4 +145,46 @@ h1,h2,h3,h4,h5,p{
#presentation_img{ #presentation_img{
margin-left: auto; margin-left: auto;
margin-top: 20px; margin-top: 20px;
}
.feature_div{
border: 4px dotted red;
width: 75%;
margin: auto;
margin-top: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 6%;
}
.feature_img_div{
width: 40%;
flex: 1;
min-width: 300px;
}
.feature_img_div img{
height: 100%;
width: 100%;
}
.feature_text_div{
width: 40%;
flex: 1;
min-width: 300px;
}
.feature_text_div h2{
margin-bottom: 5px;
}
.feature_text_div article p{
margin-top: 20px;
}
.feature_button{
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 5px;
background-color: aqua;
border: none;
border-radius: 6px;
font-size: 1.3em;
} }