Skip to content

Commit bf325ab

Browse files
programandoconroprogramandoconro
committed
create mobile layout mini project
1 parent d064af9 commit bf325ab

File tree

3 files changed

+115
-0
lines changed

3 files changed

+115
-0
lines changed

‎Languages/HTML-CSS-Javascript/mobile-layout/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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="stylesheet" href="style.css" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
10+
/>
11+
12+
<title>Mobile nav</title>
13+
</head>
14+
<body>
15+
<div class="screen">
16+
<div class="background"></div>
17+
<img
18+
class="image active"
19+
src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80"
20+
alt=""
21+
/><img
22+
class="image"
23+
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
24+
alt=""
25+
/><img
26+
class="image"
27+
src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80"
28+
alt=""
29+
/><img
30+
class="image"
31+
src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
32+
alt=""
33+
/>
34+
<div class="tabs">
35+
<i class="fa fa-home active"></i>
36+
<i class="fa fa-briefcase"></i>
37+
<i class="fa fa-share"></i>
38+
<i class="fa fa-flag"></i>
39+
</div>
40+
</div>
41+
</body>
42+
<script src="script.js"></script>
43+
</html>

‎Languages/HTML-CSS-Javascript/mobile-layout/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const tabs = document.querySelectorAll(".fa");
2+
const images = document.querySelectorAll(".image");
3+
4+
tabs.forEach((tab, index) => {
5+
tab.addEventListener("click", () => {
6+
resetImages();
7+
tab.classList.add("active");
8+
images[index].classList.add("active");
9+
});
10+
});
11+
12+
function resetImages() {
13+
images.forEach((image, index) => {
14+
image.classList.remove("active");
15+
tabs[index].classList.remove("active");
16+
});
17+
}

‎Languages/HTML-CSS-Javascript/mobile-layout/style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
:root {
2+
--purple: rgb(246, 155, 246);
3+
}
4+
body {
5+
background-color: var(--purple);
6+
box-sizing: border-box;
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
height: 100vh;
11+
}
12+
13+
.screen {
14+
overflow: hidden;
15+
width: 300px;
16+
border: 5px solid white;
17+
border-radius: 20px;
18+
height: 600px;
19+
position: relative;
20+
}
21+
22+
.image {
23+
height: 550px;
24+
width: 100%;
25+
object-fit: cover;
26+
position: absolute;
27+
opacity: 0;
28+
transition: opacity 0.4s ease;
29+
}
30+
31+
.image.active {
32+
opacity: 1;
33+
}
34+
35+
.tabs {
36+
position: absolute;
37+
bottom: 0;
38+
height: 50px;
39+
background-color: white;
40+
width: 100%;
41+
justify-content: space-around;
42+
display: flex;
43+
align-items: center;
44+
}
45+
46+
.fa {
47+
font-size: 24px !important;
48+
color: gray;
49+
transition: color 0.3s ease-in-out;
50+
}
51+
52+
.fa:hover,
53+
.fa.active {
54+
color: var(--purple);
55+
}

0 commit comments

Comments
 (0)