dossantoad/InsulineSodarameme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mise a jour

Browse Source
This commit is contained in:
dos santos 2023-01-04 18:10:14 +01:00
parent fd94ec9453
commit eea1d4c7f9
8 changed files with 370 additions and 497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/cat_all.css
View File

@ -1,22 +0,0 @@
.Liste{
width:100%;
height:100vh;
overflow: scroll;
}
.Product{
float:left;
margin : 5%;
width: 80%;
}
.Product p, .Product h3{
margin-top: -5px;
}
.meme{
width: inherit;
height: inherit;
max-height: inherit;
}

92
css/categories.css Normal file → Executable file
View File

@ -1,47 +1,47 @@
main{ main{
margin-top: 10%; margin-top: 10%;
} }
article{ article{
margin-top: auto; margin-top: auto;
border: solid; border: solid;
border-width: 1%; border-width: 1%;
border-radius: 5%; border-radius: 5%;
background-color: pink; background-color: pink;
} }
article h2{ article h2{
text-align: center; text-align: center;
} }
.caramels{ .caramels{
float:left; float:left;
width:40%; width:40%;
margin:2%; margin:2%;
} }
.sirops{ .sirops{
float:left; float:left;
width:40%; width:40%;
margin:2%; margin:2%;
} }
.pubimg{ .pubimg{
float:left; float:left;
width:40%; width:40%;
margin:2%; margin:2%;
} }
.PD{ .PD{
float:left; float:left;
width:40%; width:40%;
margin:2%; margin:2%;
} }
.Product{ .Product{
float:left; float:left;
margin : 3%; margin : 3%;
} }
.Product p, .Product h3{ .Product p, .Product h3{
margin-top: -5px; margin-top: -5px;
width:150px; width:150px;
} }

0
css/header.css Normal file → Executable file
View File

162
css/index.css Normal file → Executable file
View File

@ -1,81 +1,81 @@
.text-intro{ .text-intro{
width:80%; width:80%;
margin:auto; margin:auto;
border: solid; border: solid;
border-width: 5px; border-width: 5px;
background-color: darkorange; background-color: darkorange;
} }
.content{ .content{
display:grid; display:grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
margin-left: 8%; margin-left: 8%;
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
.content{ .content{
margin-left: 8%; margin-left: 8%;
} }
} }
article{ article{
border: solid; border: solid;
border-width: 1%; border-width: 1%;
border-radius: 45px; border-radius: 45px;
background-color: rosybrown; background-color: rosybrown;
} }
article h2{ article h2{
text-align: center; text-align: center;
} }
.NewsLetter{ .NewsLetter{
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 1; grid-column-end: 1;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
width:35%; width:35%;
margin:2%; margin:2%;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.NewsLetter{ .NewsLetter{
margin-left:-8%; margin-left:-8%;
width:45%; width:45%;
} }
} }
.Vedette{ .Vedette{
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 2; grid-column-end: 2;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
width:58%; width:58%;
margin:2%; margin:2%;
margin-left: 40%; margin-left: 40%;
} }
.Product{ .Product{
float:left; float:left;
margin : 1.5%; margin : 1.5%;
} }
.Product p, .Product h3{ .Product p, .Product h3{
margin-top: -5px; margin-top: -5px;
width:150px; width:150px;
} }
.Product .desc{ .Product .desc{
font-size: 10px; font-size: 10px;
} }
.Pack{ .Pack{
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 2; grid-column-end: 2;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 2; grid-row-end: 2;
width:96%; width:96%;
margin:2%; margin:2%;
} }
.Pack .Product{ .Pack .Product{
float:left; float:left;
} }

214
css/panier.css Normal file → Executable file
View File

