code added
This commit is contained in:
Vendored
+38
-2
@@ -15,6 +15,8 @@ ORDER: Base + typography > general layout + grid > page layout > components
|
||||
|
||||
1em = 16px
|
||||
*/
|
||||
|
||||
/* Orbitron */
|
||||
@font-face {
|
||||
font-family: "Orbitron";
|
||||
src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
|
||||
@@ -39,7 +41,28 @@ ORDER: Base + typography > general layout + grid > page layout > components
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Orbitron end */
|
||||
/* Satoshi */
|
||||
@font-face {
|
||||
font-family: "Satoshi";
|
||||
src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Satoshi";
|
||||
src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Satoshi";
|
||||
src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Satoshi end */
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
@@ -50,14 +73,21 @@ ORDER: Base + typography > general layout + grid > page layout > components
|
||||
font-family: "Orbitron" ,sans-serif;
|
||||
}
|
||||
|
||||
.satoshi_font{
|
||||
font-family: "Satoshi", sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%; }
|
||||
|
||||
body {
|
||||
box-sizing: border-box; }
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@media only screen and (max-width: 56.25em) {
|
||||
body {
|
||||
padding: 0; } }
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
background-color: #3bb78f;
|
||||
@@ -90,6 +120,9 @@ body {
|
||||
.padding_top_14 {
|
||||
padding-top: 14rem; }
|
||||
|
||||
.padding_top_10 {
|
||||
padding-top: 10rem; }
|
||||
|
||||
.p-6 {
|
||||
padding: 5rem; }
|
||||
|
||||
@@ -108,6 +141,9 @@ body {
|
||||
.fw-600 {
|
||||
font-weight: 600; }
|
||||
|
||||
.fw-700 {
|
||||
font-weight: 700; }
|
||||
|
||||
.h-200p {
|
||||
height: 200px; }
|
||||
/* button */
|
||||
|
||||
Vendored
+16
-5
@@ -1,18 +1,29 @@
|
||||
.productoverviewmain{
|
||||
background-image: url("../../assets/imgs/productoverview/productbg.png");
|
||||
background-color: #cccccc;
|
||||
background-size: cover; /* <------ */
|
||||
background-color: #C9DBB5;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
background-position: center;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.photo_dual {
|
||||
width: 40rem;
|
||||
}
|
||||
|
||||
.price_footer {
|
||||
background-color: #52cba5;
|
||||
background: rgba( 255, 255, 255, 0.25 );
|
||||
/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
|
||||
backdrop-filter: blur( 4px );
|
||||
-webkit-backdrop-filter: blur( 4px );
|
||||
|
||||
border: 1px solid rgba( 255, 255, 255, 0.18 );
|
||||
border: 2px solid;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.boxImgContainer {
|
||||
|
||||
Vendored
+22
-22
@@ -8,44 +8,44 @@
|
||||
|
||||
<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">
|
||||
<link rel="stylesheet" href="../../../styles/style.css">
|
||||
<title>project</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="productoverviewmain bg-green vh-100">
|
||||
<header class="productoverviewmain vh-100">
|
||||
|
||||
<!-- navbar -->
|
||||
<div id="navbar-head"></div>
|
||||
<!-- end-navbar -->
|
||||
|
||||
<div class="container vh-77 text-white ">
|
||||
<div class="container h-100 text-white ">
|
||||
<div class="row h-100">
|
||||
<div class="col-sm-4 padding_top_14 ">
|
||||
<h1 class="banner_heading_4">Anwi XCreate</h1>
|
||||
<div class="subtitle_1">2.5K Resolution | 120 Hz Refresh Rate</div>
|
||||
<div class="col-sm-4 padding_top_10 ">
|
||||
<h1 class="banner_heading_4 pb-4">Anwi XCreate</h1>
|
||||
<div class="subtitle_1 satoshi_font">2.5K Resolution | 120 Hz Refresh Rate</div>
|
||||
</div>
|
||||
<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="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>
|
||||
<div class="price_footer vh-15 py-4 ">
|
||||
<div class="price_footer py-4 w-100 ">
|
||||
<div class="d-flex align-items-center container justify-content-between">
|
||||
<div class="d-flex">
|
||||
<div class="boxImgContainer">
|
||||
<img class="w-100 h-100" src="./../../assets/box.png" alt="box" />
|
||||
<img class="w-100 h-100" src="./../../assets/imgs/box.png" alt="box" />
|
||||
</div>
|
||||
<div class="ps-3">
|
||||
<div class="fw-bold">Delivery</div>
|
||||
<div>See estimated delivery times by</div>
|
||||
<div>entering your PIN code</div>
|
||||
<div class="ps-3 ">
|
||||
<div class="satoshi_font fw-700">Delivery</div>
|
||||
<div class="satoshi_font">See estimated delivery times by</div>
|
||||
<div class="satoshi_font ">entering your PIN code</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
@@ -81,37 +81,37 @@
|
||||
<div class="container PO_galleryContainer">
|
||||
<div class="p-6 pt-0">
|
||||
<div class="PO_gallery_display">
|
||||
<img class="PO_gallery_display_img" src="./../../assets/laptop_display.png" />
|
||||
<img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />
|
||||
</div>
|
||||
<div class="d-flex h-200p pt-5 justify-content-between align-items-center">
|
||||
<span class="PO_gallery_box h-100">
|
||||
<div class="PO_gallery_box_inner h-100">
|
||||
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
||||
</div>
|
||||
</span>
|
||||
<span class="PO_gallery_box h-100">
|
||||
<div class="PO_gallery_box_inner h-100">
|
||||
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
||||
</div>
|
||||
</span>
|
||||
<span class="PO_gallery_box h-100">
|
||||
<div class="PO_gallery_box_inner h-100">
|
||||
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
||||
</div>
|
||||
</span>
|
||||
<span class="PO_gallery_box h-100">
|
||||
<div class="PO_gallery_box_inner h-100">
|
||||
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
||||
</div>
|
||||
</span>
|
||||
<span class="PO_gallery_box h-100">
|
||||
<div class="PO_gallery_box_inner h-100">
|
||||
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
||||
</div>
|
||||
</span>
|
||||
<span class="PO_gallery_box h-100">
|
||||
<div class="PO_gallery_box_inner h-100">
|
||||
<img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
|
||||
<img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user