sachin.ganesh
/
anwi_website
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Pārlūkot izejas kodu

add folders

sachinganesh 2 gadus atpakaļ
vecāks
90cb591de3
revīzija
6b59fa580e
13 mainītis faili ar 224 papildinājumiem un 103 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 54
    24
      dist/css/main.css
  2. 3
    3
      dist/html/pages/index.html
  3. 24
    0
      dist/html/pages/laptopmulti.html
  4. 0
    6
      scss/_variables.scss
  5. 0
    0
      scss/abstracts/_functions.scss
  6. 41
    0
      scss/abstracts/_mixins.scss
  7. 2
    0
      scss/abstracts/_variables.scss
  8. 21
    0
      scss/base/_base.scss
  9. 0
    0
      scss/base/_typography.scss
  10. 42
    0
      scss/base/_utilities.scss
  11. 8
    0
      scss/components/__button.scss
  12. 10
    70
      scss/main.scss
  13. 19
    0
      scss/pages/productOverview.scss

+ 54
- 24
dist/css/main.css Parādīt failu 

@@ -1,32 +1,57 @@
1 
-*, ::before, ::after {
2 
-  padding: 0;
1 
+/*
2 
+0 - 600px:      Phone
3 
+600 - 900px:    Tablet portrait
4 
+900 - 1200px:   Tablet landscape
5 
+[1200 - 1800] is where our normal styles apply
6 
+1800px + :      Big desktop
7 
+
8 
+$breakpoint arguement choices:
9 
+- phone
10 
+- tab-port
11 
+- tab-land
12 
+- big-desktop
13 
+
14 
+ORDER: Base + typography > general layout + grid > page layout > components
15 
+
16 
+1em = 16px
17 
+*/
18 
+*,
19 
+*::after,
20 
+*::before {
3 21 
   margin: 0;
4 
-  box-sizing: border-box; }
22 
+  padding: 0;
23 
+  box-sizing: inherit; }
5 24
6 25 
 html {
7 
-  font-size: 16px; }
26 
+  font-size: 100%; }
27 
+
28 
+body {
29 
+  box-sizing: border-box; }
30 
+  @media only screen and (max-width: 56.25em) {
31 
+    body {
32 
+      padding: 0; } }
8 33
9 34 
 .bg-green {
10 
-  background-color: #3BB78F;
11 
-  background: linear-gradient(90deg, #3BB78F 0%, #0bab64 35%, #3bb78f 100%); }
35 
+  background-color: #3bb78f;
36 
+  background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); }
12 37
13 
-.banner_heading_4 {
38 
+.font-3 {
14 39 
   font-size: 3rem; }
15 40
41 
+.font-1_5 {
42 
+  font-size: 2rem; }
43 
+
16 44 
 .subtitle_1 {
17 45 
   font-size: 1.5rem; }
18 46
19 
-.padding_top_14 {
20 
-  padding-top: 14rem; }
21 
-
22 
-.photo_dual {
23 
-  width: 40rem; }
47 
+.gap-1 {
48 
+  gap: 0.7rem; }
24 49
25 
-.price_footer {
26 
-  background-color: #52cba5; }
50 
+.banner_heading_4 {
51 
+  font-size: 3rem; }
27 52
28 
-.boxImgContainer {
29 
-  width: 4rem; }
53 
+.padding_top_14 {
54 
+  padding-top: 14rem; }
30 55
31 56 
 .vh-85 {
32 57 
   height: 85vh; }
 
@@ -34,16 +59,21 @@ html {
34 59 
 .vh-15 {
35 60 
   height: 15vh; }
36 61
37 
-.font-3 {
38 
-  font-size: 3rem; }
62 
+.button_dark {
63 
+  clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
64 
+  padding-right: 1.7rem;
65 
+  padding-bottom: 0.6rem;
66 
+  padding-top: 0.6rem;
67 
+  border-radius: 10px; }
39 68
40 
-.font-1_5 {
41 
-  font-size: 2rem; }
69 
+.photo_dual {
70 
+  width: 40rem; }
42 71
43 
-.gap-1 {
44 
-  font-size: 0.7rem; }
72 
+.price_footer {
73 
+  background-color: #52cba5; }
74 
+
75 
+.boxImgContainer {
76 
+  width: 4rem; }
45 77
46 78 
 .priceCut_multi {
47 79 
   font-size: .7rem; }
48 
-
49 
-

+ 3
- 3
dist/html/pages/index.html Parādīt failu 

@@ -30,9 +30,9 @@
30 30 
     <div id="footer-head"></div>
31 31 
     <!-- end-footer -->
32 32 
     <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
33 
-    <script src="../../Js/jquery.min.js"></script>
34 
-    <script src="../../Js/navbar.js"></script>
35 
-    <script src="../../Js/footer.js"></script>
33 
+    <script src="../../js/jquery.min.js"></script>
34 
+    <script src="../../js/navbar.js"></script>
35 
+    <script src="../../js/footer.js"></script>
36 36 
   </body>
37 37
38 38 
 </html>

+ 24
- 0
dist/html/pages/laptopmulti.html Parādīt failu 

@@ -12,7 +12,13 @@
12 12 
 </head>
13 13
14 14 
 <body>
15 
+
15 16 
     <header class=" bg-green">
17 
+
18 
+            <!-- navbar -->
19 
+            <div id="navbar-head"></div>
20 
+            <!-- end-navbar -->
21 
+
16 22 
         <div class="container vh-85 text-white ">
17 23 
             <div class="row h-100">
18 24 
                 <div class="col-sm-4 padding_top_14 ">
 
@@ -59,8 +65,26 @@
59 65 
         </div>
60 66
61 67 
     </header>
68 
+    <section class="productOverview container">
69 
+       <div class=" d-flex align-items-center container justify-content-between">
70 
+        <div>Overview</div>
71 
+        <div>The Laptop of tomorrow with
72 
+            4K OLED Dual Screen for Creative Multitasking</div>
73 
+            <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
74 
+                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit
75 
+                amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>
76 
+       </div>
77 
+    </section>
78 
+
79 
+       <!-- footer -->
80 
+       <div id="footer-head"></div>
81 
+       <!-- end-footer -->
62 82
63 83 
     <script src="../../../libs/bootstrap/js/bootstrap.bundle.min.js"></script>
84 
+    <script src="../../js/jquery.min.js"></script>
85 
+    <script src="../../js/navbar.js"></script>
86 
+    <script src="../../js/footer.js"></script>
87 
+
64 88 
 </body>
65 89
66 90 
 </html>

+ 0
- 6
scss/_variables.scss Parādīt failu 

@@ -1,6 +0,0 @@
1 
-$primary-color: steelblue;
2 
-$secondary-color: skyblue;
3 
-$light-color: #f4f4f4;
4 
-$dark-color: #333;
5 
-$font-stack: Arial, Helvetica, sans-serif;
6 
-

scss/_functions.scss → scss/abstracts/_functions.scss Parādīt failu


+ 41
- 0
scss/abstracts/_mixins.scss Parādīt failu 

@@ -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 
+}

+ 2
- 0
scss/abstracts/_variables.scss Parādīt failu 

@@ -0,0 +1,2 @@
1 
+// $primary-color: steelblue;
2 
+

+ 21
- 0
scss/base/_base.scss Parādīt failu 

@@ -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
scss/base/_typography.scss Parādīt failu


+ 42
- 0
scss/base/_utilities.scss Parādīt failu 

@@ -0,0 +1,42 @@
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 
+.subtitle_1 {
16 
+  font-size: 1.5rem;
17 
+}
18 
+
19 
+.gap-1 {
20 
+  gap: 0.7rem;
21 
+}
22 
+
23 
+.banner_heading_4 {
24 
+  font-size: 3rem;
25 
+}
26 
+
27 
+
28 
+// padding
29 
+
30 
+.padding_top_14 {
31 
+  padding-top: 14rem;
32 
+}
33 
+
34 
+// heights
35 
+
36 
+.vh-85 {
37 
+  height: 85vh;
38 
+}
39 
+
40 
+.vh-15 {
41 
+  height: 15vh;
42 
+}

+ 8
- 0
scss/components/__button.scss Parādīt failu 

@@ -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 
+}

+ 10
- 70
scss/main.scss Parādīt failu 

@@ -1,74 +1,14 @@
1 
-@import 'variables';
2 
-@import 'functions';
1 
+@import "abstracts/functions";
2 
+@import "abstracts/mixins";
3 
+@import "abstracts/variables";
3 4
4 
-*,::before,::after{
5 
-  padding: 0;
6 
-  margin: 0;
7 
-  box-sizing: border-box;
8 
-
9 
-}
5 
+@import "base/base";
6 
+@import "base/typography";
7 
+@import "base/utilities";
10 8
11 
-html{
12 
-  font-size: 16px;
13 
-}
14 9
15 
-.bg-green{
16 
-  background-color:#3BB78F;
17 
-  background: linear-gradient(90deg, #3BB78F 0%, rgba(11,171,100,1) 35%, rgba(59,183,143,1) 100%);
18 
-}
10 
+// components
11 
+@import "components/_button";
19 12
20 
-.banner_heading_4{
21 
-  font-size: 3rem;
22 
-}
23 
-
24 
-.subtitle_1{
25 
-  font-size: 1.5rem;
26 
-}
27 
-
28 
-.padding_top_14{
29 
-  padding-top: 14rem;
30 
-}
31 
-
32 
-.photo_dual{
33 
-  width:40rem;
34 
-}
35 
-
36 
-.price_footer{
37 
-  background-color:#52cba5;
38 
-}
39 
-
40 
-.boxImgContainer{
41 
-  width: 4rem;
42 
-
43 
-}
44 
-
45 
-.vh-85{
46 
-  height: 85vh;
47 
-}
48 
-
49 
-.vh-15{
50 
-  height: 15vh;
51 
-}
52 
-
53 
-.font-3{
54 
-  font-size: 3rem;
55 
-}
56 
-.font-1_5{
57 
-  font-size: 2rem;
58 
-}
59 
-
60 
-.gap-1{
61 
-  font-size: 0.7rem;
62 
-}
63 
-
64 
-.priceCut_multi{
65 
-  font-size: .7rem;
66 
-}
67 
-// button
68 
-.button_dark{
69 
-  clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
70 
-  padding-right: 1.7rem;
71 
-  padding-bottom: 0.6rem;
72 
-  padding-top: 0.6rem;
73 
-  border-radius: 10px;
74 
-}
13 
+// pages
14 
+@import "pages/productOverview.scss";

+ 19
- 0
scss/pages/productOverview.scss Parādīt failu 

@@ -0,0 +1,19 @@
1 
+.photo_dual{
2 
+    width:40rem;
3 
+  }
4 
+
5 
+  .price_footer{
6 
+    background-color:#52cba5;
7 
+  }
8 
+
9 
+  .boxImgContainer{
10 
+    width: 4rem;
11 
+
12 
+  }
13 
+
14 
+
15 
+
16 
+  .priceCut_multi{
17 
+    font-size: .7rem;
18 
+  }
19 
+

Rakstīt Priekšskatītījums
Notiek ielāde…
Atcelt
Saglabāt