Skip to content

Commit 7dc47bd

Browse files
Ayanprogrammer11Ayanprogrammer11
committed
Added viewport meta tag and a rough media query
1 parent f986c2c commit 7dc47bd

File tree

5 files changed

+88
-26
lines changed

5 files changed

+88
-26
lines changed

‎customers/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@
1717
<div class="backdrop"></div>
1818
<header class="main-header">
1919
<div>
20+
<button class="toggle-button">
21+
<span class="toggle-button__bar"></span>
22+
<span class="toggle-button__bar"></span>
23+
<span class="toggle-button__bar"></span>
24+
</button>
2025
<a href="../index.html" class="main-header__brand">
2126
<img src="../images/uhost-icon.png" alt="uHost - Your favorite hosting company">
2227
</a>
@@ -35,6 +40,19 @@
3540
</ul>
3641
</nav>
3742
</header>
43+
<nav class="mobile-nav">
44+
<ul class="mobile-nav__items">
45+
<li class="mobile-nav__item">
46+
<a href="packages/index.html">Packages</a>
47+
</li>
48+
<li class="mobile-nav__item">
49+
<a href="packages/index.html">Customers</a>
50+
</li>
51+
<li class="mobile-nav__item mobile-nav__item--cta">
52+
<a href="packages/index.html">Start Hosting</a>
53+
</li>
54+
</ul>
55+
</nav>
3856
<main>
3957
<div>
4058
<div class="testimonial" id="customer-1">
@@ -76,6 +94,7 @@ <h2 class="testimonial__subtitle">Hosts his private videos on uHost.</h2>
7694
</ul>
7795
</nav>
7896
</footer>
97+
<script src="../shared.js" defer></script>
7998
</body>
8099

81100
</html>

‎index.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<title>uHost</title>
89
<link rel="shortcut icon" href="favicon.png">
910
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
@@ -25,12 +26,13 @@ <h1 class="modal__title">Do you want to Continue?</h1>
2526

2627
<!-- ----------------- Navigation Bar ------------------- -->
2728
<header class="main-header">
28-
<div class="toggle-button">
29-
<span class="toggle-button__bar"></span>
30-
<span class="toggle-button__bar"></span>
31-
<span class="toggle-button__bar"></span>
32-
</div>
29+
3330
<div>
31+
<button class="toggle-button">
32+
<span class="toggle-button__bar"></span>
33+
<span class="toggle-button__bar"></span>
34+
<span class="toggle-button__bar"></span>
35+
</button>
3436

3537
<a href="index.html" class="main-header__brand">
3638
<img src="images/uhost-icon.png" alt="uHost">

‎main.css

+11
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,18 @@
1919
position: absolute;
2020
bottom: 5%;
2121
left: 3%;
22+
font-size: 1.6rem;
2223
}
24+
25+
@media (min-width: 40rem) {
26+
#product-overview {
27+
height: 40vh;
28+
background-position: 50% 25%;
29+
}
30+
#product-overview h1 {
31+
font-size: 3rem;
32+
}
33+
}
2334

