sachin.ganesh
/
anwi_website
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Sfoglia il codice sorgente

code added

sachinganesh 2 anni fa
parent
7532d035cc
commit
39f96809cc
18 ha cambiato i file con 1795 aggiunte e 29 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. BIN
      .vscode/.DS_Store
  2. 0
    0
      .vscode/.gitignore
  3. 17
    0
      .vscode/notes.html
  4. 1310
    0
      .vscode/package-lock.json
  5. 15
    0
      .vscode/package.json
  6. 3
    0
      .vscode/settings.json
  7. 38
    2
      dist/css/main.css
  8. 16
    5
      dist/css/pages/productOverview.css
  9. 22
    22
      dist/html/pages/laptopmulti.html
  10. 15
    0
      styles/abstracts/_functions.scss
  11. 41
    0
      styles/abstracts/_mixins.scss
  12. 3
    0
      styles/abstracts/_variables.scss
  13. 21
    0
      styles/base/_base.scss
  14. 0
    0
      styles/base/_typography.scss
  15. 91
    0
      styles/base/_utilities.scss
  16. 8
    0
      styles/components/_button.scss
  17. 68
    0
      styles/pages/_productOverview.scss
  18. 127
    0
      styles/style.scss

BIN
.vscode/.DS_Store Vedi File


+ 0
- 0
.vscode/.gitignore Vedi File


+ 17
- 0
.vscode/notes.html Vedi File 

@@ -0,0 +1,17 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+  <head>
4 
+    <meta charset="UTF-8" />
5 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 
+
8 
+    <link  rel="stylesheet" href="./../../libs/bootstrap/css/bootstrap.min.css" />
9 
+    <link rel="stylesheet" href="./../../css/main.css" />
10 
+    <title>project</title>
11 
+  </head>
12 
+  <body>
13 
+  <div class="bg-primary">hello</div>
14 
+
15 
+  <script src="../../libs/bootstrap/js/bootstrap.bundle.js"></script>
16 
+  </body>
17 
+</html>

+ 1310
- 0
.vscode/package-lock.json
File diff soppresso perché troppo grande
Vedi File


+ 15
- 0
.vscode/package.json Vedi File 

@@ -0,0 +1,15 @@
1 
+{
2 
+  "name": "sass_sandbox",
3 
+  "version": "1.0.0",
4 
+  "description": "",
5 
+  "main": "index.js",
6 
+  "scripts": {
7 
+    "start": "node-sass -w scss/ -o dist/css/ --recursive"
8 
+  },
9 
+  "keywords": [],
10 
+  "author": "",
11 
+  "license": "ISC",
12 
+  "dependencies": {
13 
+    "node-sass": "^4.11.0"
14 
+  }
15 
+}

+ 3
- 0
.vscode/settings.json Vedi File 

@@ -0,0 +1,3 @@
1 
+{
2 
+    "liveServer.settings.port": 5501
3 
+}

+ 38
- 2
dist/css/main.css Vedi File 

@@ -15,6 +15,8 @@ ORDER: Base + typography > general layout + grid > page layout > components
15 15
16 16 
 1em = 16px
17 17 
 */
18 
+
19 
+/* Orbitron */
18 20 
 @font-face {
19 21 
   font-family: "Orbitron";
20 22 
   src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
 
@@ -39,7 +41,28 @@ ORDER: Base + typography > general layout + grid > page layout > components
39 41 
   font-weight: 700;
40 42 
   font-style: normal;
41 43 
 }
44 
+/* Orbitron end */
45 
+/* Satoshi */
46 
+@font-face {
47 
+  font-family: "Satoshi";
48 
+  src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
49 
+  font-weight: 400;
50 
+  font-style: normal;
51 
+}
52 
+@font-face {
53 
+  font-family: "Satoshi";
54 
+  src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
55 
+  font-weight: 500;
56 
+  font-style: normal;
57 
+}
58 
+@font-face {
59 
+  font-family: "Satoshi";
60 
+  src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
61 
+  font-weight: 700;
62 
+  font-style: normal;
63 
+}
42 64
65 
+/* Satoshi end */
43 66 
 *,
44 67 
 *::after,
