apauloenzo
commented
1 year ago desafio mobile tag navigation.zip Equipe: Flasco
Closed iurygdeoliveira closed 1 year ago
apauloenzo
commented
1 year ago desafio mobile tag navigation.zip Equipe: Flasco
GiorgeLucas
commented
1 year ago 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Mobile Tab Navigation</title>
</head>
<body>
<div class="phone">
<img src="https://picsum.photos/200/300?image=1" alt="home" class="content show">
<img src="https://picsum.photos/200/300?image=3" alt="blog" class="content">
<img src="https://picsum.photos/200/300?image=2" alt="work" class="content">
<img src="https://picsum.photos/200/300?image=4" alt="about" class="content">
<nav>
<ul>
<li class="active">
<i class="fas fa-home"></i>
<p>Home</p>
</li>
<li>
<i class="fas fa-box"></i>
<p>Work</p>
</li>
<li>
<i class="fas fa-book-open"></i>
<p>Blog</p>
</li>
<li>
<i class="fas fa-users"></i>
<p>About Us</p>
</li>
</ul>
</nav>
</div>
<script src="script.js"></script>
</body>
</html>body {
padding: 0;
margin: 0;
background: #f1f1f1;
}
.phone {
position: relative;
width: 300px;
height: 500px;
margin: 30px auto;
background: #fff;
border-radius: 20px;
z-index: 0;
overflow: hidden;
}
.phone img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: 0.2s ease-in-out;
}
.phone img.show {
opacity: 1;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #c4c4c4;
}
nav ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
flex: 1;
text-align: center;
padding: 10px;
box-sizing: border-box;
cursor: pointer;
}
nav ul li.active {
background: #f1f1f1;
}
nav ul li i {
font-size: 20px;
margin-bottom: 5px;
}
nav ul li p {
font-size: 12px;
color: #777;
margin: 0;
}
@media (max-width: 450px) {
.phone {
width: 90vw;
height: 50vw;
}
}const tabs = document.querySelectorAll("nav ul li");
const contents = document.querySelectorAll(".content");
tabs.forEach((tab, index) => {
tab.addEventListener("click", () => {
tabs.forEach((tab) => tab.classList.remove("active"));
tab.classList.add("active");
contents.forEach((content) => content.classList.remove("show"));
contents[index].classList.add("show");
});
});
EduardoSilva09
commented
1 year ago <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>Mobile Tab Navigation</title>
</head>
<body>
<div class="phone">
<img src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80" alt="home" class="content show">
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="work" class="content">
<img src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" alt="blog" class="content">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="about" class="content">
<nav>
<ul>
<li class="active">
<i class="fas fa-home"></i>
<p>Home</p>
</li>
<li>
<i class="fas fa-box"></i>
<p>Work</p>
</li>
<li>
<i class="fas fa-book-open"></i>
<p>Blog</p>
</li>
<li>
<i class="fas fa-users"></i>
<p>About Us</p>
</li>
</ul>
</nav>
</div>
<script src="script.js"></script>
</body>
</html>const buttons = [...document.querySelectorAll("li")]
const imgs = [...document.querySelectorAll('.content')]
function RemoveClass(indice) {
buttons.map((el, i) => {
if (i !== indice) {
buttons[i].classList.remove('active');
imgs[i].classList.remove('show');
}
})
}
buttons.map((btn, indice) => {
btn.addEventListener('click', () => {
btn.classList.add("active");
imgs[indice].classList.add("show");
RemoveClass(indice);
})
})* {
padding: 0px;
margin: 0px;
/* box-sizing: border-box; */
}
body {
margin: 0px;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #8B46A7;
}
ul {
display: flex;
gap: 20px;
justify-content: center;
list-style-type: none;
padding: 10px 20px;
}
li {
align-items: stretch;
justify-content: space-between;
text-align: center;
padding: 5px 15px;
}
li:hover {
color: #8B46A7;
}
img {
height: 100%;
opacity: 0;
max-width: 100%;
object-fit: cover;
align-self: center;
transition: opacity 500ms;
border-radius: 15px;
}
.content {
top: 0px;
left: 0px;
position: absolute;
}
.active{
color: #8B46A7;
}
.show{
opacity: 1;
}
.phone {
display: flex;
height: 667px;
width: 375px;
align-self: center;
border-radius: 15px;
position: relative;
}
nav {
display: block;
width: 100%;
position: absolute;
bottom: 0px;
background: #FFF;
z-index: 3;
border-radius: 0px 0px 15px 15px;
}
Contact Details
iury.oliveira@ifto.edu.br
Challenge Description
Oi crianças inocentes! Hoje o desafio é criar um Mobile Tab Navigation, que nada mais é do que uma página web com um layout otimizado para dispositivos móveis, permitindo que o usuário navegue facilmente pelas seções do site através de uma barra de navegação na parte inferior da tela.
A importância de se criar um layout mobile-friendly em desenvolvimento web é fundamental, uma vez que atualmente a maioria dos acessos à internet são feitos através de dispositivos móveis, como smartphones e tablets. Portanto, é necessário que os desenvolvedores se adaptem a essa realidade, criando sites responsivos que sejam acessíveis e utilizáveis em qualquer dispositivo.
Para construir o Mobile Tab Navigation, é necessário utilizar as linguagens de marcação HTML, de estilo CSS e a linguagem de programação JavaScript. É importante criar uma estrutura de HTML bem organizada, com as seções do site devidamente separadas e identificadas, e utilizar o CSS para estilizar o layout e torná-lo mais atraente visualmente. Já o JavaScript será utilizado para criar o comportamento da barra de navegação, permitindo que o usuário possa clicar nos botões para navegar entre as diferentes seções do site.
Algumas dicas de comandos CSS e JS que podem ser úteis na construção do Mobile Tab Navigation incluem:
CSS: display, position, background-color, padding, margin, font-size, text-align, border-radius, box-shadow, transition. JS: querySelector, addEventListener, classList, getElementById, scrollTop, offsetTop. Lembre-se de que não é permitido utilizar soluções prontas! O desafio é colocar a mão na massa e criar o seu próprio Mobile Tab Navigation do zero. Boa sorte!
Exemplo
https://user-images.githubusercontent.com/30157522/224548599-661089d7-48a5-4a2e-9214-c39e33594997.mp4
Additional tips
Código HTML