@ -1,108 +1,108 @@
main{ main{
display: grid; display: grid;
grid-template-columns: 1fr, 1fr; grid-template-columns: 1fr, 1fr;
} }
.Liste{ .Liste{
grid-column-start: 1; grid-column-start: 1;
grid-row-start:1; grid-row-start:1;
background-color: rgba(226, 180, 127, 0.3); background-color: rgba(226, 180, 127, 0.3);
border:solid; border:solid;
border-color: brown; border-color: brown;
border-width:15px; border-width:15px;
width:100%; width:100%;
height:100vh; height:100vh;
overflow: scroll; overflow: scroll;
} }
.Product{ .Product{
float:left; float:left;
margin : 3%; margin : 3%;
width:25%; width:25%;
} }
.Product p, .Product h3{ .Product p, .Product h3{
margin-top: -5px; margin-top: -5px;
width:150px; width:150px;
} }
#panier1{ #panier1{
grid-column-start: 2; grid-column-start: 2;
grid-row-start:1; grid-row-start:1;
width:80%; width:80%;
margin:auto; margin:auto;
} }
#panier2{ #panier2{
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 2; grid-column-end: 2;
grid-row-start:1; grid-row-start:1;
width:80%; width:80%;
height: 100%; height: 100%;
margin:auto; margin:auto;
} }
#panier2 form div{ #panier2 form div{
margin:4%; margin:4%;
margin-left: 35%; margin-left: 35%;
} }
#panier2 button{ #panier2 button{
margin:4%; margin:4%;
margin-left: 35%; margin-left: 35%;
} }
#panier2 form{ #panier2 form{
border:solid; border:solid;
border-color:tan; border-color:tan;
margin:4%; margin:4%;
} }
#panier3{ #panier3{
height:100vh; height:100vh;
} }
.panier h1{ .panier h1{
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.panier p{ .panier p{
font-weight: bold; font-weight: bold;
} }
.panier li{ .panier li{
margin-left:15%; margin-left:15%;
} }
.panier h1{ .panier h1{
text-align: center; text-align: center;
} }
.panier button{ .panier button{
position: center; position: center;
width:20%; width:20%;
} }
.Ariane{ .Ariane{
margin:auto; margin:auto;
margin-left: 25%; margin-left: 25%;
} }
.ligne{ .ligne{
width:21%; width:21%;
height: 2px; height: 2px;
background-color: black; background-color: black;
float:left; float:left;
margin-left:2%; margin-left:2%;
margin-right:2%; margin-right:2%;
margin-bottom: 10%; margin-bottom: 10%;
margin-top: 10%; margin-top: 10%;
} }
.point{ .point{
width:10px; width:10px;
height:10px; height:10px;
background-color: white; background-color: white;
border:solid; border:solid;
border-color: black; border-color: black;
border-width:1px; border-width:1px;
border-radius: 50%; border-radius: 50%;
float: left; float: left;
margin-bottom: 10%; margin-bottom: 10%;
margin-top: 10%; margin-top: 10%;
} }
#active{ #active{
background-color: crimson; background-color: crimson;
} }

216
css/style.css Normal file → Executable file
View File

