Skip to content

Commit e9a8e36

Browse files
AmolShelke2AmolShelke2
committed
Added style.css
1 parent 4ab188b commit e9a8e36

File tree

1 file changed

+247
-0
lines changed

1 file changed

+247
-0
lines changed

‎Product_landing/style.css

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
2+
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap");
3+
4+
/* for the smooth scroll */
5+
html {
6+
scroll-behavior: smooth;
7+
}
8+
9+
* {
10+
box-sizing: border-box;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
/* body */
16+
body {
17+
font-family: "Open Sans", sans-serif;
18+
/* background-color: #fff; */
19+
color: #333;
20+
}
21+
22+
/* nav bar and header section */
23+
#header {
24+
display: flex;
25+
justify-content: space-between;
26+
padding: 20px 50px;
27+
width: 100%;
28+
background-color: lightblue;
29+
}
30+
31+
#header img {
32+
width: 400px;
33+
text-align: left;
34+
}
35+
36+
#nav-bar ul {
37+
display: flex;
38+
justify-content: space-between;
39+
}
40+
41+
#nav-bar ul li {
42+
list-style: none;
43+
padding: 10px 10px;
44+
}
45+
46+
#nav-bar a {
47+
text-decoration: none;
48+
color: #000;
49+
padding: 20px;
50+
margin: 5px;
51+
font-size: 20px;
52+
}
53+
54+
/* Form section starts */
55+
#form {
56+
display: flex;
57+
flex-direction: column;
58+
text-align: center;
59+
align-items: center;
60+
justify-content: center;
61+
margin-bottom: 30px;
62+
}
63+
64+
#form h2 {
65+
text-align: center;
66+
font-size: 2rem;
67+
opacity: 0.9;
68+
padding: 20px 10px;
69+
}
70+
71+
#form input {
72+
width: 400px;
73+
margin: 5px;
74+
text-align: center;
75+
padding: 10px 5px;
76+
border: 2px solid salmon;
77+
}
78+
79+
#submit {
80+
background-color: salmon;
81+
color: #fff;
82+
font-weight: bold;
83+
cursor: pointer;
84+
text-transform: uppercase;
85+
border: 0;
86+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
87+
font-size: 16px;
88+
}
89+
/* Form section ends */
90+
91+
/* feature section */
92+
93+
#features {
94+
margin-top: 40px;
95+
margin-bottom: 40px;
96+
padding: 20px;
97+
}
98+
99+
#features .text,
100+
#features .icon {
101+
display: flex;
102+
flex-direction: column;
103+
align-items: center;
104+
text-align: center;
105+
line-height: 2;
106+
padding: 15px;
107+
}
108+
109+
/* feature icon color */
110+
#features .icon {
111+
color: salmon;
112+
font-size: 30px;
113+
}
114+
/* feaute section ends */
115+
116+
#How-it-works {
117+
display: flex;
118+
margin-top: 100px;
119+
margin-bottom: 50px;
120+
justify-content: center;
121+
align-items: center;
122+
text-align: center;
123+
border-radius: 10px;
124+
}
125+
126+
/* pricing */
127+
#pricing {
128+
display: flex;
129+
flex-direction: row;
130+
margin-top: 60px;
131+
justify-content: center;
132+
}
133+
134+
/* product */
135+
.product {
136+
display: flex;
137+
border-radius: 10px;
138+
background-color: lightblue;
139+
flex-direction: column;
140+
border: 1px solid #000;
141+
padding: 20px 30px;
142+
margin: 10px 10px;
143+
}
144+
145+
.product .level {
146+
text-align: center;
147+
font-weight: bold;
148+
text-shadow: 2px 2px 2px #fff;
149+
font-size: 30px;
150+
margin-bottom: 10px;
151+
color: black;
152+
width: 100%;
153+
text-transform: uppercase;
154+
background-color: transparent;
155+
}
156+
157+
.product h2 {
158+
text-align: center;
159+
margin-top: 10px;
160+
margin-bottom: 10px;
161+
}
162+
163+
.product ol {
164+
list-style: none;
165+
margin: 20px;
166+
display: flex;
167+
flex-direction: column;
168+
justify-content: center;
169+
align-items: center;
170+
}
171+
172+
.product li {
173+
padding-bottom: 20px;
174+
font-weight: bold;
175+
}
176+
177+
.product .btn {
178+
display: block;
179+
cursor: pointer;
180+
outline: none;
181+
position: relative;
182+
font-weight: bold;
183+
background-color: salmon;
184+
padding: 20px 30px;
185+
}
186+
187+
.btn:active {
188+
outline: none;
189+
}
190+
191+
/* footer */
192+
footer {
193+
background-color: #ddd;
194+
color: #000;
195+
padding: 20px;
196+
text-align: center;
197+
display: flex;
198+
align-items: center;
199+
justify-content: center;
200+
flex-direction: column;
201+
}
202+
203+
footer ul {
204+
display: flex;
205+
}
206+
207+
footer li {
208+
list-style: none;
209+
padding: 20px;
210+
}
211+
212+
footer a {
213+
color: #000;
214+
text-decoration: none;
215+
font-weight: bold;
216+
}
217+
218+
footer span {
219+
margin-top: 5px;
220+
display: flex;
221+
justify-content: flex-end;
222+
color: #aaa;
223+
font-weight: bold;
224+
}
225+
226+
@media screen and (max-width: 767px) {
227+
#pricing {
228+
flex-direction: column;
229+
}
230+
231+
#header img {
232+
display: none;
233+
}
234+
235+
footer ul {
236+
font-size: 20px;
237+
font-weight: bold;
238+
text-shadow: 2px 2px 2px #fff;
239+
display: flex;
240+
justify-content: center;
241+
}
242+
243+
footer span {
244+
display: flex;
245+
justify-content: center;
246+
}
247+
}

0 commit comments

Comments
 (0)