sachin.ganesh/anwi_website
1
0
Fork 0
Koodi Ongelmat Pull-pyynnöt Julkaisut Wiki Toiminta

code added

Selaa lähdekoodia
This commit is contained in:
sachinganesh
2023-01-20 16:18:55 +05:30
vanhempi 7532d035cc
commit 39f96809cc
18 muutettua tiedostoa jossa 1795 lisäystä ja 29 poistoa
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/.DS_Store
Vendored
BIN
Näytä tiedosto
Binary file not shown.
.vscode/.gitignore
Näytä tiedosto
.vscode/notes.html
Vendored
+17
Näytä tiedosto
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./../../libs/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./../../css/main.css" />
<title>project</title>
</head>
<body>
<div class="bg-primary">hello</div>
<script src="../../libs/bootstrap/js/bootstrap.bundle.js"></script>
</body>
</html>
.vscode/package-lock.json
Generated Vendored
+1310
Näytä tiedosto
File diff suppressed because it is too large Load Diff
.vscode/package.json
Vendored
+15
Näytä tiedosto
@@ -0,0 +1,15 @@
{
"name": "sass_sandbox",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node-sass -w scss/ -o dist/css/ --recursive"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"node-sass": "^4.11.0"
}
}
.vscode/settings.json
Vendored
+3
Näytä tiedosto
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
dist/css/main.css
Vendored
+38 -2
Näytä tiedosto
@@ -15,6 +15,8 @@ ORDER: Base + typography > general layout + grid > page layout > components
1em = 16px 1em = 16px
*/ */
/* Orbitron */
@font-face { @font-face {
font-family: "Orbitron"; font-family: "Orbitron";
src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype"); 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-weight: 700;
font-style: normal; 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, *::after,
*::before { *::before {
@@ -50,14 +73,21 @@ ORDER: Base + typography > general layout + grid > page layout > components
font-family: "Orbitron" ,sans-serif; font-family: "Orbitron" ,sans-serif;
} }
.satoshi_font{
font-family: "Satoshi", sans-serif;
}
html { html {
font-size: 100%; } font-size: 100%; }
body { body {
box-sizing: border-box; } box-sizing: border-box;
overflow-x: hidden;
}
@media only screen and (max-width: 56.25em) { @media only screen and (max-width: 56.25em) {
body { body {
padding: 0; } } padding: 0; }
}
.bg-green { .bg-green {
background-color: #3bb78f; background-color: #3bb78f;
@@ -90,6 +120,9 @@ body {
.padding_top_14 { .padding_top_14 {
padding-top: 14rem; } padding-top: 14rem; }
.padding_top_10 {
padding-top: 10rem; }
.p-6 { .p-6 {
padding: 5rem; } padding: 5rem; }
@@ -108,6 +141,9 @@ body {
.fw-600 { .fw-600 {
font-weight: 600; } font-weight: 600; }
.fw-700 {
font-weight: 700; }
.h-200p { .h-200p {
height: 200px; } height: 200px; }
/* button */ /* button */
dist/css/pages/productOverview.css
Vendored
+16 -5
Näytä tiedosto
@@ -1,18 +1,29 @@
.productoverviewmain{ .productoverviewmain{
background-image: url("../../assets/imgs/productoverview/productbg.png"); background-image: url("../../assets/imgs/productoverview/productbg.png");
background-color: #cccccc; background-color: #C9DBB5;
background-size: cover; /* <------ */ background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center;
}
position: relative;
}
.photo_dual { .photo_dual {
width: 40rem; width: 40rem;
} }
.price_footer { .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; border: 2px solid;
position: absolute;
bottom: 0;
left: 0;
} }
.boxImgContainer { .boxImgContainer {
dist/html/pages/laptopmulti.html
Vendored
+22 -22
Näytä tiedosto
@@ -8,44 +8,44 @@
<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"> <link rel="stylesheet" href="../../../styles/style.css">
<title>project</title> <title>project</title>
</head> </head>
<body> <body>
<header class="productoverviewmain bg-green vh-100"> <header class="productoverviewmain vh-100">
<!-- navbar --> <!-- navbar -->
<div id="navbar-head"></div> <div id="navbar-head"></div>
<!-- end-navbar --> <!-- end-navbar -->
<div class="container vh-77 text-white "> <div class="container h-100 text-white ">
<div class="row h-100"> <div class="row h-100">
<div class="col-sm-4 padding_top_14 "> <div class="col-sm-4 padding_top_10 ">
<h1 class="banner_heading_4">Anwi XCreate</h1> <h1 class="banner_heading_4 pb-4">Anwi XCreate</h1>
<div class="subtitle_1">2.5K Resolution | 120 Hz Refresh Rate</div> <div class="subtitle_1 satoshi_font">2.5K Resolution | 120 Hz Refresh Rate</div>
</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="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> -->
</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 align-items-center container justify-content-between">
<div class="d-flex"> <div class="d-flex">
<div class="boxImgContainer"> <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>
<div class="ps-3"> <div class="ps-3 ">
<div class="fw-bold">Delivery</div> <div class="satoshi_font fw-700">Delivery</div>
<div>See estimated delivery times by</div> <div class="satoshi_font">See estimated delivery times by</div>
<div>entering your PIN code</div> <div class="satoshi_font ">entering your PIN code</div>
</div> </div>
</div> </div>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
@@ -81,37 +81,37 @@
<div class="container PO_galleryContainer"> <div class="container PO_galleryContainer">
<div class="p-6 pt-0"> <div class="p-6 pt-0">
<div class="PO_gallery_display"> <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>
<div class="d-flex h-200p pt-5 justify-content-between align-items-center"> <div class="d-flex h-200p pt-5 justify-content-between align-items-center">
<span class="PO_gallery_box h-100"> <span class="PO_gallery_box h-100">
<div class="PO_gallery_box_inner 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> </div>
</span> </span>
<span class="PO_gallery_box h-100"> <span class="PO_gallery_box h-100">
<div class="PO_gallery_box_inner 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> </div>
</span> </span>
<span class="PO_gallery_box h-100"> <span class="PO_gallery_box h-100">
<div class="PO_gallery_box_inner 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> </div>
</span> </span>
<span class="PO_gallery_box h-100"> <span class="PO_gallery_box h-100">
<div class="PO_gallery_box_inner 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> </div>
</span> </span>
<span class="PO_gallery_box h-100"> <span class="PO_gallery_box h-100">
<div class="PO_gallery_box_inner 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> </div>
</span> </span>
<span class="PO_gallery_box h-100"> <span class="PO_gallery_box h-100">
<div class="PO_gallery_box_inner 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> </div>
</span> </span>
</div> </div>
styles/abstracts/_functions.scss
+15
Näytä tiedosto
@@ -0,0 +1,15 @@
// Set Text Color
@function set-text-color($color) {
@if (lightness($color) > 50) {
@return #000;
} @else {
@return #fff;
}
}
// Transform mixin
@mixin transform($property) {
--webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
styles/abstracts/_mixins.scss
+41
Näytä tiedosto
@@ -0,0 +1,41 @@
@mixin absCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// MEDIA QUERY MANAGER
/*
0 - 600px: Phone
600 - 900px: Tablet portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + : Big desktop
$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop
ORDER: Base + typography > general layout + grid > page layout > components
1em = 16px
*/
@mixin respond($breakpoint) {
@if $breakpoint == phone {
@media only screen and (max-width: 37.5em) { @content }; //600px
}
@if $breakpoint == tab-port {
@media only screen and (max-width: 56.25em) { @content }; //900px
}
@if $breakpoint == tab-land {
@media only screen and (max-width: 75em) { @content }; //1200px
}
@if $breakpoint == big-desktop {
@media only screen and (min-width: 112.5em) { @content }; //1800
}
}
styles/abstracts/_variables.scss
+3
Näytä tiedosto
@@ -0,0 +1,3 @@
// $primary-color: steelblue;
$grey-bg:#EEEEEE;
styles/base/_base.scss
+21
Näytä tiedosto
@@ -0,0 +1,21 @@
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 100%;
}
body {
box-sizing: border-box;
@include respond(tab-port) {
padding: 0;
}
}
styles/base/_typography.scss
Näytä tiedosto
styles/base/_utilities.scss
+91
Näytä tiedosto
@@ -0,0 +1,91 @@
// colors
.bg-green {
background-color: #3bb78f;
background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
}
// font size
.font-3 {
font-size: 3rem;
}
.font-1_5 {
font-size: 2rem;
}
.font-1_7{
font-size: 1.7rem;
}
.font-2{
font-size: 2.2rem;
}
.font-2_2{
font-size: 2.2rem;
}
.subtitle_1 {
font-size: 1.5rem;
}
.gap-1 {
gap: 0.7rem;
}
.banner_heading_4 {
font-size: 3rem;
}
// padding
.padding_top_14 {
padding-top: 14rem;
}
.p-6{
padding:5rem;
}
.padding_top_10 {
padding-top: 10rem; }
// heights
.vh_60{
height: 60vh;
}
.vh-77{
height: 77vh;
}
.vh-85 {
height: 85vh;
}
.vh-15 {
height: 15vh;
}
// font weight
.fw-600{
font-weight: 600;
}
.fw-700 {
font-weight: 700; }
.h-200p{
height: 200px;
}
styles/components/_button.scss
+8
Näytä tiedosto
@@ -0,0 +1,8 @@
// button
.button_dark{
clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
padding-right: 1.7rem;
padding-bottom: 0.6rem;
padding-top: 0.6rem;
border-radius: 10px;
}
styles/pages/_productOverview.scss
+68
Näytä tiedosto
@@ -0,0 +1,68 @@
.productoverviewmain{
background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
background-color: #C9DBB5;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.photo_dual {
width: 40rem;
}
.price_footer {
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 {
width: 4rem;
}
.priceCut_multi {
font-size: 0.7rem;
}
.productOverview .overviewProductHeading {
font-size: 2.1rem;
}
.productOverview .overviewProductFullTitle {
padding: 2rem 13rem;
font-size: 3rem;
}
.productOverview .overviewProductDes {
padding: 0 2rem;
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%);
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;
}
styles/style.scss
+127
Näytä tiedosto
@@ -0,0 +1,127 @@
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";
@import "base/base";
@import "base/typography";
@import "base/utilities";
// components
@import "components/button";
// pages
@import "pages/productOverview";
/*
0 - 600px: Phone
600 - 900px: Tablet portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + : Big desktop
$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop
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");
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;
}
/* 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 {
margin: 0;
padding: 0;
box-sizing: inherit;
font-family: "Orbitron" ,sans-serif;
}
.satoshi_font{
font-family: "Satoshi", sans-serif;
}
html {
font-size: 100%; }
body {
box-sizing: border-box;
overflow-x: hidden;
}
@media only screen and (max-width: 56.25em) {
body {
padding: 0; }
}
.bg-green {
background-color: #3bb78f;
background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); }
/* button */
.button_dark {
clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
padding-right: 1.7rem;
padding-bottom: 0.6rem;
padding-top: 0.6rem;
border-radius: 10px; }
/* footer */
.footer-wrapper {
background-color: rgb(0, 0, 0);
border-radius: 0 275px 0 0;
clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
}
.footer-wrapper li {
line-height: 2rem;
}