Skip to content

Commit

Permalink
Atualizar-styles-principal-artigos-arrumar a nav-artigos-criar-o-men…
Browse files Browse the repository at this point in the history
…u-artigos-e-demais-funcionalidades
  • Loading branch information
Daniels436 authored Feb 24, 2024
1 parent 4c3db59 commit 2352afa
Show file tree
Hide file tree
Showing 13 changed files with 294 additions and 10 deletions.
Binary file added artigos/Imgs-artigos/CODEPEN.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added artigos/Imgs-artigos/GITHUB.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added artigos/Imgs-artigos/X-antigo-twitter-mobile.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added artigos/Imgs-artigos/abrir-menu-artigos.ico
Binary file not shown.
Binary file added artigos/Imgs-artigos/fexar-menu-artigos.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added artigos/Imgs-artigos/linkedin.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added artigos/Imgs-artigos/logo-daniel-pixelado 1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added artigos/Imgs-artigos/logo-daniel-pixelado 2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 44 additions & 8 deletions artigos/artigos.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,17 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniels436-Artigos</title>
<link rel="icon" type="img/png" href="Imgs-blog/logo-daniel-pixelado 2.png">
<link rel="icon" type="img/png" href="Imgs-artigos/logo-daniel-pixelado 2.png">
<link rel="stylesheet" type="text/css" href="style-artigos.css">
<link rel="stylesheet" type="text/css" href="style-menu-mobile-artigos.css">
</head>

<body>
<div class="primo">
<!-- Cabeçalho da subpágina -->
<nav>
<div>
<img src="Imgs-blog/logo-daniel-pixelado 1.png" alt="#">
<img src="Imgs-artigos/logo-daniel-pixelado 1.png" alt="#">
<h1>Daniels436</h1>
</div>

Expand Down Expand Up @@ -187,7 +188,7 @@ <h2 id="aplicacoes-saude-bemestar">4. Aplicações na saúde e bem-estar</h2>
e recursos úteis para promover um estilo de vida saudável.
</p>

<h2 id="seo">5. As principais estratégias de otimização
<h2 id="seo">5. As principais estratégias de otimização
de busca que podem mudar
</h2>
<p>
Expand Down Expand Up @@ -449,21 +450,55 @@ <h3 id="fontes">Fontes:</h3>
<div class="mais-1" id="mais-1"></div>
</main>

<div class="menu-container">
<div class="btn-abrir-menu" id="btn-menu">
<i><img src="Imgs-artigos/abrir-menu-artigos.ico" alt=""></i>
</div>
<div class="overlay-menu" id="overlay-menu"></div>
<div class="menu-mobile-a" id="menu-mobile-a">
<div class="btn-fechar">
<i class="ico"><img src="Imgs-artigos/fexar-menu-artigos.png" alt=""></i>
</div>
<nav>
<ul>
<li><a href="https://daniels436.github.io/" id="">Principal</a></li>
<li><a href="https://daniels436.github.io/">Sobre</a></li>
<li><a href="#mobile-section">Base⇣</a></li>
</ul>
</nav>
<div class="mobile-section">
<div id="ico-mobile">
<a href="https://twitter.com/DanielPSouza436" class="icon-img">
<img src="Imgs-artigos/X-antigo-twitter-mobile.png" alt="Ícone Twitter">
</a>
<a href="https://github.com/Daniels436" class="icon-img">
<img src="Imgs-artigos/GITHUB.png" alt="Ícone GitHub">
</a>
<a href="https://codepen.io/Daniel-P-Souza/pen/rNRKGPd" class="icon-img">
<img src="Imgs-artigos/CODEPEN.png" alt="Ícone CodePen">
</a>
<a href="https://www.linkedin.com/in/daniels436/" class="icon-img">
<img src="Imgs-artigos/linkedin.png" alt="Ícone LinkedIn">
</a>
</div>
</div>
</div>
</div>
<footer>
<div class="mobile-section" id="mobile-section">

<div id="ico-mobile">
<a href="https://twitter.com/DanielPSouza436" class="icon-img">
<img src="Imgs-blog/X-antigo-twitter-mobile.png" alt="Ícone Twitter">
<img src="Imgs-artigos/X-antigo-twitter-mobile.png" alt="Ícone Twitter">
</a>
<a href="https://github.com/Daniels436" class="icon-img">
<img src="Imgs-blog/GITHUB.png" alt="Ícone GitHub">
<img src="Imgs-artigos/GITHUB.png" alt="Ícone GitHub">
</a>
<a href="https://codepen.io/Daniel-P-Souza/pen/rNRKGPd" class="icon-img">
<img src="Imgs-blog/CODEPEN.png" alt="Ícone CodePen">
<img src="Imgs-artigos/CODEPEN.png" alt="Ícone CodePen">
</a>
<a href="https://www.linkedin.com/in/daniels436/" class="icon-img">
<img src="Imgs-blog/linkedin.png" alt="Ícone LinkedIn">
<img src="Imgs-artigos/linkedin.png" alt="Ícone LinkedIn">
</a>

</div>
Expand All @@ -479,7 +514,8 @@ <h4>Obrigado!</h4>
<p>&copy; 2024 Artigos / Daniel P. Souza. Todos os direitos reservados.</p>
</footer>

<script src="script.js"></script>
<script src="script-artigos.js"></script>
<script src="menu-mobile-artigos-script.js"></script>
</body>

