code
|
До Ширина: | Висота: | Розмір: 10 KiB Після Ширина: | Висота: | Розмір: 10 KiB |
|
До Ширина: | Висота: | Розмір: 11 KiB Після Ширина: | Висота: | Розмір: 11 KiB |
|
До Ширина: | Висота: | Розмір: 11 KiB Після Ширина: | Висота: | Розмір: 11 KiB |
|
До Ширина: | Висота: | Розмір: 1.0 MiB Після Ширина: | Висота: | Розмір: 1.0 MiB |
|
Після Ширина: | Висота: | Розмір: 419 KiB |
|
Після Ширина: | Висота: | Розмір: 3.1 MiB |
@@ -15,12 +15,40 @@ ORDER: Base + typography > general layout + grid > page layout > components
|
|||||||
|
|
||||||
1em = 16px
|
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,
|
*::after,
|
||||||
*::before {
|
*::before {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: inherit; }
|
box-sizing: inherit;
|
||||||
|
|
||||||
|
font-family: "Orbitron" ,sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 100%; }
|
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 {
|
.photo_dual {
|
||||||
width: 40rem; }
|
width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
.price_footer {
|
.price_footer {
|
||||||
background-color: #52cba5; }
|
background-color: #52cba5;
|
||||||
|
border: 2px solid;
|
||||||
|
}
|
||||||
|
|
||||||
.boxImgContainer {
|
.boxImgContainer {
|
||||||
width: 4rem; }
|
width: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
.priceCut_multi {
|
.priceCut_multi {
|
||||||
font-size: .7rem; }
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
.productOverview .overviewProductHeading {
|
.productOverview .overviewProductHeading {
|
||||||
font-size: 2.1rem; }
|
font-size: 2.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.productOverview .overviewProductFullTitle {
|
.productOverview .overviewProductFullTitle {
|
||||||
padding: 2rem 13rem;
|
padding: 2rem 13rem;
|
||||||
font-size: 3rem; }
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
.productOverview .overviewProductDes {
|
.productOverview .overviewProductDes {
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
font-size: 1.5rem; }
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.PO_galleryContainer .PO_gallery_display {
|
.PO_galleryContainer .PO_gallery_display {
|
||||||
min-height: 500px;
|
min-height: 500px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: white;
|
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="../../../libs/bootstrap/css/bootstrap.min.css" />
|
||||||
<link rel="stylesheet" href="./../../css/main.css" />
|
<link rel="stylesheet" href="./../../css/main.css" />
|
||||||
|
<link rel="stylesheet" href="./../../css/pages/productOverview.css">
|
||||||
<title>project</title>
|
<title>project</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class=" bg-green vh-100">
|
<header class="productoverviewmain bg-green vh-100">
|
||||||
|
|
||||||
<!-- navbar -->
|
<!-- navbar -->
|
||||||
<div id="navbar-head"></div>
|
<div id="navbar-head"></div>
|
||||||
@@ -28,7 +29,7 @@
|
|||||||
<div class="col-sm-7 h-100">
|
<div class="col-sm-7 h-100">
|
||||||
<div class="d-flex align-items-end justify-content-end h-100">
|
<div class="d-flex align-items-end justify-content-end h-100">
|
||||||
<div class="photo_dual">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||