Skip to content

Commit 8521aef

Browse files
Ayanprogrammer11Ayanprogrammer11
committed
Added start-hosting page, not finalized yet
1 parent 7dc47bd commit 8521aef

File tree

10 files changed

+355
-49
lines changed

10 files changed

+355
-49
lines changed

‎customers/customers.css

+25-17
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
1+
main {
2+
padding-top: 2.5rem;
3+
}
4+
15
.testimonial {
26
font-size: 1.2rem;
3-
margin: 3rem 0;
4-
}
5-
6-
.testimonial__list {
7-
width: 80%;
8-
margin: auto;
9-
}
10-
11-
.testimonial:first-of-type {
12-
margin-top: 6rem;
137
}
148

9+
10+
1511
.testimonial__image-container {
16-
width: 65%;
17-
max-width: 580px;
18-
display: inline-block;
19-
vertical-align: middle;
12+
width: 100%;
13+
max-width: 40rem;
2014
box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.3);
2115
}
2216

@@ -28,9 +22,6 @@
2822
.testimonial__info {
2923
text-align: right;
3024
padding: 1rem;
31-
display: inline-block;
32-
vertical-align: middle;
33-
width: 30%;
3425
}
3526

3627
#customer-2.testimonial {
@@ -65,4 +56,21 @@
6556

6657
.testimonial__text {
6758
margin: 0.2rem;
59+
}
60+
61+
@media (min-width: 40rem) {
62+
.testimonial {
63+
margin: 3rem auto;
64+
max-width: 1500px;
65+
}
66+
.testimonial__image-container {
67+
display: inline-block;
68+
vertical-align: middle;
69+
width: 65%;
70+
}
71+
.testimonial__info {
72+
display: inline-block;
73+
vertical-align: middle;
74+
width: 30%;
75+
}
6876
}

‎customers/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -35,21 +35,21 @@
3535
<a href="index.html">Customers</a>
3636
</li>
3737
<li class="main-nav__item main-nav__item--cta">
38-
<a href="start-hosting/index.html">Start Hosting</a>
38+
<a href="../start-hosting/index.html">Start Hosting</a>
3939
</li>
4040
</ul>
4141
</nav>
4242
</header>
4343
<nav class="mobile-nav">
4444
<ul class="mobile-nav__items">
4545
<li class="mobile-nav__item">
46-
<a href="packages/index.html">Packages</a>
46+
<a href="../packages/index.html">Packages</a>
4747
</li>
4848
<li class="mobile-nav__item">
49-
<a href="packages/index.html">Customers</a>
49+
<a href="index.html">Customers</a>
5050
</li>
5151
<li class="mobile-nav__item mobile-nav__item--cta">
52-
<a href="packages/index.html">Start Hosting</a>
52+
<a href="../start-hosting/index.html">Start Hosting</a>
5353
</li>
5454
</ul>
5555
</nav>

‎index.html

+8-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@
1515

1616
<body>
1717
<div class="backdrop"></div>
18+
<!-- <button class="hide-nav-button">
19+
<svg viewBox="0 0 24 24" width="44" height="44">
20+
<line x1="18" y1="6" x2="6" y2="18" />
21+
<line x1="6" y1="6" x2="18" y2="18" />
22+
</svg>
23+
</button> -->
1824

1925
<div class="modal">
2026
<h1 class="modal__title">Do you want to Continue?</h1>
@@ -59,10 +65,10 @@ <h1 class="modal__title">Do you want to Continue?</h1>
5965
<a href="packages/index.html">Packages</a>
6066
</li>
6167
<li class="mobile-nav__item">
62-
<a href="packages/index.html">Customers</a>
68+
<a href="customers/index.html">Customers</a>
6369
</li>
6470
<li class="mobile-nav__item mobile-nav__item--cta">
65-
<a href="packages/index.html">Start Hosting</a>
71+
<a href="start-hosting/index.html">Start Hosting</a>
6672
</li>
6773
</ul>
6874
</nav>

‎main.css

+37-14
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
#product-overview {
22
background: linear-gradient(to top, rgba(80, 68, 18, 0.6) 10%, transparent),
3-
url("images/freedom.jpg") left 10% bottom 70%/cover no-repeat border-box,
3+
url("images/freedom.jpg") center/cover no-repeat border-box,
44
#ff1b68;
55
width: 100%;
66
height: 33vh;
7-
margin-top: 2.75rem;
87
position: relative;
98
}
109

@@ -22,7 +21,7 @@
2221
font-size: 1.6rem;
2322
}
2423

