From f94f8e5ffb512a22387d2889afa7f61be693e20c Mon Sep 17 00:00:00 2001
From: "Benjamin.sitbon" <benjamin.sitbon@etu.hesge.ch>
Date: Sun, 9 May 2021 22:00:44 +0200
Subject: [PATCH] mise en place des prix et correction d'affichage
---
frontend/checkout.html | 2 +-
frontend/css/index.css | 103 +++++++++++++++++++++++++++++++++++++++--
frontend/css/price.css | 0
frontend/index.html | 29 ++++++++++--
frontend/price.html | 37 +++++++++++++++
5 files changed, 162 insertions(+), 9 deletions(-)
create mode 100644 frontend/css/price.css
create mode 100644 frontend/price.html
diff --git a/frontend/checkout.html b/frontend/checkout.html
index c1cc7e2..ccdfb3d 100644
--- a/frontend/checkout.html
+++ b/frontend/checkout.html
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
- <link rel="stylesheet" href="css/&menu.css">
+ <link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/checkout.css">
<link rel="stylesheet" href="css/button.css">
<title>Checkout</title>
diff --git a/frontend/css/index.css b/frontend/css/index.css
index e557f9b..0ed5998 100644
--- a/frontend/css/index.css
+++ b/frontend/css/index.css
@@ -18,6 +18,31 @@
}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body{
+ overflow-y: hidden;
+}
+
+
+*::-webkit-scrollbar {
+ width: 4px;
+ }
+
+*::-webkit-scrollbar-thumb {
+ background-color: white;
+}
+
+
+body {
+ display: flex;
+ flex-direction: column;
+
+}
+
nav{
display: flex;
flex-direction: row;
@@ -29,6 +54,13 @@ nav{
}
+#sub {
+
+ width: 100%;
+ height: 12.5vw;
+
+}
+
a{
text-decoration: none;
}
@@ -70,7 +102,6 @@ a{
main {
width: 100%;
- height: 100vh;
background-image:url(../img/Dym19R.jpg);
background-position: center center;
background-size: cover;
@@ -80,18 +111,20 @@ main {
background-clip: border-box;
background-color: #ccc;
+
}
#desc {
position: relative;
- top: 50%;
left: 50%;
width: 75%;
+ margin-top: 10vw;
+ margin-bottom: 10vw;
background-color: rgba(0, 0, 0, 0.597);
backdrop-filter: blur(20px);
border-radius: 10px;
- transform: translate(-50%,-50%);
+ transform: translate(-50%);
color: white;
}
@@ -107,4 +140,68 @@ main {
margin-bottom: 2vh;
font-size: 2vw;
+}
+
+
+#prices{
+ padding-top: 5vw;
+ padding-bottom: 15vw;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ transition: 1s ease;
+}
+
+
+.box {
+
+ width: 30%;
+ height: 20%;
+ background-color: rgba(0, 0, 0, 0.597);
+ backdrop-filter: blur(20px);
+ margin-left: 10%;
+ margin-right: 10%;
+ border-radius: 20px;
+
+
+}
+
+.lititle {
+ color: white;
+ font-size: 2.5vw;
+ text-align: center;
+ margin-top: 2vh;
+}
+
+.prices {
+
+ color: white;
+ font-size: 3vw;
+ text-align: center;
+}
+
+footer {
+
+ height: 10vw;
+ width: 100%;
+ text-align: center;
+ background-color: rgba(0, 0, 0, 0.597);
+ backdrop-filter: blur(20px);
+
+}
+
+img{
+ margin-top: 5vh;
+ width: 3vw;
+ height: 3vw;
+
+}
+
+footer > p {
+ color: white;
+}
+
+
+@media screen and (max-width: 600px) {
+
}
\ No newline at end of file
diff --git a/frontend/css/price.css b/frontend/css/price.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/index.html b/frontend/index.html
index c77ccfe..8be6d47 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -13,12 +13,16 @@
<nav>
<a href="shop.html" class="fill" >SHOP</a>
<p id="fill" class="fill">HOMEPAGE</p>
- <a href="price.html" class="fill">PRICES</a>
+ <a href="#prices" class="fill">PRICES</a>
</nav>
+
+
<main>
+ <div id = "sub"></div>
+
<div id="desc">
<p id="title">Description</p>
<p id= "text">
@@ -31,16 +35,31 @@
</div>
+ <div id = "prices">
+
+ <div class= "box">
+ <p class ="lititle">Shiny</p>
+ <p class="prices">4.00 CHF</p>
+ </div>
+
+ <div class= "box">
+ <p class ="lititle">Normal</p>
+ <p class = "prices">2.00 CHF</p>
+ </div>
+
+ </div>
+
+ <footer>
+ <img src="img/poke.svg" alt="">
+ <p>Copyright © Benjamin Sitbon - Leonard Beck. </br> All right reserved.</p>
+ </footer>
</main>
- <footer>
-
- </footer>
+
- <script src="js/index.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/frontend/price.html b/frontend/price.html
new file mode 100644
index 0000000..0dd8d01
--- /dev/null
+++ b/frontend/price.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="css/index.css">
+ <title>Homepage</title>
+</head>
+<body>
+
+ <nav>
+ <a href="shop.html" class="fill" >SHOP</a>
+ <p id="fill" class="fill">PRICES</p>
+ <a href="price.html" class="fill">PRICES</a>
+
+ </nav>
+
+ <main>
+
+
+
+
+
+
+ </main>
+
+
+ <footer>
+
+ </footer>
+
+ <script src="js/index.js"></script>
+
+</body>
+</html>
\ No newline at end of file
--
GitLab