first commit
This commit is contained in:
Lukáš
BIN
index/project/kartaProduktu/img/psi-hracka.png
Normal file
BIN
index/project/kartaProduktu/img/psi-hracka.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 367 KiB |
55
index/project/kartaProduktu/karta-produktu.html
Normal file
55
index/project/kartaProduktu/karta-produktu.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs">
|
||||
|
||||
<head>
|
||||
<meta keywords="Karta produktu, Sněhulák, Psí hračka">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.karta.css">
|
||||
<title>Karta produktu</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Product Card -->
|
||||
<div class="product-card">
|
||||
<!-- Product Labels -->
|
||||
<div class="whell">
|
||||
<span class="product-only">Jen u nás</span>
|
||||
<span class="discount-badge">-27%</span>
|
||||
</div>
|
||||
<!-- Product Image -->
|
||||
<div class="product-image-container">
|
||||
<img class="product-image" src="img/psi-hracka.png" />
|
||||
</div>
|
||||
|
||||
<!-- Product Title -->
|
||||
<h1>M-Pets Hračka Holly vánoční sněhulák</h1>
|
||||
|
||||
<!-- Product Description -->
|
||||
<p><strong>Hračka pro psy - pro střední a velká plemena, vydává zvuky, materiál polyester, bílá barva</strong>
|
||||
</p>
|
||||
|
||||
<!-- Product Change Offer -->
|
||||
<div class="product-change">
|
||||
<div>Výměna nevhodného dárku za poukaz do 31.1.2024 nyní zdarma! Více informací klini na odkaz: Výměna
|
||||
dárku.
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<a class="button" href="#">Výměna dárku</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Price -->
|
||||
<div class="product-price-container">
|
||||
<p class="product-price-old">149,-</p>
|
||||
<span class="product-price">109,-</span>
|
||||
<span><a class="shopping-button" href="#">Do košíku</a></span>
|
||||
</div>
|
||||
|
||||
<!-- Product Stock and Transport -->
|
||||
<span class="stock">Skladem > 5 ks</span>
|
||||
<span class="transport">Doprava zdarma</span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
147
index/project/kartaProduktu/style.karta.css
Normal file
147
index/project/kartaProduktu/style.karta.css
Normal file
@@ -0,0 +1,147 @@
|
||||
:root {
|
||||
--special-yellow: hsl(56, 94%, 49%);
|
||||
--special-yellow-2: rgb(231, 231, 149);
|
||||
--special-red-original: red;
|
||||
--special-red: #db090d;
|
||||
--special-black: #040303;
|
||||
--special-white: #f7f7f7;
|
||||
--special-green: rgb(0, 128, 0);
|
||||
--special-agua: rgb(8, 126, 126);
|
||||
--special-pink: palevioletred;
|
||||
}
|
||||
.product-card {
|
||||
position: relative;
|
||||
width: 450px;
|
||||
background-color: var(--special-white);
|
||||
padding: 16px;
|
||||
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
|
||||
border: 6px solid var(--special-black);
|
||||
|
||||
/* responzivita */
|
||||
width: calc(100% - 32px);
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.whell {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.product-only {
|
||||
background-color: var(--special-yellow);
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
left: 35px;
|
||||
top: 60px;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
color: var(--special-white);
|
||||
font-weight: bold;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
background-color: var(--special-red);
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
left: 35px;
|
||||
top: 160px;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
color: var(--special-white);
|
||||
font-weight: bold;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--special-agua);
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--special-red);
|
||||
border-style: solid;
|
||||
text-decoration: none;
|
||||
padding-right: 6px;
|
||||
padding-left: 6px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--special-yellow-2);
|
||||
}
|
||||
.product-price-container {
|
||||
padding: 8px;
|
||||
background-color: var(--special-pink);
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
background-color: var(--special-red-original);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.product-price-old {
|
||||
font-size: 20px;
|
||||
color: var(--special-white);
|
||||
text-decoration: line-through;
|
||||
width: 75px;
|
||||
background-color: var(--special-yellow);
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
padding-left: 35px;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.shopping-button {
|
||||
color: var(--special-black);
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--special-yellow-2);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.stock {
|
||||
font-weight: bold;
|
||||
color: var(--special-green);
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.transport {
|
||||
padding-left: 135px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 10px;
|
||||
/* margin-bottom: 15px; */
|
||||
}
|
||||
|
||||
/* ˇMobily */
|
||||
@media screen and (max-width: 600px) {
|
||||
body {
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user