Skip to content

Commit d43ef4f

Browse files
saloni-15saloni-15
authored
Create style.css
1 parent 9afeb58 commit d43ef4f

File tree

1 file changed

+300
-0
lines changed

1 file changed

+300
-0
lines changed

‎Product Landing Page/style.css

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
body {
2+
margin: auto;
3+
background-color: #7868e6;
4+
font-family: "Red Hat Display", sans-serif;
5+
color: #e4fbff;
6+
}
7+
ul {
8+
padding: 0;
9+
width: 100%;
10+
margin-top: 0%;
11+
margin-bottom: 1%;
12+
}
13+
a {
14+
text-decoration: none;
15+
color: #7868e6;
16+
}
17+
a:hover {
18+
color: #b8b5ff;
19+
}
20+
input[type="email"],
21+
.top-button {
22+
display: block;
23+
margin: auto;
24+
font-family: "Red Hat Display", sans-serif;
25+
}
26+
input[type="email"] {
27+
padding: 0.5% 2%;
28+
width: 25%;
29+
border: none;
30+
margin-bottom: 2%;
31+
font-size: 1rem;
32+
}
33+
#video {
34+
margin: auto;
35+
margin-top: 50px;
36+
margin-bottom: 50px;
37+
width: 40%;
38+
}
39+
#price-box {
40+
width: 70%;
41+
margin: auto;
42+
display: grid;
43+
grid-template-areas: "price1 price2 price3";
44+
color: #e4fbff;
45+
}
46+
#heading {
47+
text-align: center;
48+
font-size: 2rem;
49+
}
50+
#header {
51+
display: grid;
52+
grid-template-columns: auto auto;
53+
align-items: center;
54+
overflow: hidden;
55+
position: fixed; /* Set the navbar to fixed position */
56+
top: 0; /* Position the navbar at the top of the page */
57+
width: 100%; /*Full width */
58+
background: #e4fbff;
59+
margin: auto;
60+
z-index: 1;
61+
}
62+
#brand-name {
63+
display: flex;
64+
align-items: center;
65+
}
66+
#header-img {
67+
height: 4rem;
68+
margin-left: 3%;
69+
padding-left: 15px;
70+
color: white;
71+
}
72+
#header-text {
73+
font-family: "Berkshire Swash", cursive;
74+
color: black;
75+
margin-left: 1%;
76+
margin-bottom: 2%;
77+
margin-top: 2%;
78+
}
79+
#nav-bar {
80+
justify-self: end;
81+
padding: 2% 4%;
82+
}
83+
#container {
84+
overflow: hidden;
85+
height: auto;
86+
width: 80%;
87+
/* background-color: yellow; */
88+
margin: auto;
89+
margin-top: 8%;
90+
}
91+
.video-box {
92+
display: flex;
93+
flex-direction: column;
94+
justify-content: center;
95+
background-color: #e4fbff;
96+
}
97+
.top-button {
98+
width: 100px;
99+
padding: 0.5%;
100+
border-radius: 10px;
101+
border: 2px solid #e4fbff;
102+
background-color: #7868e6;
103+
color: #e4fbff;
104+
font-size: 1rem;
105+
margin-top: 2%;
106+
}
107+
.top-button:hover {
108+
background-color: #e4fbff;
109+
color: #7868e6;
110+
}
111+
.feature-box {
112+
margin-top: 5%;
113+
}
114+
.feature-item {
115+
width: 70%;
116+
margin: auto;
117+
display: grid;
118+
grid-template-areas:
119+
"photo big-text"
120+
"photo small-text";
121+
}
122+
.item1 {
123+
grid-area: photo;
124+
justify-self: center;
125+
align-self: center;
126+
}
127+
.item2 {
128+
grid-area: big-text;
129+
}
130+
.item3 {
131+
grid-area: small-text;
132+
}
133+
.feature-img {
134+
margin: auto;
135+
height: 72px;
136+
width: 72px;
137+
padding: 20px 0 20 px 60px;
138+
}
139+
.big-text {
140+
position: relative;
141+
top: 15px;
142+
font-size: 1.8rem;
143+
margin-left: 5%;
144+
}
145+
.small-text {
146+
position: relative;
147+
margin-left: 5%;
148+
bottom: 20px;
149+
font-size: 1rem;
150+
}
151+
.price-1 {
152+
grid-area: price1;
153+
}
154+
.price-2 {
155+
grid-area: price2;
156+
}
157+
.price-3 {
158+
grid-area: price3;
159+
}
160+
.price-box-style {
161+
text-align: center;
162+
border: 1px solid black;
163+
width: 80%;
164+
background-color: #b8b5ff;
165+
margin: 10px 1px;
166+
justify-self: center;
167+
border-radius: 5px;
168+
}
169+
.price-heading {
170+
font-size: 1.2rem;
171+
font-weight: bold;
172+
background-color: #7868e6;
173+
margin: auto;
174+
padding: 10px;
175+
}
176+
.price-button {
177+
font-size: 1rem;
178+
padding: 2% 8%;
179+
margin-bottom: 10px;
180+
background-color: #e4fbff;
181+
border: none;
182+
color: #7868e6;
183+
}
184+
.price-button:hover {
185+
background-color: #7868e6;
186+
color: #e4fbff;
187+
padding: 1% 6%;
188+
}
189+
.footer {
190+
margin-top: 80px;
191+
width: 100%;
192+
height: 90px;
193+
background-color: #7868e6;
194+
display: flex;
195+
justify-content: center;
196+
}
197+
.footer-list {
198+
padding: 20px 20px;
199+
color: #e4fbff;
200+
font-size: 0.8rem;
201+
}
202+
.nav-link {
203+
text-decoration: none;
204+
list-style: none;
205+
display: inline;
206+
padding: 0 15px;
207+
font-family: "Red Hat Display", sans-serif;
208+
font-size: 1.2rem;
209+
}
210+
@media (max-width: 767px) {
211+
input[type="email"] {
212+
padding: 0.5% 2%;
213+
width: 50%;
214+
border: none;
215+
font-size: 0.8rem;
216+
}
217+
218+
#heading {
219+
font-size: 1.4rem;
220+
}
221+
#header {
222+
display: block;
223+
text-align: center;
224+
}
225+
#brand-name {
226+
display: block;
227+
margin: auto;
228+
}
229+
#header-img {
230+
height: 3.5rem;
231+
margin-left: 0%;
232+
padding-left: 0;
233+
}
234+
#header-text {
235+
font-family: "Berkshire Swash", cursive;
236+
margin-left: 0;
237+
padding-right: 0;
238+
margin-top: -1%;
239+
}
240+
#container {
241+
width: 100%;
242+
margin-top: 30%;
243+
}
244+
.top-button {
245+
width: 80px;
246+
padding: 0.7%;
247+
font-size: 0.7rem;
248+
margin-top: 3%;
249+
}
250+
.nav-link {
251+
font-size: 1rem;
252+
padding: 5px;
253+
justify-self: center;
254+
}
255+
}
256+
@media (max-width: 506px) {
257+
#container {
258+
width: 100%;
259+
margin-top: 42%;
260+
}
261+
262+
.feature-item {
263+
text-align: center;
264+
grid-template-areas:
265+
"photo photo"
266+
"big-text big-text"
267+
"small-text small-text";
268+
}
269+
.feature-img {
270+
height: 64px;
271+
width: 64px;
272+
margin-top: 20px;
273+
}
274+
.big-text {
275+
top: 0px;
276+
font-size: 1.2rem;
277+
}
278+
.small-text {
279+
bottom: 10px;
280+
font-size: 0.8rem;
281+
}
282+
}
283+
@media (max-width: 820px) {
284+
#price-box {
285+
width: 100%;
286+
margin: auto;
287+
display: grid;
288+
grid-template-areas:
289+
"price1"
290+
"price2"
291+
"price3";
292+
color: #e4fbff;
293+
}
294+
#video {
295+
width: 100%;
296+
}
297+
.price-box-style {
298+
width: 50%;
299+
}
300+
}

0 commit comments

Comments
 (0)