code
|
Before Leveys: | Korkeus: | Koko: 10 KiB After Leveys: | Korkeus: | Koko: 10 KiB |
|
Before Leveys: | Korkeus: | Koko: 11 KiB After Leveys: | Korkeus: | Koko: 11 KiB |
|
Before Leveys: | Korkeus: | Koko: 11 KiB After Leveys: | Korkeus: | Koko: 11 KiB |
|
Before Leveys: | Korkeus: | Koko: 1.0 MiB After Leveys: | Korkeus: | Koko: 1.0 MiB |
|
After Leveys: | Korkeus: | Koko: 419 KiB |
|
After Leveys: | Korkeus: | Koko: 3.1 MiB |
@@ -15,12 +15,40 @@ ORDER: Base + typography > general layout + grid > page layout > components
|
||||
|
||||
1em = 16px
|
||||
*/
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit; }
|
||||
box-sizing: inherit;
|
||||
|
||||
font-family: "Orbitron" ,sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%; }
|
||||
|
||||
@@ -1,28 +1,57 @@
|
||||
.productoverviewmain{
|
||||
background-image: url("../../assets/imgs/productoverview/productbg.png");
|
||||
background-color: #cccccc;
|
||||
background-size: cover; /* <------ */
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.photo_dual {
|
||||
width: 40rem; }
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.price_footer {
|
||||
background-color: #52cba5; }
|
||||
background-color: #52cba5;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.boxImgContainer {
|
||||
width: 4rem; }
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.priceCut_multi {
|
||||
font-size: .7rem; }
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductHeading {
|
||||
font-size: 2.1rem; }
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductFullTitle {
|
||||
padding: 2rem 13rem;
|
||||
font-size: 3rem; }
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.productOverview .overviewProductDes {
|
||||
padding: 0 2rem;
|
||||
font-size: 1.5rem; }
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_display {
|
||||
min-height: 500px;
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); }
|
||||
background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
|
||||
position: relative;
|
||||
}
|
||||
.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.PO_galleryContainer .PO_gallery_box_inner {
|
||||
padding: 2rem;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
@@ -8,12 +8,13 @@
|
||||
|
||||
<link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="./../../css/main.css" />
|
||||
<link rel="stylesheet" href="./../../css/pages/productOverview.css">
|
||||
<title>project</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class=" bg-green vh-100">
|
||||
<header class="productoverviewmain bg-green vh-100">
|
||||
|
||||
<!-- navbar -->
|
||||
<div id="navbar-head"></div>
|
||||
@@ -28,7 +29,7 @@
|
||||
<div class="col-sm-7 h-100">
|
||||
<div class="d-flex align-items-end justify-content-end h-100">
|
||||
<div class="photo_dual">
|
||||
<img class="w-100 h-100" src="./../../assets/laptop.png" alt="laptop">
|
||||
<!-- <img class="w-100 h-100" src="./../../assets/laptop.png" alt="laptop"> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||