Skip to content

Commit 1d8a0f9

Browse files
mounikaperimounikaperi
committed
Project Choose Your Plan
0 parents  commit 1d8a0f9

File tree

5 files changed

+416
-0
lines changed

5 files changed

+416
-0
lines changed

‎Project_ChooseYourPlan/index.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Choose Your Plan</title>
8+
<link rel="stylesheet" href="shared.css">
9+
<link rel="stylesheet" href="main.css">
10+
</head>
11+
<body>
12+
<header class="main-header">
13+
<div>
14+
<a href="index.html" class="main-header__brand">uHost</a>
15+
</div>
16+
<nav class="main-nav">
17+
<ul class="main-nav__items">
18+
<li class="main-nav__item"><a href="packages/index.html">Packages</a></li>
19+
<li class="main-nav__item"><a href="#">Customers</a></li>
20+
<li class="main-nav__item main-nav__item--cta"><a href="#">Start Hosting</a></li>
21+
</ul>
22+
</nav>
23+
</header>
24+
<main>
25+
<section id="product-overview">
26+
<h1>Get the freedom you deserve.</h1>
27+
</section>
28+
<section id="plans">
29+
<h1 class="section-title">Choose Your Plan</h1>
30+
<div class="plan__list">
31+
<article class="plan">
32+
<h1 class="plan__title">FREE</h1>
33+
<h2 class="plan__price">$0/month</h2>
34+
<h3>For hobby projects or small teams.</h3>
35+
<ul class="plan__features">
36+
<li class="plan__feature">1 workspace</li>
37+
<li class="plan__feature">Unlimited traffic</li>
38+
<li class="plan__feature">10GB storage</li>
39+
<li class="plan__feature">Basic Support</li>
40+
</ul>
41+
<div>
42+
<button class="button">CHOOSE PLAN</button>
43+
</div>
44+
</article>
45+
<article class="plan plan--highlighted">
46+
<h1 class="plan__annotation">RECOMMENDED</h1>
47+
<h1 class="plan__title">PLUS</h1>
48+
<h2 class="plan__price">$29/month</h2>
49+
<h3>For ambitious projects.</h3>
50+
<ul class="plan__features">
51+
<li class="plan__feature">5 Workspaces</li>
52+
<li class="plan__feature">Unlimited traffic</li>
53+
<li class="plan__feature">100GB storage</li>
54+
<li class="plan__feature">Plus Support</li>
55+
</ul>
56+
<div>
57+
<button class="button">CHOOSE PLAN</button>
58+
</div>
59+
</article>
60+
<article class="plan">
61+
<h1 class="plan__title">PREMIUM</h1>
62+
<h2 class="plan__price">$99/month</h2>
63+
<h3>Your enterprise solution.</h3>
64+
<ul class="plan__features">
65+
<li class="plan__feature">10 Workspaces</li>
66+
<li class="plan__feature">Unlimited traffic</li>
67+
<li class="plan__feature">Unlimited Storage</li>
68+
<li class="plan__feature">Priority Support</li>
69+
</ul>
70+
<div>
71+
<button class="button">CHOOSE PLAN</button>
72+
</div>
73+
</article>
74+
</div>
75+
</section>
76+
<section id="key-features">
77+
<h1 class="section-title">Many Good reasons to stick around</h1>
78+
<ul class="key-feature__list">
79+
<li class="key-feature">
80+
<div class="key-feature__image">
81+
82+
</div>
83+
<p class="key-feature__description">3,857,000 Trusting Customers</p>
84+
</li>
85+
<li class="key-feature">
86+
<div class="key-feature__image">
87+
88+
</div>
89+
<p class="key-feature__description">99.9999% Uptime Guarantee</p>
90+
</li>
91+
<li class="key-feature">
92+
<div class="key-feature__image">
93+
94+
</div>
95+
<p class="key-feature__description">Lightning Fast CDN</p>
96+
</li>
97+
</ul>
98+
</section>
99+
</main>
100+
<footer class="main-footer">
101+
<nav>
102+
<ul class="main-footer__links">
103+
<li class="main-footer__link">
104+
<a href="#">Support</a>
105+
</li>
106+
<li class="main-footer__link">
107+
<a href="#">Terms of Use</a>
108+
</li>
109+
</ul>
110+
</nav>
111+
</footer>
112+
</body>
113+
</html>