45 68 
 *::before {
 
@@ -50,14 +73,21 @@ ORDER: Base + typography > general layout + grid > page layout > components
50 73 
   font-family: "Orbitron" ,sans-serif;
51 74 
 }
52 75
76 
+.satoshi_font{
77 
+  font-family: "Satoshi", sans-serif;
78 
+}
79 
+
53 80 
 html {
54 81 
   font-size: 100%; }
55 82
56 83 
 body {
57 
-  box-sizing: border-box; }
84 
+  box-sizing: border-box;
85 
+  overflow-x: hidden;
86 
+}
58 87 
   @media only screen and (max-width: 56.25em) {
59 88 
     body {
60 
-      padding: 0; } }
89 
+      padding: 0; }
90 
+  }
61 91
62 92 
 .bg-green {
63 93 
   background-color: #3bb78f;
 
@@ -90,6 +120,9 @@ body {
90 120 
 .padding_top_14 {
91 121 
   padding-top: 14rem; }
92 122
123 
+.padding_top_10 {
124 
+  padding-top: 10rem; }
125 
+
93 126 
 .p-6 {
94 127 
   padding: 5rem; }
95 128 
 
@@ -108,6 +141,9 @@ body {
108 141 
 .fw-600 {
109 142 
   font-weight: 600; }
110 143
144 
+  .fw-700 {
145 
+    font-weight: 700; }
146 
+
111 147 
 .h-200p {
112 148 
   height: 200px; }
113 149 
 /* button */

+ 16
- 5
dist/css/pages/productOverview.css Vedi File 

@@ -1,18 +1,29 @@
1 1 
 .productoverviewmain{
2 2 
   background-image: url("../../assets/imgs/productoverview/productbg.png");
3 
-  background-color: #cccccc;
4 
-  background-size:     cover;                      /* <------ */
3 
+  background-color: #C9DBB5;
4 
+  background-size:     cover;
5 5 
   background-repeat:   no-repeat;
6 
-  background-position: center center;
7 
-}
6 
+  background-position: center;
7 
+
8 
+  position: relative;
9 
+}
8 10
9 11 
 .photo_dual {
10 12 
   width: 40rem;
11 13 
 }
12 14
13 15 
 .price_footer {
14 
-  background-color: #52cba5;
16 
+  background: rgba( 255, 255, 255, 0.25 );
17 
+/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
18 
+backdrop-filter: blur( 4px );
19 
+-webkit-backdrop-filter: blur( 4px );
20 
+
21 
+border: 1px solid rgba( 255, 255, 255, 0.18 );
15 22 
   border: 2px solid;
23 
+
24 
+  position: absolute;
25 
+  bottom: 0;
26 
+  left: 0;
16 27 
 }
17 28
18 29 
 .boxImgContainer {

+ 22
- 22
dist/html/pages/laptopmulti.html Vedi File 

@@ -8,44 +8,44 @@
8 8
9 9 
     <link rel="stylesheet" href="../../../libs/bootstrap/css/bootstrap.min.css" />
10 10 
     <link rel="stylesheet" href="./../../css/main.css" />
11 
-    <link rel="stylesheet" href="./../../css/pages/productOverview.css">
11 
+    <link rel="stylesheet" href="../../../styles/style.css">
12 12 
     <title>project</title>
13 13 
 </head>
14 14
15 15 
 <body>
16 16
17 
-    <header class="productoverviewmain bg-green vh-100">
17 
+    <header class="productoverviewmain  vh-100">
18 18
19 19 
         <!-- navbar -->
20 20 
         <div id="navbar-head"></div>
21 21 
         <!-- end-navbar -->
22 22
23 
-        <div class="container vh-77 text-white ">
23 
+        <div class="container h-100 text-white ">
24 24 
             <div class="row h-100">
25 
-                <div class="col-sm-4 padding_top_14 ">
26 
-                    <h1 class="banner_heading_4">Anwi XCreate</h1>
27 
-                    <div class="subtitle_1">2.5K Resolution | 120 Hz Refresh Rate</div>
25 
+                <div class="col-sm-4 padding_top_10 ">
26 
+                    <h1 class="banner_heading_4 pb-4">Anwi XCreate</h1>
27 
+                    <div class="subtitle_1 satoshi_font">2.5K Resolution | 120 Hz Refresh Rate</div>
28 28 
                 </div>
29 
-                <div class="col-sm-7 h-100">
29 
+                <!-- <div class="col-sm-7 h-100">
30 30 
                     <div class="d-flex align-items-end justify-content-end h-100">
31 31 
                         <div class="photo_dual">
32 
-                            <!-- <img class="w-100 h-100" src="./../../assets/laptop.png" alt="laptop"> -->
32 
+                            <img class="w-100 h-100" src="./../../assets/laptop.png" alt="laptop">
33 33 
                         </div>
34 34 
                     </div>
35 
-                </div>
35 
+                </div> -->
36 36 
             </div>
37 37
38 38 
         </div>
39 
-        <div class="price_footer  vh-15 py-4 ">
39 
+        <div class="price_footer py-4 w-100 ">
40 40 
             <div class="d-flex align-items-center container justify-content-between">
41 41 
                 <div class="d-flex">
42 42 
                     <div class="boxImgContainer">
43 
-                        <img class="w-100 h-100" src="./../../assets/box.png" alt="box" />
43 
+                        <img class="w-100 h-100" src="./../../assets/imgs/box.png" alt="box" />
44 44 
                     </div>
45 
-                    <div class="ps-3">
46 
-                        <div class="fw-bold">Delivery</div>
47 
-                        <div>See estimated delivery times by</div>
48 
-                        <div>entering your PIN code</div>
45 
+                    <div class="ps-3 ">
46 
+                        <div class="satoshi_font fw-700">Delivery</div>
47 
+                        <div  class="satoshi_font">See estimated delivery times by</div>
48 
+                        <div  class="satoshi_font ">entering your PIN code</div>
49 49 
                     </div>
50 50 
                 </div>
51 51 
                 <div class="d-flex align-items-center">
 
@@ -81,37 +81,37 @@
81 81 
     <div class="container PO_galleryContainer">
82 82 
         <div class="p-6 pt-0">
83 83 
             <div class="PO_gallery_display">
84 
-               <img class="PO_gallery_display_img" src="./../../assets/laptop_display.png" />
84 
+               <img class="PO_gallery_display_img" src="./../../assets/imgs/laptop_display.png" />
85 85 
             </div>
86 86 
             <div class="d-flex h-200p pt-5 justify-content-between align-items-center">
87 87 
                 <span class="PO_gallery_box h-100">
88 88 
                     <div class="PO_gallery_box_inner h-100">
89 
-                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
89 
+                        <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
90 90 
                     </div>
91 91 
                 </span>
92 92 
                 <span class="PO_gallery_box h-100">
93 93 
                     <div class="PO_gallery_box_inner h-100">
94 
-                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
94 
+                        <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
95 95 
                     </div>
96 96 
                 </span>
97 97 
                 <span class="PO_gallery_box h-100">
98 98 
                     <div class="PO_gallery_box_inner h-100">
99 
-                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
99 
+                        <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
100 100 
                     </div>
101 101 
                 </span>
102 102 
                 <span class="PO_gallery_box h-100">
103 103 
                     <div class="PO_gallery_box_inner h-100">
104 
-                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
104 
+                        <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
105 105 
                     </div>
106 106 
                 </span>
107 107 
                 <span class="PO_gallery_box h-100">
108 108 
                     <div class="PO_gallery_box_inner h-100">
109 
-                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
109 
+                        <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
110 110 
                     </div>
111 111 
                 </span>
112 112 
                 <span class="PO_gallery_box h-100">
113 113 
                     <div class="PO_gallery_box_inner h-100">
114 
-                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
114 
+                        <img class="w-100 h-100" src="./../../assets/imgs/laptop_display.png" alt="photo">
115 115 
                     </div>
116 116 
                 </span>
117 117 
             </div>

+ 15
- 0
styles/abstracts/_functions.scss Vedi File 

@@ -0,0 +1,15 @@
1 
+// Set Text Color
2 
+@function set-text-color($color) {
3 
+  @if (lightness($color) > 50) {
4 
+    @return #000;
5 
+  } @else {
6 
+    @return #fff;
7 
+  }
8 
+}
9 
+
10 
+// Transform mixin
11 
+@mixin transform($property) {
12 
+  --webkit-transform: $property;
13 
+  -ms-transform: $property;
14 
+  transform: $property;
15 
+}

+ 41
- 0
styles/abstracts/_mixins.scss Vedi File 

@@ -0,0 +1,41 @@
1 
+
2 
+@mixin absCenter {
3 
+    position: absolute;
4 
+    top: 50%;
5 
+    left: 50%;
6 
+    transform: translate(-50%, -50%);
7 
+}
8 
+
9 
+
10 
+// MEDIA QUERY MANAGER
11 
+/*
12 
+0 - 600px:      Phone
13 
+600 - 900px:    Tablet portrait
14 
+900 - 1200px:   Tablet landscape
15 
+[1200 - 1800] is where our normal styles apply
16 
+1800px + :      Big desktop
17 
+
18 
+$breakpoint arguement choices:
19 
+- phone
20 
+- tab-port
21 
+- tab-land
22 
+- big-desktop
23 
+
24 
+ORDER: Base + typography > general layout + grid > page layout > components
25 
+
26 
+1em = 16px
27 
+*/
28 
+@mixin respond($breakpoint) {
29 
+    @if $breakpoint == phone {
30 
+        @media only screen and (max-width: 37.5em) { @content };    //600px
31 
+    }
32 
+    @if $breakpoint == tab-port {
33 
+        @media only screen and (max-width: 56.25em) { @content };     //900px
34 
+    }
35 
+    @if $breakpoint == tab-land {
36 
+        @media only screen and (max-width: 75em) { @content };    //1200px
37 
+    }
38 
+    @if $breakpoint == big-desktop {
39 
+        @media only screen and (min-width: 112.5em) { @content };    //1800
40 
+    }
41 
+}

+ 3
- 0
styles/abstracts/_variables.scss Vedi File 

@@ -0,0 +1,3 @@
1 
+// $primary-color: steelblue;
2 
+
3 
+$grey-bg:#EEEEEE;

+ 21
- 0
styles/base/_base.scss Vedi File 

@@ -0,0 +1,21 @@
1 
+*,
2 
+*::after,
3 
+*::before {
4 
+    margin: 0;
5 
+    padding: 0;
6 
+    box-sizing: inherit;
7 
+}
8 
+
9 
+html {
10 
+   font-size: 100%;
11 
+}
12 
+
13 
+body {
14 
+    box-sizing: border-box;
15 
+
16 
+
17 
+    @include respond(tab-port) {
18 
+        padding: 0;
19 
+    }
20 
+}
21 
+

+ 0
- 0
styles/base/_typography.scss Vedi File


+ 91
- 0
styles/base/_utilities.scss Vedi File 

@@ -0,0 +1,91 @@
1 
+// colors
2 
+.bg-green {
3 
+  background-color: #3bb78f;
4 
+  background: linear-gradient(90deg, #3bb78f 0%, rgba(11, 171, 100, 1) 35%, rgba(59, 183, 143, 1) 100%);
5 
+}
6 
+
7 
+// font size
8 
+.font-3 {
9 
+  font-size: 3rem;
10 
+}
11 
+.font-1_5 {
12 
+  font-size: 2rem;
13 
+}
14 
+
15 
+.font-1_7{
16 
+  font-size: 1.7rem;
17 
+}
18 
+
19 
+.font-2{
20 
+  font-size: 2.2rem;
21 
+}
22 
+
23 
+.font-2_2{
24 
+  font-size: 2.2rem;
25 
+}
26 
+
27 
+
28 
+
29 
+.subtitle_1 {
30 
+  font-size: 1.5rem;
31 
+}
32 
+
33 
+.gap-1 {
34 
+  gap: 0.7rem;
35 
+}
36 
+
37 
+.banner_heading_4 {
38 
+  font-size: 3rem;
39 
+}
40 
+
41 
+
42 
+// padding
43 
+
44 
+.padding_top_14 {
45 
+  padding-top: 14rem;
46 
+}
47 
+
48 
+.p-6{
49 
+  padding:5rem;
50 
+}
51 
+
52 
+.padding_top_10 {
53 
+  padding-top: 10rem; }
54 
+
55 
+
56 
+// heights
57 
+
58 
+.vh_60{
59 
+  height: 60vh;
60 
+}
61 
+
62 
+.vh-77{
63 
+  height: 77vh;
64 
+}
65 
+
66 
+.vh-85 {
67 
+  height: 85vh;
68 
+}
69 
+
70 
+.vh-15 {
71 
+  height: 15vh;
72 
+}
73 
+
74 
+
75 
+// font weight
76 
+
77 
+.fw-600{
78 
+  font-weight: 600;
79 
+}
80 
+
81 
+
82 
+  .fw-700 {
83 
+    font-weight: 700; }
84 
+
85 
+
86 
+.h-200p{
87 
+  height: 200px;
88 
+}
89 
+
90 
+
91 
+

+ 8
- 0
styles/components/_button.scss Vedi File 

@@ -0,0 +1,8 @@
1 
+// button
2 
+.button_dark{
3 
+    clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
4 
+    padding-right: 1.7rem;
5 
+    padding-bottom: 0.6rem;
6 
+    padding-top: 0.6rem;
7 
+    border-radius: 10px;
8 
+}

+ 68
- 0
styles/pages/_productOverview.scss Vedi File 

@@ -0,0 +1,68 @@
1 
+.productoverviewmain{
2 
+  background-image: url("../../dist/assets/imgs/productoverview/productbg.png");
3 
+  background-color: #C9DBB5;
4 
+  background-size:     cover;
5 
+  background-repeat:   no-repeat;
6 
+  background-position: center;
7 
+
8 
+  position: relative;
9 
+}
10 
+
11 
+.photo_dual {
12 
+  width: 40rem;
13 
+}
14 
+
15 
+.price_footer {
16 
+  background: rgba( 255, 255, 255, 0.25 );
17 
+/* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
18 
+backdrop-filter: blur( 4px );
19 
+-webkit-backdrop-filter: blur( 4px );
20 
+
21 
+border: 1px solid rgba( 255, 255, 255, 0.18 );
22 
+  border: 2px solid;
23 
+
24 
+  position: absolute;
25 
+  bottom: 0;
26 
+  left: 0;
27 
+}
28 
+
29 
+.boxImgContainer {
30 
+  width: 4rem;
31 
+}
32 
+
33 
+.priceCut_multi {
34 
+  font-size: 0.7rem;
35 
+}
36 
+
37 
+.productOverview .overviewProductHeading {
38 
+  font-size: 2.1rem;
39 
+}
40 
+
41 
+.productOverview .overviewProductFullTitle {
42 
+  padding: 2rem 13rem;
43 
+  font-size: 3rem;
44 
+}
45 
+
46 
+.productOverview .overviewProductDes {
47 
+  padding: 0 2rem;
48 
+  font-size: 1.5rem;
49 
+}
50 
+
51 
+.PO_galleryContainer .PO_gallery_display {
52 
+  min-height: 500px;
53 
+  width: 100%;
54 
+  background: white;
55 
+  background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
56 
+  position: relative;
57 
+}
58 
+.PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
59 
+  position: absolute;
60 
+  top: 50%;
61 
+  left: 50%;
62 
+  transform: translate(-50%, -50%);
63 
+}
64 
+
65 
+.PO_galleryContainer .PO_gallery_box_inner {
66 
+  padding: 2rem;
67 
+  background-color: #eeeeee;
68 
+}

+ 127
- 0
styles/style.scss Vedi File 

@@ -0,0 +1,127 @@
1 
+@import "abstracts/functions";
2 
+@import "abstracts/mixins";
3 
+@import "abstracts/variables";
4 
+
5 
+@import "base/base";
6 
+@import "base/typography";
7 
+@import "base/utilities";
8 
+
9 
+
10 
+// components
11 
+@import "components/button";
12 
+
13 
+// pages
14 
+@import "pages/productOverview";
15 
+
16 
+/*
17 
+0 - 600px:      Phone
18 
+600 - 900px:    Tablet portrait
19 
+900 - 1200px:   Tablet landscape
20 
+[1200 - 1800] is where our normal styles apply
21 
+1800px + :      Big desktop
22 
+
23 
+$breakpoint arguement choices:
24 
+- phone
25 
+- tab-port
26 
+- tab-land
27 
+- big-desktop
28 
+
29 
+ORDER: Base + typography > general layout + grid > page layout > components
30 
+
31 
+1em = 16px
32 
+*/
33 
+
34 
+/* Orbitron */
35 
+@font-face {
36 
+    font-family: "Orbitron";
37 
+    src: url("../assets/font/orbitron/Orbitron-Regular.ttf") format("truetype");
38 
+    font-weight: 400;
39 
+    font-style: normal;
40 
+  }
41 
+  @font-face {
42 
+    font-family: "Orbitron";
43 
+    src: url("../assets/font/orbitron/Orbitron-Medium.ttf") format("truetype");
44 
+    font-weight: 500;
45 
+    font-style: normal;
46 
+  }
47 
+  @font-face {
48 
+    font-family: "Orbitron";
49 
+    src: url("../assets/font/orbitron/Orbitron-SemiBold.ttf") format("truetype");
50 
+    font-weight: 600;
51 
+    font-style: normal;
52 
+  }
53 
+  @font-face {
54 
+    font-family: "Orbitron";
55 
+    src: url("../assets/font/orbitron/Orbitron-Bold.ttf") format("truetype");
56 
+    font-weight: 700;
57 
+    font-style: normal;
58 
+  }
59 
+  /* Orbitron end */
60 
+  /* Satoshi */
61 
+  @font-face {
62 
+    font-family: "Satoshi";
63 
+    src: url("../assets/font/satoshi/Satoshi-Regular.ttf") format("truetype");
64 
+    font-weight: 400;
65 
+    font-style: normal;
66 
+  }
67 
+  @font-face {
68 
+    font-family: "Satoshi";
69 
+    src: url("../assets/font/satoshi/Satoshi-Medium.ttf") format("truetype");
70 
+    font-weight: 500;
71 
+    font-style: normal;
72 
+  }
73 
+  @font-face {
74 
+    font-family: "Satoshi";
75 
+    src: url("../assets/font/satoshi/Satoshi-Bold.ttf") format("truetype");
76 
+    font-weight: 700;
77 
+    font-style: normal;
78 
+  }
79 
+
80 
+  /* Satoshi end */
81 
+  *,
82 
+  *::after,
83 
+  *::before {
84 
+    margin: 0;
85 
+    padding: 0;
86 
+    box-sizing: inherit;
87 
+
88 
+    font-family: "Orbitron" ,sans-serif;
89 
+  }
90 
+
91 
+  .satoshi_font{
92 
+    font-family: "Satoshi", sans-serif;
93 
+  }
94 
+
95 
+  html {
96 
+    font-size: 100%; }
97 
+
98 
+  body {
99 
+    box-sizing: border-box;
100 
+    overflow-x: hidden;
101 
+  }
102 
+    @media only screen and (max-width: 56.25em) {
103 
+      body {
104 
+        padding: 0; }
105 
+    }
106 
+
107 
+  .bg-green {
108 
+    background-color: #3bb78f;
109 
+    background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); }
110 
+
111 
+
112 
+  /* button */
113 
+  .button_dark {
114 
+    clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
115 
+    padding-right: 1.7rem;
116 
+    padding-bottom: 0.6rem;
117 
+    padding-top: 0.6rem;
118 
+    border-radius: 10px; }
119 
+  /* footer */
120 
+  .footer-wrapper {
121 
+    background-color: rgb(0, 0, 0);
122 
+    border-radius: 0 275px 0 0;
123 
+    clip-path: polygon(100% 0%, 100% 0%, 81% 100%, 92% -95%, 100% 100%, 0 100%, 0% 70%, 0 0);
124 
+  }
125 
+  .footer-wrapper li {
126 
+    line-height: 2rem;
127 
+  }

Write Preview
Loading…
Annulla
Salva