Skip to content

Commit 0a5c515

Browse files
author
Projdct-Web-Shopee-Website
committed
init project
0 parents  commit 0a5c515

File tree

12 files changed

+3521
-0
lines changed

12 files changed

+3521
-0
lines changed

‎BuildWebShoppe.html‎

Lines changed: 1718 additions & 0 deletions
Large diffs are not rendered by default.

‎assets/css/base.css‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
:root{
2+
--white-color: #fff;
3+
--black-color: #000;
4+
--text-color: #333;
5+
--primary-color: #EE4D2d;
6+
/* --primary-color-rgba: rgb(238, 75, 43); */
7+
--border-color: #dbdbdb;
8+
--navbar-height: 34px;
9+
--header-height: 120px;
10+
--header-with-search-height: calc(var(--header-height) - var(--navbar-height));
11+
--star-gold-color: #FFCE3E;
12+
}
13+
14+
* {
15+
16+
}
17+
18+
html{
19+
font-size: 62.5%;
20+
/* 100% = 1rem = 16px */
21+
/* 62.5% = 1rem = 10px */
22+
line-height: 1.6rem;
23+
font-family: 'Roboto',sans-serif;
24+
box-sizing: border-box;
25+
}
26+
27+
body{
28+
line-height: 2.3rem;
29+
}
30+
31+
p{
32+
font-size: 1.6rem;
33+
/* 1.6rem = 16px */
34+
/* 1rem = 100% = 16px */
35+
36+
}
37+
38+
.grid{
39+
width: 1200px;
40+
max-width: 100%;
41+
margin: 0 auto;
42+
43+
}
44+
45+
.grid__full{
46+
width: 100%;
47+
}
48+
49+
.grid__row{
50+
display: flex;
51+
flex-wrap: wrap;
52+
}
53+
54+
.grid__column-2-4{
55+
padding-left: 12px;
56+
padding-right: 12px;
57+
width: 16%;
58+
}
59+
60+
.grid__column-10{
61+
padding-left: 12px;
62+
padding-right: 12px;
63+
width: 80%;
64+
}
65+
66+
67+
68+
69+
/* Animation */
70+
@keyframes fadeIn{
71+
from {
72+
opacity: 0;
73+
}
74+
to {
75+
opacity: 1;
76+
}
77+
}
78+
79+
@keyframes growth {
80+
from{
81+
/* height: 0;
82+
*/
83+
/* transform: scale(var(--growth-form)); */
84+
opacity: 0;
85+
}
86+
to{
87+
opacity: 1;
88+
/* height: var(--percent); */
89+
/* transform: scale(var(--growth-to)); */
90+
91+
}
92+
}
93+
94+
/* Modal */
95+
.modal{
96+
position: fixed;
97+
top: 0;
98+
right: 0;
99+
bottom: 0;
100+
left: 0;
101+
display: none;
102+
animation: growth linear 0.9s;
103+
104+
}
105+
.modal__overlay{
106+
position: absolute;
107+
width: 100%;
108+
height: 100%;
109+
background-color: rgba(0,0,0, 0.4);
110+
display: none;
111+
/* z-index: 1; */
112+
/* animation: growth linear 0.4s; */
113+
}
114+
115+
.modal__body{
116+
/* width: 300px; */
117+
/* height: 300px; */
118+
background-color: var(--white-color);
119+
background-color: #fff;
120+
margin: auto;
121+
position: relative;
122+
z-index: 1;
123+
border-radius: 5px;
124+
--growth-form: 0.7;
125+
--growth-to: 1;
126+
}
127+
128+
.btn{
129+
min-width: 142px;
130+
height: 34px;
131+
text-decoration: none;
132+
border: none;
133+
border-radius: 2px;
134+
font-size: 1.4rem;
135+
padding: 0;
136+
outline: none;
137+
cursor: pointer;
138+
color: var(--text-color);
139+
display: flex;
140+
justify-content: center;
141+
align-items: center;
142+
color: #fff;
143+
/* background-color: rgba(0,0,0,0.05); */
144+
}
145+
146+
.btn.btn--normal:hover{
147+
background-color: rgba(0,0,0,0.07);
148+
}
149+
150+
151+
152+
.btn.btn--primary{
153+
background-color: var(--primary-color);
154+
color: var(--white-color);
155+
156+
}
157+
158+
.btn.btn--primary:hover{
159+
opacity:0.9;
160+
}
161+
162+
.btn.btn--disable{
163+
cursor: default;
164+
filter: brightness(80%);
165+
background-color: #999;
166+
color: #ccc;
167+
168+
}
169+
170+
.btn.btn--size-s{
171+
height: 30px;
172+
/* font-size: 12px; */
173+
padding: 0 10px;
174+
}
175+
176+
.btn--facebook{
177+
background-color: #3A5A98;
178+
}
179+
180+
.btn--google{
181+
background-color: #fff;
182+
color: rgba(0,0,0,0.8);
183+
}
184+
185+
/* Selection */
186+
.select-input{
187+
height: 34px;
188+
padding: 0 12px;
189+
border-radius: 2px;
190+
background-color: var(--white-color);
191+
display: flex;
192+
align-items: center;
193+
justify-content: space-between;
194+
margin: 0 5px;
195+
}
196+
197+
.select-input__label{
198+
font-size: 1.4rem;
199+
margin-right: 140px;
200+
}
201+
202+
.select-input__icon{
203+
font-size: 1.4rem;
204+
color: rgba(131,131,131);
205+
/* margin: 0 16px 0 8px; */
206+
position: relative;
207+
top: 1px;
208+
}
209+
210+
.select-input__list{
211+
position: absolute;
212+
left: 40%;
213+
right: 313px;
214+
top: 30%;
215+
border-radius: 2px;
216+
background-color: var(--white-color);
217+
padding: 8px 16px;
218+
list-style: none;
219+
transform: translateX(119%);
220+
display: none;
221+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
222+
}
223+
224+
.select-input:hover .select-input__list{
225+
display: block;
226+
}
227+
228+
.select-input__link{
229+
font-size: 1.4rem;
230+
color:var(--text-color);
231+
text-decoration: none;
232+
display: block;
233+
padding: 5px 0;
234+
235+
}
236+
237+
.select-input__link:hover{
238+
color: var(--primary-color);
239+
}
240+

0 commit comments

Comments
 (0)