@ -1,106 +1,112 @@
html{
font-family: Arial, Helvetica, sans-serif; :root{
background:black; --meme-wsize: 50vw;
width:100%; --meme-vsize: 26vw;
} }
html{
body{ font-family: Arial, Helvetica, sans-serif;
display: grid; background:black;
width:100%; width:100%;
grid-template-columns: 5% 1fr 5%; }
grid-template-rows: auto auto auto;
grid-auto-rows: minmax(auto, auto);
background:linear-gradient(lightgray, sandybrown); body{
} display: grid;
width:100%;
header{ grid-template-columns: 5% 1fr 5%;
grid-column-start: 1; grid-template-rows: auto auto auto;
grid-column-end: 4; grid-auto-rows: minmax(auto, auto);
grid-row-start: 1; background:linear-gradient(lightgray, sandybrown);
grid-row-end: 1; }
position: static;
} header{
grid-column-start: 1;
.rotate{ grid-column-end: 4;
z-index:1; grid-row-start: 1;
pointer-events: none; grid-row-end: 1;
} position: static;
.rotate2{ }
z-index:1;
pointer-events: none; .rotate{
} z-index:1;
.page{ pointer-events: none;
grid-column-start: 1; }
grid-column-end: 4; .rotate2{
background:linear-gradient(rgb(189, 184, 184), sandybrown); z-index:1;
z-index:2; pointer-events: none;
}
display: grid; .page{
grid-template-columns: 10vw, 80vw, 10vw; grid-column-start: 1;
grid-template-rows: 5%, auto, 5%; grid-column-end: 4;
grid-auto-rows: minmax(auto, auto); background:linear-gradient(rgb(189, 184, 184), sandybrown);
} z-index:2;
.pubG{
grid-column-start : 1; display: grid;
grid-column-end: 1; grid-template-columns: 10vw, 80vw, 10vw;
grid-row-start: 2; grid-template-rows: 5%, auto, 5%;
grid-row-end: 2; grid-auto-rows: minmax(auto, auto);
z-index:3; }
background-color: red; .pubG{
margin:4%; grid-column-start : 1;
} grid-column-end: 1;
.pubD{ grid-row-start: 2;
grid-column-start : 3; grid-row-end: 2;
grid-column-end: 3; z-index:3;
grid-row-start: 2; background-color: red;
grid-row-end: 2; margin:4%;
z-index:3; }
background-color: green; .pubD{
margin-top: 4%; grid-column-start : 3;
padding-right: 4%; grid-column-end: 3;
grid-row-start: 2;
} grid-row-end: 2;
main{ z-index:3;
grid-column-start: 2; background-color: green;
grid-column-end: 3; margin-top: 4%;
grid-row-start: 2; padding-right: 4%;
grid-row-end: 2;
width: 97%; }
background: rgba(255, 0, 0, 0.1); main{
margin-left:1.5%; grid-column-start: 2;
margin-right:1.5%; grid-column-end: 3;
z-index:3; grid-row-start: 2;
} grid-row-end: 2;
width: 97%;
background: rgba(255, 0, 0, 0.1);
@media only screen and (max-width: 600px) { margin-left:1.5%;
main { margin-right:1.5%;
width:100%; z-index:3;
background: none; }
}
}
@media only screen and (max-width: 600px) {
footer { main {
font-size: 11px; width:100%;
grid-column-start: 1; background: none;
grid-column-end: 4; }
grid-row-start: 3; }
grid-row-end: 3;
background:rgb(86, 85, 177); footer {
bottom:100vh; font-size: 11px;
width:100%; grid-column-start: 1;
} grid-column-end: 4;
footer .divfooter{ grid-row-start: 3;
float:left; grid-row-end: 3;
margin:3%; background:rgb(86, 85, 177);
} bottom:100vh;
footer img{ width:100%;
margin-left:10%; }
} footer .divfooter{
float:left;
form input{ margin:3%;
background-color: rgba(255, 255, 255, 0.2); }
border: solid; footer img{
border-radius: 15px; margin-left:10%;
}
form input{
background-color: rgba(255, 255, 255, 0.2);
border: solid;
border-radius: 15px;
} }

4
header.php Normal file → Executable file
View File

@ -1,11 +1,11 @@
<header> <header>
<img class=rotate src="img/roue.png" alt=""> <img class=rotate src="img/roue.png" alt="">
<img class=rotate2 src="img/roue.png" alt=""> <img class=rotate2 src="img/roue.png" alt="">
<img class=Titre src="img/sodaramel.png" alt="Créé par Simon Catanese, propriété intellectuelle de Sodaramel®"> <img class=Titre src="img/Insuline.png" alt="Créé par Simon Catanese, propriété intellectuelle de Sodaramel®">
<p class="intro">Insuline, quand le caramel ne suffit plus !</p> <p class="intro">Insuline, quand le caramel ne suffit plus !</p>
<nav class="navbar"> <nav class="navbar">
<ul> <ul>
<li><a id="tab" href="../index.html">Accueil</a></li> <li><a id="tab" href="index.php">Accueil</a></li>
<li><a class="active" id="tab" href="../Produits/cat_all.html">Tous les memes</a></li> <li><a class="active" id="tab" href="../Produits/cat_all.html">Tous les memes</a></li>
<li><a id="tab" href="../Produits/categories.html">Catégories</a></li> <li><a id="tab" href="../Produits/categories.html">Catégories</a></li>
<li><a id="tab" href="../newsletter.html">News Letter</a></li> <li><a id="tab" href="../newsletter.html">News Letter</a></li>

157
index.php Normal file → Executable file
View File

