Skip to content

Commit de14ed9

Browse files
ayushigeorgeayushigeorge
authored
Day 38: Mock Mobile Tab app
1 parent c937581 commit de14ed9

File tree

3 files changed

+154
-0
lines changed

3 files changed

+154
-0
lines changed

‎project 38/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
9+
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Mobile Tab Navigation</title>
14+
</head>
15+
<body>
16+
<div class="phone">
17+
<img
18+
src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80"
19+
alt="home"
20+
class="content show"
21+
/>
22+
<img
23+
src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
24+
alt="work"
25+
class="content"
26+
/>
27+
<img
28+
src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80"
29+
alt="blog"
30+
class="content"
31+
/>
32+
<img
33+
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
34+
alt="about"
35+
class="content"
36+
/>
37+
<nav>
38+
<ul>
39+
<li class="active">
40+
<i class="fas fa-home"></i>
41+
<p>Home</p>
42+
</li>
43+
<li>
44+
<i class="fas fa-box"></i>
45+
<p>Work</p>
46+
</li>
47+
<li>
48+
<i class="fas fa-book-open"></i>
49+
<p>Blog</p>
50+
</li>
51+
<li>
52+
<i class="fas fa-users"></i>
53+
<p>About Us</p>
54+
</li>
55+
</ul>
56+
</nav>
57+
</div>
58+
<script src="script.js"></script>
59+
</body>
60+
</html>

‎project 38/script.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const contents = document.querySelectorAll(".content");
2+
const listItems = document.querySelectorAll("nav ul li");
3+
4+
listItems.forEach((item, idx) => {
5+
item.addEventListener("click", () => {
6+
hideAllContents();
7+
hideAllItems();
8+
9+
item.classList.add("active");
10+
contents[idx].classList.add("show");
11+
});
12+
});
13+
14+
function hideAllContents() {
15+
contents.forEach((content) => content.classList.remove("show"));
16+
}
17+
18+
function hideAllItems() {
19+
listItems.forEach((item) => item.classList.remove("active"));
20+
}

‎project 38/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: rgba(155, 89, 182, 0.7);
9+
font-family: 'Open Sans', sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
margin: 0;
15+
}
16+
17+
.phone {
18+
position: relative;
19+
overflow: hidden;
20+
border: 3px solid #eee;
21+
border-radius: 15px;
22+
height: 600px;
23+
width: 340px;
24+
}
25+
26+
.phone .content {
27+
opacity: 0;
28+
object-fit: cover;
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
height: calc(100% - 60px);
33+
width: 100%;
34+
transition: opacity 0.4s ease;
35+
}
36+
37+
.phone .content.show {
38+
opacity: 1;
39+
}
40+
41+
nav {
42+
position: absolute;
43+
bottom: 0;
44+
left: 0;
45+
margin-top: -5px;
46+
width: 100%;
47+
}
48+
49+
nav ul {
50+
background-color: #fff;
51+
display: flex;
52+
list-style-type: none;
53+
padding: 0;
54+
margin: 0;
55+
height: 60px;
56+
}
57+
58+
nav li {
59+
color: #777;
60+
cursor: pointer;
61+
flex: 1;
62+
padding: 10px;
63+
text-align: center;
64+
}
65+
66+
nav ul li p {
67+
font-size: 12px;
68+
margin: 2px 0;
69+
}
70+
71+
nav ul li:hover,
72+
nav ul li.active {
73+
color: #8e44ad;
74+
}

0 commit comments

Comments
 (0)