2435
.plan__list {
2536
width: 80%;

‎packages/index.html

+43-20
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<title>uHost</title>
89
<link rel="shortcut icon" href="../favicon.png">
910
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
@@ -15,34 +16,54 @@
1516
<!-- ----------------- Navigation Bar ------------------- -->
1617
<div class="backdrop"></div>
1718
<header class="main-header">
18-
<div class="brand-name">
19-
<a href="../index.html" class="main-header__brand">
20-
<img src="../images/uhost-icon.png" alt="uHost">
21-
</a>
22-
</div>
23-
<nav class="main-nav">
24-
<ul class="main-nav__items">
25-
<li class="main-nav__item">
26-
<a href="index.html">Packages</a>
27-
</li>
28-
<li class="main-nav__item">
29-
<a href="../customers/index.html">Customers</a>
30-
</li>
31-
<li class="main-nav__item main-nav__item--cta">
32-
<a href="../start-hosting/index.html">Start Hosting</a>
33-
</li>
34-
</ul>
35-
</nav>
19+
<div>
20+
<button class="toggle-button">
21+
<span class="toggle-button__bar"></span>
22+
<span class="toggle-button__bar"></span>
23+
<span class="toggle-button__bar"></span>
24+
</button>
25+
<a href="../index.html" class="main-header__brand">
26+
<img src="../images/uhost-icon.png" alt="uHost">
27+
</a>
28+
</div>
29+
<nav class="main-nav">
30+
<ul class="main-nav__items">
31+
<li class="main-nav__item">
32+
<a href="index.html">Packages</a>
33+
</li>
34+
<li class="main-nav__item">
35+
<a href="../customers/index.html">Customers</a>
36+
</li>
37+
<li class="main-nav__item main-nav__item--cta">
38+
<a href="../start-hosting/index.html">Start Hosting</a>
39+
</li>
40+
</ul>
41+
</nav>
42+
3643
</header>
3744
<!-- -------------------- Ending Here --------------------- -->
45+
<nav class="mobile-nav">
46+
<ul class="mobile-nav__items">
47+
<li class="mobile-nav__item">
48+
<a href="packages/index.html">Packages</a>
49+
</li>
50+
<li class="mobile-nav__item">
51+
<a href="packages/index.html">Customers</a>
52+
</li>
53+
<li class="mobile-nav__item mobile-nav__item--cta">
54+
<a href="packages/index.html">Start Hosting</a>
55+
</li>
56+
</ul>
57+
</nav>
3858
<main>
3959
<!-- ----------------GOAL-------------------- -->
4060
<section class="package" id="plus">
4161
<a href="#">
4262
<h1 class="package__title">Our PLUS Plan</h1>
4363
<h2 class="package__badge">RECOMMENDED</h2>
4464
<h2 class="package__subtitle">The most popular choice of our customers.</h2>
45-
<p class="package__info">Benefit from increased storage and faster support to ensure that your mission-critical data and applications
65+
<p class="package__info">Benefit from increased storage and faster support to ensure that your
66+
mission-critical data and applications
4667
are always available!</p>
4768
</a>
4869
<!-- --------------ENDING--------- -->
@@ -59,7 +80,8 @@ <h2 class="package__subtitle">An extremely solid start into our hosting world.</
5980
<a href="#">
6081
<h1 class="package__title">Our PREMIUM Plan</h1>
6182
<h2 class="package__subtitle">All your enterprise needs. Instant support, guaranteed uptime. </h2>
62-
<p class="package__info">The best solution for small to large enterprises. Because hosting shouldn't be in the way!</p>
83+
<p class="package__info">The best solution for small to large enterprises. Because hosting shouldn't be
84+
in the way!</p>
6385
</a>
6486
</section>
6587
</main>
@@ -75,6 +97,7 @@ <h2 class="package__subtitle">All your enterprise needs. Instant support, guaran
7597
</ul>
7698
</nav>
7799
</footer>
100+
<script src="../shared.js"></script>
78101
</body>
79102

80103
</html>

‎shared.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ let modalNoButton = document.querySelector(".modal__action--negative");
55
let toggleButton = document.querySelector(".toggle-button");
66
let mobileNav = document.querySelector(".mobile-nav");
77

8+
9+
810
for(i = 0; i <= selectPlanButtons.length; i++) {
911
if(selectPlanButtons[i]) {
1012
selectPlanButtons[i].addEventListener("click", () => {
@@ -14,20 +16,25 @@ for(i = 0; i <= selectPlanButtons.length; i++) {
1416
}
1517
}
1618

19+
1720
const closeModal = () => {
1821
backdrop.style.display = "none";
22+
if(modal) {
1923
modal.style.display = "none";
24+
}
2025
}
2126

2227
backdrop.addEventListener("click", () => {
2328
mobileNav.style.display = "none";
2429
closeModal();
2530
})
2631

27-
modalNoButton.addEventListener("click", closeModal);
32+
if(modalNoButton) modalNoButton.addEventListener("click", closeModal);
2833

2934
toggleButton.addEventListener("click", () => {
3035
mobileNav.style.display = "block";
3136
backdrop.style.display = "block";
3237
})
3338

39+
40+

0 commit comments

Comments
 (0)