izanic/SAE_WEB_S1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

texte et image

Browse Source
This commit is contained in:
Hugo IZANIC 2024-01-01 19:32:41 +01:00
parent 1bd98a53b6
commit 1208ecf77a
2 changed files with 63 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
CSS/styles.css
View File

@ -1,16 +1,19 @@
* {
font-family: cursive;
}
body{ body{
margin: 0; margin: 0;
background: linear-gradient(90deg,rgba(63,94,251,0.7) 0%,rgba(252,70,107,0.7) 100%);
} }
header{
margin-bottom: 10vh;
}
nav{ nav{
top: 0; top: 0;
left: 0; left: 0;
z-index: 1;
position: fixed; position: fixed;
display: flex; display: flex;
align-items: center; align-items: center;
@ -61,11 +64,50 @@ li{
} }
p{ p{
font-family: unset;
font-size: 30px; font-size: 30px;
margin: 10px;
} }
.img_gauche_txt_droite{
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.img_gauche_txt_droite p{
background-color: rgba(100,100,100,0.2);
border-radius: 10px;
width: 50%;
}
.img_gauche_txt_droite img{border-radius: 10px;}
.img_gauche_txt_droite img:not(:hover){filter: saturate(0.2);}
.img_droite_txt_gauche{
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
align-items: flex-end;
}
.img_droite_txt_gauche p{
background-color: rgba(100,100,100,0.2);
border-radius: 10px;
width: 50%;
}
.img_droite_txt_gauche img{border-radius: 10px;}
.img_droite_txt_gauche img:not(:hover) {filter: saturate(0.2);}
#pied_de_page{ #pied_de_page{
font-size: 15px; font-size: 15px;

30
index.html
View File

@ -31,26 +31,28 @@
</header> </header>
<main> <main>
<img id="cas" src="img/casion_background.jpeg">
<a href=""><img id="btn_up" src="img/arrow-up.svg"></a> <a href=""><img id="btn_up" src="img/arrow-up.svg"></a>
<p> <div class="img_gauche_txt_droite">
freestar <img id="cas" src="img/casion_background.jpeg">
freestar
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt, nisl vel venenatis lacinia, lorem sem fringilla odio, ut blandit erat mauris id elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent nec velit eget odio mattis posuere in vitae sem. Nam vel interdum metus. Maecenas fringilla metus nunc, eget sodales lacus ornare non. Ut a metus ut erat feugiat tempor. Vestibulum a pellentesque risus. Ut ut ante nisl. Suspendisse vitae est posuere, tincidunt justo sed, ornare odio.
Sed dignissim aliquam erat, vitae varius odio sodales vitae. Curabitur ut leo placerat, interdum dui non, egestas diam. In sagittis nisi orci, sit amet venenatis risus posuere sed. Duis hendrerit magna quis finibus pretium. Mauris dolor nulla, molestie quis velit sit amet, ultricies dignissim lectus. Nam felis urna, dapibus vel magna id, euismod mattis dui. Duis vitae cursus dolor, ut rutrum enim. Cras porttitor eu magna eget molestie. Sed vitae volutpat ex, in consequat arcu. <p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
Donec rutrum, ligula sit amet condimentum tristique, lorem lorem mattis lacus, ac venenatis enim augue ut sapien. Donec pretium sagittis nunc pharetra lacinia. Donec vel suscipit nisl, ut tincidunt enim. Sed mattis bibendum bibendum. Donec faucibus consequat nisi, eget vehicula lectus ullamcorper id. Suspendisse nec scelerisque tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer pharetra, lacus at congue interdum, sem turpis efficitur eros, ut dictum justo nibh congue magna. Phasellus non felis eget erat dictum imperdiet. Aenean posuere hendrerit varius. </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt, nisl vel venenatis lacinia, lorem sem fringilla odio, ut blandit erat mauris id elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent nec velit eget odio mattis posuere in vitae sem. Nam vel interdum metus. Maecenas fringilla metus nunc, eget sodales lacus ornare non. Ut a metus ut erat feugiat tempor. Vestibulum a pellentesque risus. Ut ut ante nisl. Suspendisse vitae est posuere, tincidunt justo sed, ornare odio. <div class="img_droite_txt_gauche">
<img id="cas" src="img/casion_background.jpeg">
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Sed dignissim aliquam erat, vitae varius odio sodales vitae. Curabitur ut leo placerat, interdum dui non, egestas diam. In sagittis nisi orci, sit amet venenatis risus posuere sed. Duis hendrerit magna quis finibus pretium. Mauris dolor nulla, molestie quis velit sit amet, ultricies dignissim lectus. Nam felis urna, dapibus vel magna id, euismod mattis dui. Duis vitae cursus dolor, ut rutrum enim. Cras porttitor eu magna eget molestie. Sed vitae volutpat ex, in consequat arcu. </p>
</div>
Donec rutrum, ligula sit amet condimentum tristique, lorem lorem mattis lacus, ac venenatis enim augue ut sapien. Donec pretium sagittis nunc pharetra lacinia. Donec vel suscipit nisl, ut tincidunt enim. Sed mattis bibendum bibendum. Donec faucibus consequat nisi, eget vehicula lectus ullamcorper id. Suspendisse nec scelerisque tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer pharetra, lacus at congue interdum, sem turpis efficitur eros, ut dictum justo nibh congue magna. Phasellus non felis eget erat dictum </p>
<!--
Contenu principal
-->
</main> </main>