</html>
16 changes: 16 additions & 0 deletions artigos/menu-mobile-artigos-script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// FUNCIONAMENTO-MENU-ARTIGOS-NAV
document.addEventListener("DOMContentLoaded", function() {
const btnAbrirMenu = document.querySelector('.btn-abrir-menu');
const menuMobile = document.querySelector('.menu-mobile-a');
const overlayMenu = document.querySelector('.overlay-menu');

btnAbrirMenu.addEventListener('click', () => {
menuMobile.classList.add('abrir-menu');
overlayMenu.style.display = 'block';
});

overlayMenu.addEventListener('click', () => {
menuMobile.classList.remove('abrir-menu');
overlayMenu.style.display = 'none';
});
});
33 changes: 33 additions & 0 deletions artigos/script-artigos.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}



//BALAO-INFORMATIVO-DE-TOPO-DA-PAGINA
var btnVoltarTopo = document.querySelector('.btn-topo');
var balaoInformativo = document.getElementById('balao-informativo');

btnVoltarTopo.addEventListener('click', function(event) {
event.preventDefault(); // Impede o comportamento padrão do link

// Verifica se já está no topo da página
if (window.pageYOffset === 0) {
exibirBalaoInformativo();
} else {
voltarAoTopo();
}
});

function voltarAoTopo() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}

function exibirBalaoInformativo() {
balaoInformativo.style.display = 'block';

// Remove o balão informativo após 2 segundos
setTimeout(function() {
balaoInformativo.style.display = 'none';
}, 2000);
}
34 changes: 32 additions & 2 deletions artigos/style-artigos.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ header.duo {

.primo {
position: fixed;
z-index: 88888;
z-index: 8888;
top: 0%;
margin: 0 auto;
padding: 0% auto;
Expand Down Expand Up @@ -90,7 +90,7 @@ header.duo {

.primo img {
position: fixed;
z-index: 999999;
z-index: 66666;
margin-bottom: 12px;

}
Expand Down Expand Up @@ -532,8 +532,21 @@ nav.index a {
margin-left: 12px;
margin-right: 12px;
}


.primo nav a {
display: none;

}

}







@media screen and (max-width: 800px) {

body {
Expand All @@ -548,7 +561,24 @@ nav.index a {

}

.primo nav a {
display: none;

}

.primo h1 {
margin-left: 13px;
}
}


/* SUMIR COM OS ELEMETOS NO MEU PRINCIPA */
.btn-abrir-menu{
display: none;
}
.btn-fechar{
display: none;
}
.menu-mobile{
display: none;
}
169 changes: 169 additions & 0 deletions artigos/style-menu-mobile-artigos.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@

/* SUMIR COM OS ELEMETOS NO MEU PRINCIPA */

@media screen and (max-width: 800px) {




.menu-mobile-a {
background-color: #edeef0;
position: fixed;
top: 0;
right: 0;
z-index: 9999;
width: 0%;
overflow: hidden;
transition: all ease .4s;
border-radius: 12px;
border: solid 1px #c07df734;
margin-top: 1px;
padding-bottom: 5px;
box-sizing: border-box;
padding-top: 50px;

}

.menu-mobile-a .btn-fechar {
padding: 10px 8%;
margin-top: 8px;
}



.menu-mobile-a nav ul {
text-align: right;
}

.menu-mobile-a nav ul li a {
text-decoration: none;
letter-spacing: 2px;
font-size: 20px;
}
/* ICONE-REDES-SOCIAIS-MOBILE */
.icon-img>div img {
margin-right: 13px;
border-radius: 5px;
filter: brightness(1.9);

}

.menu-mobile-a ul li a {
color: #b579fa !important;
}

.menu-mobile-a.abrir-menu {
width: 60%;

}




.menu-mobile-a .btn-fechar {
color: currentColor;
font-size: 3px;
cursor: pointer;

}





.menu-mobile-a nav ul li {
font-family: 'Roboto', sans-serif;
font-weight: 600;
font-size: 20px;
color: #722997;
padding: 15px 6%;
display: block
}


.menu-mobile-a li a:hover,
.menu-mobile-a li a:focus {
color: #93edf3 !important;


}




.icon-img {
margin-left: 10px;


}


.menu-mobile-a .icon-img img {
margin-right: 10px;
margin-top: 10px;


}

nav.menu-mobile-a ul li {

text-decoration: none
}

.menu-mobile-a {
position: fixed;
}

.btn-abrir-menu {
position: fixed;
top: 9px;
right: 9px;
z-index: 9993;
border-radius: 5px;
background-position: center;
border: 4px solid #5554550c;
box-sizing: border-box;
width: 30px;
height: 30px;
display: flex;
}

.btn-abrir-menu:hover {
box-shadow: 0 1px 1px 8px #555455d3;
background-color: #555455;
border-radius: 9%;
}





.menu-mobile-a nav ul li a:hover {
background-color: #443e4777;
color: #000000;
display: block;
border-radius: 3px;
border-bottom: 19px;
transition: .1s;
padding: 15px 6%;
transition-delay: 0.2s;
pointer-events: auto;
}

.menu-mobile-a.abrir-menu~.overlay-menu {
display: block;
}




.overlay-menu {
background-color: rgba(3, 3, 3, 0.171);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 8888;
display: none;
}}

0 comments on commit 2352afa

Please sign in to comment.