Show sourcecode
The following files exists in this folder. Click to view.
public_html/exercises/Projekt/Företag/
Bilder/
Huvudmeny.html
faq.html
itemDetailRenderer.js
kontakt.html
omOss.html
shop.html
shopRenderer.js
style.css
shop.html
209 lines UTF-8 Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<link rel="stylesheet" href="style.css">
<style>
* {
overflow-x: hidden;
}
#productDetails {
width: 100%;
height: 200vh;
background-color: rgb(29, 29, 29);
position: absolute;
top: 80px;
z-index: 10;
visibility: hidden;
padding: 10px;
overflow-y: auto;
}
#paddingDetails {
padding: 50px;
padding-left: 20%;
padding-right: 20%;
}
#shop {
display: grid;
width: 100%;
position: absolute;
top: 120px;
grid-template-columns: repeat(3, 1fr);
}
.product {
margin: 20px;
padding: 10px;
background-color: rgb(20, 20, 20);
border-radius: 20px;
transition: 0.3s;
}
.product > p , .product > h3 {
color: white;
}
.product > img {
border-radius: 20px;
width: 100%;
}
.product:hover {
background-color: rgb(50, 50, 50);;
}
.X {
width: 50px;
height: 50px;
position: fixed;
}
#detailImage {
border-radius: 20px;
height: 50vh;
transform: translate(-50%);
position: relative;
left: 50%;
}
#detailTitle {
text-align: center;
color: white;
top: 30px;
position: relative;
}
#detailSqm {
font-size: xx-large;
color: white;
}
#detailDescription {
width:fit-content;
color: white;
position: relative;
transform: translate(-50%);
left: 50%;
}
#jamfor {
width:fit-content;
font-weight: bolder;
position: absolute;
top: 85px;
background-color: rgb(196, 190, 124);
padding: 10px;
border-radius: 10px;
transform: translate(-50%);
left: 50%;
transition: 0.1s;
}
#jamfor:hover {
top: 80px;
padding: 15px;
}
#jamfor:hover {
top: 80px;
padding: 15px;
}
#varukorg {
width:fit-content;
position: relative;
font-weight: bolder;
background-color: rgb(196, 190, 124);
padding: 10px;
border-radius: 10px;
top: 20px;
transform: translate(-50%);
left: 50%;
transition: 0.1s;
}
#varukorg:hover {
top: 15px;
padding: 15px;
}
#productCompare {
visibility: hidden;
width: 100vw;
height: 200vh;
position: relative;
top:85px;
z-index: 100;
background-color: rgb(29, 29, 29);
}
#Image1 {
width: 40vw;
border-radius: 20px;
}
#Image2 {
width: 40vw;
border-radius: 20px;
}
#productCompare h1, #productCompare h3, #productCompare p {
color: white;
width: 40vw;
}
#product2 {
position: absolute;
left: 50%;
}
#product1 {
position: absolute;
}
.productPadding {
padding: 50px;
}
</style>
</head>
<body>
<div id="menu-top">
<div id="menu-background">
<div class="heightcontrol"><img src="Bilder/logga.png" alt="logga"></div>
</div>
<div id="menu-logo-cart">
<div id="logo"><a href="Huvudmeny.html"><img src="Bilder/logga.png" alt="logga"></a></div>
<div id="cart"><a href="cart.html"><img src="Bilder/cart.png" alt="cart"></a></div>
</div>
<div id="top-menu">
<div class="heightcontrol"><img src="Bilder/logga.png" alt="logga"></div>
<div class="top-menu-link"><a href="Huvudmeny.html">Huvudmeny</a></div>
<div class="top-menu-link"><a href="shop.html">Shop</a></div>
<div class="top-menu-link"><a href="kontakt.html">Kontakt</a></div>
<div class="top-menu-link"><a href="faq.html">FAQ</a></div>
<div class="top-menu-link"><a href="omOss.html">Om Oss</a></div>
<div class="heightcontrol"><img src="Bilder/logga.png" alt="logga"></div>
</div>
</div>
<div id="productDetails" class="productPadding">
<img src="Bilder/x.png" alt="leave X" id="detailX" class="X">
<div id="paddingDetails">
<img src="placeholder" alt="produkt bild" id="detailImage">
<h1 id="detailTitle">Placeholder</h1>
<h3 id="detailSqm">kvm</h3>
<p id="detailDescription">placeholder</p>
<button id="varukorg" type="button">Lägg till i varukorg</button>
</div>
</div>
<div id="productCompare">
<div id="product1" class="productPadding">
<select id="product1selector">
<option value="">Välj Produkt att Jämföra</option>
</select> <br><br>
<img src="Bilder/lagenhet1.png" alt="produkt bild" id="Image1" class="CompareImage">
<h1 class="compareTitle" id="title1">Modern 2:a nära centrum</h1>
<h3 class="compareSqm" id="sqm1">48 m²</h3>
<p class="compareDescription" id="desc1">Ljus och modern tvåa med öppen planlösning mellan kök och vardagsrum. Stora fönster ger mycket naturligt ljus. Lägenheten har även en rymlig balkong och gott om förvaring. Perfekt för singel eller par.</p>
<br>
<h1 id="price1">2450000 kr</h1>
</div>
<div id="product2" class="productPadding">
<select id="product2selector">
<option value="">Välj Produkt att Jämföra</option>
</select> <br><br>
<img src="Bilder/lagenhet1.png" alt="produkt bild" id="Image2" class="CompareImage">
<h1 class="compareTitle" id="title2">Modern 2:a nära centrum</h1>
<h3 class="compareSqm" id="sqm2">48 m²</h3>
<p class="compareDescription" id="desc2">Ljus och modern tvåa med öppen planlösning mellan kök och vardagsrum. Stora fönster ger mycket naturligt ljus. Lägenheten har även en rymlig balkong och gott om förvaring. Perfekt för singel eller par.</p>
<br>
<h1 id="price2">2450000 kr</h1>
</div>
<img src="Bilder/x.png" alt="leave X" id="compareX" class="X">
</div>
<button id="jamfor" type="button">Jämför Lägenheter</button>
<div id="shop"></div>
<script src="shopRenderer.js"></script>
</body>
</html>