‎Project_ChooseYourPlan/main.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
#product-overview {
2+
background: url("https://images.pexels.com/photos/7974/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
3+
width: 100%;
4+
height: 800px;
5+
padding: 10px;
6+
margin-top: 43px;
7+
position: relative;
8+
}
9+
#product-overview h1{
10+
color: white;
11+
font-family: 'Anton, sans-serif';
12+
position: absolute;
13+
}
14+
.section-title {
15+
text-align: center;
16+
color: red;
17+
}
18+
.plan__list{
19+
width: 80%;
20+
margin: auto;
21+
text-align: center;
22+
}
23+
.plan {
24+
background: #E83A59;
25+
text-align: center;
26+
padding: 16px;
27+
margin: 8px;
28+
display: inline-block;
29+
width: 30%;
30+
vertical-align: middle;
31+
}
32+
.plan__title {
33+
color: #DDD101;
34+
}
35+
.plan__price {
36+
color: #120E43;
37+
}
38+
.plan__features {
39+
list-style: none;
40+
margin: 0;
41+
padding: 0;
42+
}
43+
.button {
44+
border-radius: 5px;
45+
color: #ffffff ;
46+
padding: 8px;
47+
text-align: center;
48+
margin: 16px;
49+
background-color: #758283;
50+
}
51+
.plan--highlighted{
52+
background-color: #B4161B;
53+
}
54+
.plan__feature {
55+
padding: 2px;
56+
}
57+
#key-features {
58+
background-color: black;
59+
height: 400px;
60+
}
61+
.section-title {
62+
margin: 8px;
63+
padding: 32px;
64+
}
65+
.key-feature__list {
66+
margin: 0;
67+
padding: 0;
68+
list-style: none;
69+
text-align: center;
70+
}
71+
.key-feature {
72+
display: inline-block;
73+
width: 30%;
74+
vertical-align: top;
75+
color: white;
76+
}
77+
.key-feature__image {
78+
background: #fa923f;
79+
width: 128px;
80+
height: 128px;
81+
border-radius: 50%;
82+
margin: auto;
83+
border: 2px solid #B9345A;
84+
}

‎Project_ChooseYourPlan/packages/index.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Choose Your Plan</title>
8+
<link rel="stylesheet" href="../shared.css">
9+
<link rel="stylesheet" href="packages.css">
10+
</head>
11+
<body>
12+
<div class="background"></div>
13+
<header class="main-header">
14+
<div>
15+
<a href="../index.html" class="main-header__brand">Choose your Plan</a>
16+
</div>
17+
<nav class="main-nav">
18+
<ul class="main-nav__items">
19+
<li class="main-nav__item">
20+
<a href="index.html">Packages</a>
21+
</li>
22+
<li class="main-nav__item">
23+
<a href="../customers/index.html">Customers</a>
24+
</li>
25+
<li class="main-nav__item">
26+
<a href="../start-hosting/index.html">Start Hosting</a>
27+
</li>
28+
</ul>
29+
</nav>
30+
</header>
31+
<main>
32+
<section class="package" id="plus">
33+
<a href="#">
34+
<h1 class="package__title">Our PLUS plan</h1>
35+
<h2 class="package__badge">RECOMMENDED</h2>
36+
<h2 class="package__subtitle">The most popular choice of our customers.</h2>
37+
<p class="package__info">Benefit from increased storage and faster support to ensure that your mission-critical data and applications are always available.</p>
38+
</a>
39+
</section>
40+
<section class="package" id="free">
41+
<a href="#">
42+
<h1 class="package__title">Our Free Plan</h1>
43+
<h2 class="package__subtitle">An extremely solid start into our hosting world.</h2>
44+
<p class="package__info">Get started immediately at zero cost!</p>
45+
</a>
46+
</section>
47+
<div class="clearfix"></div>
48+
<section class="package" id="premium">
49+
<a href="#">
50+
<h1 class="package__title">Our PREMIUM plan</h1>
51+
<h2 class="package__subtitle">All your enterprise needs. Instant support, guaranteed uptime. </h2>
52+
<p class="package__info">The best solution for small to large enterprises. Because hosting shouldn't be in the way!</p>
53+
</a>
54+
</section>
55+
</main>
56+
<footer class="main-footer">
57+
<nav>
58+
<ul class="main-footer__links">
59+
<li class="main-footer__link">
60+
<a href="#">Support</a>
61+
</li>
62+
<li class="main-footer__link">
63+
<a href="#">Terms of Use</a>
64+
</li>
65+
</ul>
66+
</nav>
67+
</footer>
68+
</body>
69+
</html>

‎Project_ChooseYourPlan/packages/packages.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
main {
2+
padding-top: 32px;
3+
}
4+
.background {
5+
background: url("https://images.pexels.com/photos/7974/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
6+
width: 100%;
7+
height: 100%;
8+
position: fixed;
9+
z-index: -1;
10+
}
11+
.package {
12+
width: 80%;
13+
margin: 16px 0;
14+
border: 4px solid black;
15+
border-left: none;
16+
}
17+
.package:hover,
18+
.package:active {
19+
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
20+
border-color: black;
21+
}
22+
.package a {
23+
text-decoration: none;
24+
color: inherit;
25+
display: block;
26+
padding: 32px;
27+
}
28+
.package__badge {
29+
position: absolute;
30+
border: 3px solid black;
31+
padding: 8px 16px;
32+
margin: 32px;
33+
left: 800px;
34+
top: 48px;
35+
background-color: #ffffff;
36+
}
37+
.package__subtitle {
38+
color: black;
39+
}
40+
.package__info {
41+
padding: 16px;
42+
border: 1px solid black;
43+
font-size: 20px;
44+
color: white;
45+
background: #fa923f;
46+
}
47+
.clearfix {
48+
clear: both;
49+
}
50+
#plus {
51+
background: #B9345A
52+
}
53+
#free {
54+
background: #E83A59;
55+
float: right;
56+
border-right: none;
57+
border-left: 4px solid black;
58+
text-align: right;
59+
}
60+
#free:hover,
61+
#free:active {
62+
border-left-color: black;
63+
}
64+
#premium {
65+
background: #FF6263
66+
}
67+
#premium .package__title,
68+
#premium .package__subtitle{
69+
color: black;
70+
}

0 commit comments

Comments
 (0)