@ -16,171 +16,60 @@
</head> </head>
<body> <body>
<?php include("header.php");?> <?php include("header.php");?>
<div class="page"> <div class="page">
<div class=pubG> <a class=pubG href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
<img src="" class=meme alt="" height="150px" width="150px"> <img src="img/sodaramel.png" alt="" height="100px" width="100px" >
</div> <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
</a>
<main> <main>
<section class=Liste> <section class=Liste>
<div class="Product"> <div class="Product">
<p>Caramel 7up</p> <img src="img/meme/bouton.jpg" class=meme height="500vw" width="100%">
<img src="" class=meme alt="" height="200vw" width="200vw">
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/DecouvreSodaraMeme.jpg" class=meme height="500vw" width="500vw">
<p>Caramel Beurre Salé</p>
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/insulit.jpg" class=meme height="500vw" width="500vw">
<p>Caramel Coca-Cola</p>
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/matrix.jpg" class=meme height="500vw" width="500vw">
<p>Caramel Dr Pepper</p>
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/megamindSoda.jpg" class=meme height="500vw" width="500vw">
<p>Caramel Fanta</p>
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/mort.jpg" class=meme height="500vw" width="500vw">
<p>Caramel Monster</p>
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/shitting.jpg" class=meme height="500vw" width="500vw">
<p>Cramel Oasis</p>
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/sodarameme.jpg" class=meme height="500vw" width="500vw">
<p>Caramel Orangina</p>
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/sodaramemev3.jpg" class=meme height="500vw" width="500vw">
<p>Caramel Pepsi</p>
<p>4,99 - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/SodaSupHaribo.png" class=meme height="500vw" width="500vw">
<p>Caramel Redbull</p>
<p>4,99 - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Caramel Sprite</p>
<p>4,99 - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Caramel Swhepps</p>
<p>4,99 - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Caramel Mountain Dew</p>
<p>4,99 - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop 7up</p>
<p>6,85€ - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop Coca-Cola</p>
<p>6,85€ - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop DrPepper</p>
<p>6,85€ - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop Fanta</p>
<p>6,85€ - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop Monster</p>
<p>6,85€ - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/toiletramel.jpg" class=meme alt="" height="500vw" width="500vw">
<p>Sirop Mountain Dew</p>
<p>6,85€ - En stock</p>
</div><div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop Oasis</p>
<p>6,85€ - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/uno.jpg" class=meme height="500vw" width="500vw">
<p>Sirop Orangina</p>
<p>6,85€ - En stock</p>
</div> </div>
<div class="Product"> <div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw"> <img src="img/meme/sodabaguette.jpg" class=meme height="500vw" width="500vw">
<p>Sirop Pepsi</p>
<p>6,85€ - En stock</p>
</div> </div>
<div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop Red Bull</p>
<p>6,85€ - En stock</p>
</div>
<div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop Sprite</p>
<p>6,85€ - En stock</p>
</div>
<div class="Product">
<img src="" class=meme alt="" height="500vw" width="500vw">
<p>Sirop Swhepps</p>
<p>6,85€ - En stock</p>
</div>
<div class="Product">
<img src="../img/produits/packcocaoasis.png" alt="" height="500vw" width="500vw">
<p>Pack Coca Oasis</p>
<p>24,99€ - En stock</p>
</div>
<div class="Product">
<img src="../img/produits/packcaramel.png" alt="" height="500vw" width="500vw">
<p>Pack 5 paquet Caramel Coca</p>
<p>30,99€ - En stock</p>
</div>
<div class="Product">
<img src="../img/produits/packcocaoasis.png" alt="" height="500vw" width="500vw">
<p>Pack 5 paquet Caramel Coca</p>
<p>30,99€ - En stock</p>
</div>
<div class="Product">
<img src="../img/produits/packcaramel.png" alt="" height="500vw" width="500vw">
<p>Pack 5 paquet Caramel Coca</p>
<p>30,99€ - En stock</p>
</div>
<div class="Product">
<img src="../img/produits/discover.png" alt="" height="500vw" width="500vw">
<p>Figurines Sodaramel pour embouts de crayons</p>
<p>0,99€ - En stock</p>
</div>
<div class="Product">
<img src="../img/produits/discover.png" alt="" height="500vw" width="500vw">
<p>Peluche Samuel Caramel</p>
<p>8,99€ - En stock</p>
</div>
<div class="Product">
<img src="../img/produits/discover.png" alt="" height="500vw" width="500vw">
<p>Figurine Samuel Caramel</p>
<p>6.99€ - En stock</p>
</div>
</section> </section>
</main> </main>
<div class=pubD> <a class=pubD href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
<img src="" class=meme alt="" height="150px" width="150px"> <img src="img/sodaramel.png" height="100px" width="100px" >
</div> <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
</a>
</div> </div>
<?php include("footer.php");?> <?php include("footer.php");?>
</body> </body>