Skip to content

Commit 9f9428b

Browse files
55Pranjal55Pranjal
committed
first commit
0 parents  commit 9f9428b

File tree

4 files changed

+211
-0
lines changed

4 files changed

+211
-0
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎index.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Pricing card</title>
14+
</head>
15+
<body>
16+
<div id="main-container">
17+
<div id="top">
18+
<h2>Join our community</h2>
19+
<h4>30-day, hassle-free money back guarantee</h4>
20+
<p>
21+
Gain access to our full library of tutorials along with expert code
22+
reviews.Perfect for any developers who are serious about honing their
23+
skills.
24+
</p>
25+
</div>
26+
<div id="bottom">
27+
<div id="bottom-left">
28+
<h4>Monthly Subscription</h4>
29+
<div id="price-container">
30+
<div id="price">$29</div>
31+
<div id="price-month">per month</div>
32+
</div>
33+
<p>Full access for less than $1 a day</p>
34+
<button onclick="alertUser()">Sign Up</button>
35+
</div>
36+
<div id="bottom-right">
37+
<h4>Why us</h4>
38+
<ul>
39+
<li>Tutorials by industry experts</li>
40+
<li>Peer and expert code review</li>
41+
<li>Coding exercises</li>
42+
<li>Access to our GitHub repos</li>
43+
<li>Community forum</li>
44+
<li>Flashcard decks</li>
45+
<li>New videos every week</li>
46+
</ul>
47+
</div>
48+
</div>
49+
</div>
50+
<script src="index.js"></script>
51+
</body>
52+
</html>

‎index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
function alertUser() {
2+
alert("Hesitation is Defeat");
3+
}

‎style.css

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
/*-----------basic_styling-----------*/
2+
3+
body {
4+
box-sizing: border-box;
5+
margin: 0%;
6+
padding: 50px;
7+
}
8+
9+
html {
10+
box-sizing: border-box;
11+
font-family: "Karla";
12+
font-size: 16px;
13+
font-weight: 400;
14+
}
15+
16+
h2,
17+
h4,
18+
p {
19+
margin: 0;
20+
}
21+
22+
*,
23+
*:before,
24+
*:after {
25+
box-sizing: inherit;
26+
}
27+
28+
#main-container {
29+
box-shadow: 2px 3px 7px 0px rgba(0, 0, 0, 0.35);
30+
border-radius: 5px;
31+
overflow: hidden;
32+
}
33+
34+
/*-----------top_container_styling-----------*/
35+
36+
#top {
37+
height: 45%;
38+
width: 100%;
39+
padding: 25px;
40+
}
41+
42+
#top h2 {
43+
color: #2ab2af;
44+
margin-bottom: 20px;
45+
}
46+
47+
#top h4 {
48+
color: #c0df34;
49+
margin-bottom: 10px;
50+
}
51+
52+
#top p {
53+
color: #98a6bd;
54+
}
55+
56+
/*-----------bottom_container_styling-----------*/
57+
58+
#bottom {
59+
color: white;
60+
}
61+
62+
/*-----------bottom_left_styling-----------*/
63+
64+
#bottom-left {
65+
height: 100%;
66+
width: 100%;
67+
background-color: #2ab2af;
68+
padding: 20px;
69+
}
70+
71+
button {
72+
color: white;
73+
background-color: #c0df34;
74+
border: none;
75+
padding: 10px;
76+
width: 100%;
77+
border-radius: 5px;
78+
}
79+
80+
button:hover {
81+
cursor: pointer;
82+
background-color: #a9c42d;
83+
transform: scale(1.02);
84+
}
85+
86+
#price {
87+
font-weight: 700;
88+
font-size: 1.4rem;
89+
}
90+
91+
#bottom-left h4 {
92+
margin-bottom: 25px;
93+
}
94+
95+
#price-container {
96+
display: flex;
97+
align-items: center;
98+
margin-bottom: 10px;
99+
}
100+
101+
#price-month {
102+
font-size: 0.8rem;
103+
opacity: 0.7;
104+
margin-left: 5px;
105+
}
106+
107+
#bottom-left p {
108+
font-size: 0.8rem;
109+
margin-bottom: 40px;
110+
}
111+
112+
/*-----------bottom_right_styling-----------*/
113+
114+
#bottom-right {
115+
height: 100%;
116+
width: 100%;
117+
background-color: #2ebfbd;
118+
padding: 20px;
119+
}
120+
121+
ul {
122+
padding: 0;
123+
list-style: none;
124+
font-size: 0.8rem;
125+
opacity: 0.8;
126+
}
127+
128+
/*-----------responsive_styling-----------*/
129+
130+
@media (min-width: 576px) {
131+
#bottom {
132+
display: flex;
133+
}
134+
135+
#bottom-left {
136+
flex-basis: 50%;
137+
}
138+
139+
#bottom-right {
140+
flex-basis: 50%;
141+
height: auto;
142+
}
143+
144+
#main-container {
145+
width: fit-content;
146+
}
147+
148+
body {
149+
display: flex;
150+
justify-content: center;
151+
align-items: center;
152+
}
153+
}

0 commit comments

Comments
 (0)