CSSSSS
This commit is contained in:
thaaoblues
parent
fb84d1f690
commit
667e4f416d
11 changed files with 195 additions and 75 deletions
|
|
@ -87,3 +87,11 @@
|
|||
left:0%;
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
.ad-vieux{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ad-moderne{
|
||||
display: none;
|
||||
}
|
||||
11
css/t2.css
11
css/t2.css
|
|
@ -50,10 +50,9 @@ td, th {
|
|||
border: 8px solid #fc04fc;
|
||||
}
|
||||
|
||||
div.ad{
|
||||
visibility: visible;
|
||||
display: block !important;
|
||||
|
||||
.ad-vieux{
|
||||
display: block !important;
|
||||
width: 150px;
|
||||
padding: 12px;
|
||||
margin-top: 10px;
|
||||
|
|
@ -61,9 +60,9 @@ div.ad{
|
|||
border: 1px solid #87bc44;
|
||||
background: #e0ff92;
|
||||
line-height: 1.2;
|
||||
}
|
||||
div.ad.adt3{
|
||||
visibility: hidden;
|
||||
}
|
||||
.ad-vieux .adt3{
|
||||
display: none !important;
|
||||
}
|
||||
table.table-magasin{
|
||||
width: 150px;
|
||||
|
|
|
|||
10
css/t3.css
10
css/t3.css
|
|
@ -56,8 +56,7 @@ td {
|
|||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
div.ad{
|
||||
visibility: visible;
|
||||
.ad-vieux{
|
||||
display: block !important;
|
||||
float: right;
|
||||
width: 162px;
|
||||
|
|
@ -67,9 +66,10 @@ div.ad{
|
|||
border: 1px solid #87bc44;
|
||||
background: #e0ff92;
|
||||
line-height: 1.2;
|
||||
}
|
||||
div.ad.adt3{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ad-vieux .adt3{
|
||||
display: block;
|
||||
}
|
||||
|
||||
table.table-magasin{
|
||||
|
|
|
|||
32
css/t7.css
32
css/t7.css
|
|
@ -27,11 +27,6 @@ main {
|
|||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 25px;
|
||||
font-size: 16px;
|
||||
|
|
@ -104,27 +99,20 @@ table tr:nth-child(even) {
|
|||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 10px ; border-radius: 5px;
|
||||
|
||||
background-color: #2c3e50;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
bottom: 0px !important;
|
||||
position: fixed !important;
|
||||
width: 100%;
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
footer p{
|
||||
margin-bottom: 0px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
|
||||
div.card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
transition: transform 0.2s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
div.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
div.score-button{
|
||||
|
|
|
|||
88
css/t8.css
88
css/t8.css
|
|
@ -3,9 +3,10 @@ body {
|
|||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #f4f4f9;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
line-height: 1.6;
|
||||
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -15,6 +16,7 @@ main {
|
|||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
min-height: 85vh;
|
||||
}
|
||||
|
||||
output{
|
||||
|
|
@ -72,12 +74,7 @@ th {
|
|||
table tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
/* table.table_magasin{
|
||||
width: 150px;
|
||||
padding: 12px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
} */
|
||||
|
||||
|
||||
a{
|
||||
color: #fda500;
|
||||
|
|
@ -89,24 +86,71 @@ a:visited{
|
|||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 10px ; border-radius: 5px;
|
||||
|
||||
background-color: #e74c3c;
|
||||
align-items: center;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
bottom: 0px !important;
|
||||
position: fixed !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer p{
|
||||
font-size: 14px;
|
||||
background-color: #e74c3c;
|
||||
width: 76%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1vh;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
div.card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
transition: transform 0.2s ease, box-shadow 0.3s ease;
|
||||
|
||||
|
||||
.ad-moderne-left {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 10vw;
|
||||
height: fit-content;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
div.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
.ad-moderne-right {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 10vw;
|
||||
height: fit-content;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ad-container {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ad-moderne img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.ad-moderne{
|
||||
display: block !important;
|
||||
}
|
||||
83
css/t9.css
83
css/t9.css
|
|
@ -19,6 +19,7 @@ main {
|
|||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
min-height: 50vw;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -83,8 +84,6 @@ th {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a{
|
||||
color: #fda500;
|
||||
}
|
||||
|
|
@ -116,24 +115,76 @@ div.score-button:hover {
|
|||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 10px ; border-radius: 5px;
|
||||
|
||||
background-color: #fda500;
|
||||
color: white;
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
bottom: 0px !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
footer p{
|
||||
font-size: 14px;
|
||||
background-color: #fda500;
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
div.card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
transition: transform 0.2s ease, box-shadow 0.3s ease;
|
||||
|
||||
|
||||
/* Left Ads */
|
||||
.ad-moderne-left {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 10vw;
|
||||
height: fit-content;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
div.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
/* Right Ads */
|
||||
.ad-moderne-right {
|
||||
margin-top: 20vw;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 10vw;
|
||||
height: fit-content;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Ad Content */
|
||||
.ad-container {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ad-moderne img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.ad-moderne{
|
||||
display: block !important;
|
||||
}
|
||||
BIN
img/shrek.webp
Normal file
BIN
img/shrek.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
img/shrek2.jpg
Normal file
BIN
img/shrek2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
img/shrek3.webp
Normal file
BIN
img/shrek3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
img/shrek4.jpg
Normal file
BIN
img/shrek4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
38
index.html
38
index.html
|
|
@ -83,10 +83,39 @@
|
|||
</section>
|
||||
|
||||
<!-- Section Publicités -->
|
||||
<section id="ad-section" class="ad" style="display: none;">
|
||||
<img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
|
||||
<div></div>
|
||||
<img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
|
||||
<section id="ad-section">
|
||||
|
||||
<!--Pubs années 2000-->
|
||||
|
||||
<section id="ad-vieux" class="ad-vieux">
|
||||
<img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
|
||||
<img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
|
||||
</section>
|
||||
|
||||
<!-- Pubs modernes Gauche -->
|
||||
<div class="ad-moderne-left">
|
||||
<section id="ad-section-left" class="ad-moderne">
|
||||
<div class="ad-container">
|
||||
<img src="./img/shrek3.webp" alt="Pub Shrek 3">
|
||||
</div>
|
||||
<div class="ad-container">
|
||||
<img src="./img/shrek4.jpg" alt="Pub Shrek 4">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Pubs modernes Droite -->
|
||||
<div class="ad-moderne-right">
|
||||
<section id="ad-section-right" class="ad-moderne">
|
||||
<div class="ad-container">
|
||||
<img src="./img/shrek.webp" alt="Pub Shrek 1">
|
||||
</div>
|
||||
<div class="ad-container">
|
||||
<img src="./img/shrek2.jpg" alt="Pub Shrek 2">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section Cadeau -->
|
||||
|
|
@ -94,6 +123,7 @@
|
|||
<div id="div_cadeau">
|
||||
<img id="img_cadeau" src="img/cadeau.png" alt="Image de cadeau">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue