sachin.ganesh
/
anwi_website
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

code

sachinganesh 2 年前
父节点
cac18aed87
当前提交
34b451c0b6
共有 16 个文件被更改，包括 55 次插入 和 1572 次删除
分列视图 显示文件统计
  1. 二进制
      .DS_Store
  2. 0
    0
      .gitignore
  3. 16
    2
      dist/css/main.css
  4. 39
    5
      dist/html/pages/laptopmulti.html
  5. 0
    17
      notes.html
  6. 0
    1310
      package-lock.json
  7. 0
    15
      package.json
  8. 0
    15
      scss/abstracts/_functions.scss
  9. 0
    41
      scss/abstracts/_mixins.scss
  10. 0
    2
      scss/abstracts/_variables.scss
  11. 0
    21
      scss/base/_base.scss
  12. 0
    0
      scss/base/_typography.scss
  13. 0
    78
      scss/base/_utilities.scss
  14. 0
    8
      scss/components/__button.scss
  15. 0
    14
      scss/main.scss
  16. 0
    44
      scss/pages/productOverview.scss

二进制
.DS_Store 查看文件


+ 0
- 0
.gitignore 查看文件


+ 16
- 2
dist/css/main.css 查看文件 

@@ -80,6 +80,9 @@ body {
80 80 
 .fw-600 {
81 81 
   font-weight: 600; }
82 82
83 
+.h-200p {
84 
+  height: 200px; }
85 
+
83 86 
 .button_dark {
84 87 
   clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
85 88 
   padding-right: 1.7rem;
 
@@ -91,7 +94,8 @@ body {
91 94 
   width: 40rem; }
92 95
93 96 
 .price_footer {
94 
-  background-color: #52cba5; }
97 
+  background-color: #52cba5;
98 
+  border: 2px solid; }
95 99
96 100 
 .boxImgContainer {
97 101 
   width: 4rem; }
 
@@ -114,4 +118,14 @@ body {
114 118 
   min-height: 500px;
115 119 
   width: 100%;
116 120 
   background: white;
117 
-  background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); }
121 
+  background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
122 
+  position: relative; }
123 
+  .PO_galleryContainer .PO_gallery_display .PO_gallery_display_img {
124 
+    position: absolute;
125 
+    top: 50%;
126 
+    left: 50%;
127 
+    transform: translate(-50%, -50%); }
128 
+
129 
+.PO_galleryContainer .PO_gallery_box_inner {
130 
+  padding: 2rem;
131 
+  background-color: #EEEEEE; }

+ 39
- 5
dist/html/pages/laptopmulti.html 查看文件 

@@ -13,7 +13,7 @@
13 13
14 14 
 <body>
15 15
16 
-    <header class=" bg-green">
16 
+    <header class=" bg-green vh-100">
17 17
18 18 
         <!-- navbar -->
19 19 
         <div id="navbar-head"></div>
 
@@ -80,15 +80,49 @@
80 80 
     <div class="container PO_galleryContainer">
81 81 
         <div class="p-6 pt-0">
82 82 
             <div class="PO_gallery_display">
83 
-               <img src="./../../assets/" />
83 
+               <img class="PO_gallery_display_img" src="./../../assets/laptop_display.png" />
84 84 
             </div>
85 
-            <div>
86 
-                box
85 
+            <div class="d-flex h-200p pt-5 justify-content-between align-items-center">
86 
+                <span class="PO_gallery_box h-100">
87 
+                    <div class="PO_gallery_box_inner h-100">
88 
+                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
89 
+                    </div>
90 
+                </span>
91 
+                <span class="PO_gallery_box h-100">
92 
+                    <div class="PO_gallery_box_inner h-100">
93 
+                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
94 
+                    </div>
95 
+                </span>
96 
+                <span class="PO_gallery_box h-100">
97 
+                    <div class="PO_gallery_box_inner h-100">
98 
+                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
99 
+                    </div>
100 
+                </span>
101 
+                <span class="PO_gallery_box h-100">
102 
+                    <div class="PO_gallery_box_inner h-100">
103 
+                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
104 
+                    </div>
105 
+                </span>
106 
+                <span class="PO_gallery_box h-100">
107 
+                    <div class="PO_gallery_box_inner h-100">
108 
+                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
109 
+                    </div>
110 
+                </span>
111 
+                <span class="PO_gallery_box h-100">
112 
+                    <div class="PO_gallery_box_inner h-100">
113 
+                        <img class="w-100 h-100" src="./../../assets/laptop_display.png" alt="photo">
114 
+                    </div>
115 
+                </span>
87 116 
             </div>
88 117 
         </div>
89 118 
     </div>
90 
-
91 119 
     <!-- photos display end -->
120 
+
121 
+
122 
+    <!-- specs  -->
123 
+
124 
+    <!-- specs end -->
125 
+
92 126 
     <!-- footer -->
93 127 
     <div id="footer-head"></div>
94 128 
     <!-- end-footer -->

+ 0
- 17
notes.html 查看文件 

@@ -1,17 +0,0 @@
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>

+ 0
- 1310
package-lock.json
文件差异内容过多而无法显示
查看文件


+ 0
- 15
package.json 查看文件 

@@ -1,15 +0,0 @@
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 
-}

+ 0
- 15
scss/abstracts/_functions.scss 查看文件 

@@ -1,15 +0,0 @@
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 
-}

+ 0
- 41
scss/abstracts/_mixins.scss 查看文件 

@@ -1,41 +0,0 @@
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 
-}

+ 0
- 2
scss/abstracts/_variables.scss 查看文件 

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

+ 0
- 21
scss/base/_base.scss 查看文件 

@@ -1,21 +0,0 @@
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 查看文件


+ 0
- 78
scss/base/_utilities.scss 查看文件 

@@ -1,78 +0,0 @@
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 
-
53 
-
54 
-
55 
-// heights
56 
-
57 
-.vh_60{
58 
-  height: 60vh;
59 
-}
60 
-
61 
-.vh-77{
62 
-  height: 77vh;
63 
-}
64 
-
65 
-.vh-85 {
66 
-  height: 85vh;
67 
-}
68 
-
69 
-.vh-15 {
70 
-  height: 15vh;
71 
-}
72 
-
73 
-
74 
-// font weight
75 
-
76 
-.fw-600{
77 
-  font-weight: 600;
78 
-}

+ 0
- 8
scss/components/__button.scss 查看文件 

@@ -1,8 +0,0 @@
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 
-}

+ 0
- 14
scss/main.scss 查看文件 

@@ -1,14 +0,0 @@
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.scss";

+ 0
- 44
scss/pages/productOverview.scss 查看文件 

@@ -1,44 +0,0 @@
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 
-
20 
-.productOverview{
21 
-  .overviewProductHeading{
22 
-    font-size: 2.1rem;
23 
-  }
24 
-
25 
-  .overviewProductFullTitle{
26 
-    padding: 2rem 13rem;
27 
-    font-size: 3rem;
28 
-  }
29 
-
30 
-  .overviewProductDes{
31 
-    padding: 0 2rem;
32 
-    font-size: 1.5rem;
33 
-  }
34 
-}
35 
-
36 
-.PO_galleryContainer{
37 
-  .PO_gallery_display{
38 
-    min-height: 500px;
39 
-    width: 100%;
40 
-
41 
-    background: rgb(255,255,255);
42 
-    background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%);
43 
-  }
44 
-}

撰写 预览
正在加载...
取消
保存