25-
@media (min-width: 40rem) {
24+
@media (min-width: 40rem) and (min-height: 40rem) {
2625
#product-overview {
2726
height: 40vh;
2827
background-position: 50% 25%;
@@ -31,27 +30,26 @@
3130
font-size: 3rem;
3231
}
3332
}
34-
33+
/*
3534
.plan__list {
36-
width: 80%;
35+
width: 100%;
3736
margin: auto;
3837
text-align: center;
39-
}
38+
} */
4039

4140
.plan {
4241
background: #d5ffdc;
4342
text-align: center;
4443
padding: 1rem;
45-
margin: 0.5rem;
46-
display: inline-block;
47-
width: 30%;
44+
margin: 0.5rem 0;
45+
width: 100%;
4846
vertical-align: middle;
4947
}
5048

5149
.plan--highlighted {
5250
background: #19b84c;
5351
color: white;
54-
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
52+
/* box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5); */
5553
}
5654

5755
.plan__annotation {
@@ -87,6 +85,23 @@
8785
.plan__feature {
8886
margin: 0.5rem 0;
8987
}
88+
89+
@media (min-width: 40rem) {
90+
.plan__list {
91+
text-align: center;
92+
width: 100%;
93+
}
94+
.plan {
95+
display: inline-block;
96+
width: 30%;
97+
vertical-align: middle;
98+
min-width: 13rem;
99+
max-width: 25rem;
100+
}
101+
.plan--highlighted {
102+
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
103+
}
104+
}
90105

91106
#key-features {
92107
background: #ff1b68;
@@ -104,13 +119,12 @@
104119
margin: 0;
105120
padding: 0;
106121
text-align: center;
122+
/* width: 100%; */
107123
}
108124

109-
.key-feature {
110-
display: inline-block;
111-
width: 30%;
125+
/* .key-feature {
112126
vertical-align: top;
113-
}
127+
} */
114128

115129
.key-feature__image {
116130
background: #ffcede;
@@ -128,6 +142,15 @@
128142
color: white;
129143
font-size: 1.2rem;
130144
}
145+
146+
@media (min-width: 40rem) {
147+
.key-feature {
148+
display: inline-block;
149+
width: 30%;
150+
vertical-align: top;
151+
max-width: 25rem;
152+
}
153+
}
131154

132155

133156
.modal {

‎packages/index.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
<!-- ----------------- Navigation Bar ------------------- -->
1717
<div class="backdrop"></div>
1818
<header class="main-header">
19+
1920
<div>
2021
<button class="toggle-button">
2122
<span class="toggle-button__bar"></span>
@@ -27,6 +28,7 @@
2728
</a>
2829
</div>
2930
<nav class="main-nav">
31+
3032
<ul class="main-nav__items">
3133
<li class="main-nav__item">
3234
<a href="index.html">Packages</a>
@@ -45,17 +47,18 @@
4547
<nav class="mobile-nav">
4648
<ul class="mobile-nav__items">
4749
<li class="mobile-nav__item">
48-
<a href="packages/index.html">Packages</a>
50+
<a href="index.html">Packages</a>
4951
</li>
5052
<li class="mobile-nav__item">
51-
<a href="packages/index.html">Customers</a>
53+
<a href="../customers/index.html">Customers</a>
5254
</li>
5355
<li class="mobile-nav__item mobile-nav__item--cta">
54-
<a href="packages/index.html">Start Hosting</a>
56+
<a href="../start-hosting/index.html">Start Hosting</a>
5557
</li>
5658
</ul>
5759
</nav>
5860
<main>
61+
<div class="background"></div>
5962
<!-- ----------------GOAL-------------------- -->
6063
<section class="package" id="plus">
6164
<a href="#">

‎packages/packages.css

+29-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
main {
1+
/* main {
22
padding-top: 2rem;
3-
}
3+
} */
44

55
.background {
6-
background: url("../images/plans-background.jpg") center/cover;
6+
background: url("../images/plans-background.jpg") center / cover;
77
position: fixed;
88
width: 100vw;
99
height: 100vh;
@@ -18,6 +18,10 @@ main {
1818
position: relative;
1919
}
2020

21+
.package:first-of-type {
22+
padding-top: 2rem;
23+
}
24+
2125
.package:hover,
2226
.package:active {
2327
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
@@ -85,4 +89,26 @@ main {
8589

8690
#premium .package__subtitle {
8791
color: #bbb;
92+
}
93+
94+
95+
@media (min-width: 40rem) {
96+
main {
97+
margin-left: auto;
98+
margin-right: auto;
99+
max-width: 1500px;
100+
}
101+
}
102+
103+
@media (min-width: 1500px) {
104+
.package {
105+
border-left: 4px solid #0e4f1f;
106+
}
107+
#free {
108+
border-right: 4px solid #0e4f1f;
109+
}
110+
#free:hover,
111+
#free:active {
112+
border-right-color: #ff5454;
113+
}
88114
}

0 commit comments

Comments
 (0)