![Rogerio Nunes Calistro Rogerio Nunes Calistro](//static.vivaolinux.com.br/imagens/fotos/15c2315ad0cdb.jpg)
Calistro
(usa Ubuntu)
Enviado em 17/10/2023 - 21:08h
Calistro escreveu:
Boa noite pessoas, não pude dar retorno com o código pois andei bem ocupado. Segue código completo HTML, CSS e JAVASCRIPT:
HTML:
[quote]<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styleCss/style.css" rel="stylesheet"><!--Link para estilo CSS3-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
<script type="text/javascript" src="javascript/menu.js"></script>
<title>Documento Teste</title>
<!-- box icons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="header">
<a href="#" class="logo">Lorem ipsum dolor sit.<span class="animate" style="--i:1;"></span></a>
<div class="bx bx-menu" id="menu-icon"><span class="animate" style="--i:2;"></span></div>
<nav class="navbar">
<a href="#home" class="active">HOME</a>
<a href="#about">ABOUT</a>
<a href="#education">EDUCATION</a>
<a href="#skills">SKILLS</a>
<a href="#contact">CONTACT</a>
<span class="active-nav"></span>
<span class="animate" style="--i:2;"></span>
</nav>
</header>
<!-- home section design -->
<section class="home show-animate" id="home">
<div class="home-content">
<h1>Lorem, Ipsun Dolor <span>Lorem ipsum dolor</span><span class="animate" style="--i:2;"></span></h1>
<div class="text-animate">
<h3>LOREM IPSUM DOLOR</h3>
<span class="animate" style="--i:3;"></span>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati illum eum vitae cum deserunt pariatur officia sit ducimus corporis? Esse aliquam, eius vitae
itaque possimus debitis at?</p>
<span class="animate" style="--i:4;"></span>
<div class="btn-box">
<a href="#" class="btn">Hire me</a>
<a href="#" class="btn">Let's talk</a>
<span class="animate" style="--i:5;"></span>
</div>
</div>
<div class="home-sci">
<a href="#"><i class='bx bxl-facebook'></i></a>
<a href="#"><i class='bx bxl-linkedin'></i></a>
<a href="#"><i class='bx bxl-instagram-alt'></i></a>
<a href="#"><i class='bx bxl-github'></i></a>
<span class="animate" style="--i:6;"></span>
</div>
<div class="home-imgHover"></div>
<span class="animate home-img" style="--i:7;"></span>
</section>
<!-- ABOUT SECTION DESIGN -->
<section class="about" id="about">
<h2 class="heading">About <span>Me</span><!--<span class="animate" style="--i:1;"></span>--></h2>
<div class="about-img">
<img src="#" alt="">
<span class="circle-spin"></span>
<!--<span class="animate scroll" style="--i:2;"></span>-->
</div>
<div class="about-content">
<h3>LOREM IPSUM DOLOR ! <!--<span class="animate scroll" style="--i:3;"></span>--></h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit vel doloremque
laudantium harum dolore ab officiis quasi magni quod in pariatur, quas velit esse! Accusantium nesciunt nam tenetur unde perspiciatis laborum similique natus, corporis debitis
voluptates neque sunt in quos hic voluptate nobis nostrum beatae architecto magni
inventore. Molestiae, eum!
<!--<span class="animate scroll" style="--i:4;"></span>-->
</p>
<div class="btn-box btns">
<a href="#" class="btn">Read More</a>
<!--<span class="animate scroll" style="--i:5;"></span>-->
</div>
</div>
</section>
<!-- EDUCATION SECTION DESIGN -->
<section class="education" id="education">
<h2 class="heading">My <span>Journey</span><!--<span class="animate scroll" style="--i:1;"></span>--></h2>
<div class="education-row">
<div class="education-column">
<h3 class="title">Education<!--<span class="animate scroll" style="--i:2;"></span>--></h3>
<div class="education-box">
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2017 - 2018</div>
<h3>Master Degree - University</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. A cum, vero maiores natus
recusandae at harum laboriosam accusantium ducimus ipsam?</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2018 - 2019</div>
<h3>Master Degree - University</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
ullam iste nemo blanditiis neque sequi tempora natus.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2019 - 2020</div>
<h3>Master Degree - University</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
ullam iste nemo blanditiis neque sequi tempora natus.</p>
</div>
</div>
<!--<span class="animate scroll" style="--i:3;"></span>-->
</div>
</div>
<div class="education-column">
<h3 class="title">Experience<!--<span class="animate scroll" style="--i:5;"></span>--></h3>
<div class="education-box">
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2017 - 2018</div>
<h3>Web Developer - Company</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
ullam iste nemo blanditiis neque sequi tempora natus.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2018 - 2019</div>
<h3>Master Degree - University</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
ullam iste nemo blanditiis neque sequi tempora natus.</p>
</div>
</div>
<div class="education-content">
<div class="content">
<div class="year"><i class='bx bxs-calendar'></i> 2019 - 2020</div>
<h3>Master Degree - University</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque vitae esse provident
ullam iste nemo blanditiis neque sequi tempora natus.</p>
</div>
</div>
</div>
</div>
</section>
<!-- SKILLS SECTION DESIGN -->
<section class="skills" id="skills">
<h2 class="heading">Lorem <span>Ipsum</span><!--<span class="animate scroll" style="--i:1;"></span>--></h2>
<div class="skills-row">
<div class="skills-column">
<h3 class="title">Coding Skills<!--<span class="animate scroll" style="--i:2;"></span>--></h3>
<div class="skills-box">
<div class="skills-content">
<div class="progress">
<h3>LOREM <span>90%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM <span>80%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM <span>80%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM <span>80%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM <span>70%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM <span>70%</span></h3>
<div class="bar"><span></span></div>
</div>
</div>
<!--<span class="animate scroll" style="--i:3;"></span>-->
</div>
</div>
<!--INICIO DE SESSÃO-->
<div class="skills-column">
<h3 class="title">LOREM IPSUM DOLOR<!--<span class="animate scroll" style="--i:5;"></span>--></h3>
<div class="skills-box">
<div class="skills-content">
<div class="progress">
<h3>LOREM IPSUM <span>70%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM IPSUM <span>85%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM IPSUM <span>70%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM IPSUM <span>50%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM IPSUM <span>70%</span></h3>
<div class="bar"><span></span></div>
</div>
<div class="progress">
<h3>LOREM IPSUM <span>70%</span></h3>
<div class="bar"><span></span></div>
</div>
</div>
<!--<span class="animate scroll" style="--i:6;"></span>-->
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION DESIGN -->
<section class="contact" id="contact">
<h2 class="heading">Lorem <span>Ipsum !</span><!--<span class="animate scroll" style="--i:1;"></span>--></h2>
<form id="frmMesage" name="formMesage" action="#" method="post">
<div class="input-box">
<div class="input-field">
<input type="text" placeholder="*Nome Completo" title="*Preenchimento obrigatório." required>
<span class="focus"></span>
</div>
<div class="input-field">
<input type="text" placeholder="*seu@email.com" title="*Preenchimento obrigatório." required>
<span class="focus"></span>
</div>
<!--<span class="animate scroll" style="--i:3;"></span>-->
</div>
<div class="input-box">
<div class="input-field">
<input type="number" placeholder="*(xx) x xxxx-xxxx" title="*Preenchimento obrigatório." required>
<span class="focus"></span>
</div>
<div class="input-field">
<input type="text" placeholder="*Assunto do email" title="*Preenchimento obrigatório." required>
<span class="focus"></span>
</div>
<!--<span class="animate scroll" style="--i:5;"></span>-->
</div>
<div class="textarea-field">
<textarea name="" id="" cols="30" rows="10" placeholder="*Sua Mensagem" title="*Preenchimento obrigatório." required></textarea>
<span class="focus"></span>
<!--<span class="animate scroll" style="--i:7;"></span>-->
</div>
<div class="btn-box btns" >
<button type="submit" class="btn" value="enviar">Enviar</button>
<!--<span class="animate scroll" style="--i:9;"></span>-->
</div>
</form>
</section>
<div class="footer">
<div class="footer-text">
<p>Copyright © 2023 by Lorem Ipsum Dolor | All Rights Reserved.</p>
<!--<span class="animate scroll" style="--i:1;"></span>-->
</div>
<div class="footer-iconTop">
<a href="#"><i class='bx bx-up-arrow-alt'></i></a>
<!--<span class="animate scroll" style="--i:3;"></span>-->
</div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
/*-------CSS3 DOCUMENT------*/
/*RESET*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
scroll-behavior: smooth;
font-family: 'Quicksand', sans-serif;
}
:root {
--bg-color: #081b29;
--second-bg-color: #112e42;
--text-color: #ededed;
--main-color: #00abf0;
}
html {
font-size: 62.5%;
overflow-x: hidden;
}
body {
background: var(--bg-color);
color: var(--text-color);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 2rem 9%;
background: var(--bg-color);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
transition: .3s;
}
.header.sticky {
display: flex; /*SOMENTE UM TESTE DE DISPLAY*/
background: var(--bg-color);
transition: .0s;
}
.logo {
position: relative;
font-size: 2.5rem;
color: var(--text-color);
font-weight: 600;
}
.navbar {
position: relative;
}
.navbar a {
font-size: 1.7rem;
color: var(--text-color);
font-weight: 500;
margin-left: 3.5rem;
transition: .3s;
}
.navbar a:hover,
.navbar a.active {
color: var(--main-color);
}
#menu-icon {
position: relative;
font-size: 3.6rem;
color: var(--text-color);
cursor: pointer;
display: none;
}
section {
min-height: 100vh;
padding: 10rem 9% 2rem;
}
.home {
display: flex;
align-items: center;
padding: 0 9%;
background: url('') no-repeat;
/*INSERIR IMAGEM*/
background-size: cover;
background-position: center;
}
.home-content {
max-width: 60rem;
z-index: 99;
}
.home-content h1 {
position: relative;
display: inline-block;
font-size: 5.6rem;
font-weight: 700;
line-height: 1.3;
}
.home-content h1 span {
color: var(--text-color);
}
.home-content .text-animate {
position: relative;
width: 32.8rem;
}
.home-content .text-animate h3 {
font-size: 3.2rem;
font-weight: 700;
color: transparent;
-webkit-text-stroke: .7px var(--main-color);
background-image: linear-gradient(var(--main-color), var(--main-color));
background-repeat: no-repeat;
-webkit-background-clip: text;
background-position: -33rem 0;
animation: homeBgText 6s linear infinite;
animation-delay: 2s;
}
.home.show-animate .home-content .text-animate h3 {
animation: homeBgText 6s linear infinite;
animation-delay: 2s;
}
.home-content .text-animate h3::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border-right: 2px solid var(--main-color);
z-index: -1;
animation: homeCursorText 6s linear infinite;
animation-delay: 2s;
}
.home.show-animate .home-content .text-animate h3::before {
animation: homeCursorText 6s linear infinite;
animation-delay: 2s;
}
.home-content p {
position: relative;
font-size: 1.6rem;
margin: 2rem 0 4rem;
}
.btn-box {
position: relative;
display: flex;
justify-content: space-between;
width: 34.5rem;
height: 5rem;
}
.btn-box .btn {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
width: 15rem;
height: 100%;
background: var(--main-color);
border: .2rem solid var(--main-color);
border-radius: .8rem;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: .1rem;
color: var(--bg-color);
z-index: 1;
overflow: hidden;
transition: .5s;
}
.btn-box .btn:hover {
color: var(--main-color);
}
.btn-box .btn:nth-child(2) {
background: transparent;
color: var(--main-color);
}
.btn-box .btn:nth-child(2):hover {
color: var(--bg-color);
}
.btn-box .btn:nth-child(2)::before {
background: var(--main-color);
}
.btn-box .btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--bg-color);
z-index: -1;
transition: .5s;
}
.btn-box .btn:hover::before {
width: 100%;
}
.home-sci {
position: absolute;
bottom: 4rem;
width: 170px;
display: flex;
justify-content: space-between;
}
.home-sci a {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: transparent;
border: .2rem solid var(--main-color);
border-radius: 50%;
font-size: 20px;
color: var(--main-color);
z-index: 1;
overflow: hidden;
transition: .5s;
}
.home-sci a:hover {
color: var(--bg-color);
}
.home-sci a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--main-color);
z-index: -1;
transition: .5s;
}
.home-sci a:hover::before {
width: 100%;
}
.home-imgHover {
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
background: transparent;
transition: 3s;
}
.home-imgHover:hover {
background: var(--bg-color);
opacity: .8;
}
.about {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 2rem;
background: var(--second-bg-color);
padding-bottom: 6rem;
}
.heading {
position: relative;
display: inline-block;
font-size: 5rem;
margin-bottom: 3rem;
text-align: center;
}
span {
color: var(--main-color);
}
.about-img {
position: relative;
width: 25rem;
height: 25rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.about-img img {
width: 90%;
border-radius: 50%;
border: .2rem solid var(--main-color);
}
.about-img .circle-spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0);
width: 100%;
height: 100%;
border-radius: 50%;
border-top: .2rem solid var(--second-bg-color);
border-bottom: .2rem solid var(--second-bg-color);
border-left: .2rem solid var(--main-color);
border-right: .2rem solid var(--main-color);
animation: aboutSpinner 8s linear infinite;
}
.about-content {
text-align: center;
}
.about-content h3 {
position: relative;
display: inline-block;
font-size: 2.6rem;
}
.about-content p {
position: relative;
font-size: 1.6rem;
margin: 2rem 0 3rem;
}
.btn-box.btns {
display: inline-block;
width: 15rem;
}
.btn-box.btns a::before {
background: var(--second-bg-color);
}
/**** EDUCATION ****/
.education {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: auto;
padding-bottom: 5rem;
}
.education .education-row {
display: flex;
flex-wrap: wrap;
gap: 5rem;
}
.education-row .education-column {
flex: 1 1 40rem;
}
.education-column .title {
position: relative;
display: inline-block;
font-size: 2.5rem;
margin: 0 0 1.5rem 2rem;
}
.education-column .education-box {
position: relative;
border-left: .2rem solid var(--main-color);
}
.education-box .education-content {
position: relative;
padding-left: 2rem;
}
.education-box .education-content::before {
content: '';
position: absolute;
top: 0;
left: -1.1rem;
width: 2rem;
height: 2rem;
background: var(--main-color);
border-radius: 50%;
}
.education-content .content {
position: relative;
padding: 1.5rem;
border: .2rem solid var(--main-color);
border-radius: .6rem;
margin-bottom: 2rem;
overflow: hidden;
}
.education-content .content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--second-bg-color);
z-index: -1;
transition: .5s;
}
.education-content .content:hover::before {
width: 100%;
}
.education-content .content .year {
font-size: 1.5rem;
color: var(--main-color);
padding-bottom: .5rem;
}
.education-content .content .year {
padding-right: .5rem;
}
.education-content .content h3 {
font-size: 2rem;
}
.education-content .content p {
font-size: 1.6rem;
padding-top: .5rem;
}
/**** SKILLS ****/
.skills {
min-height: auto;
padding-bottom: 7rem;
background: var(--second-bg-color);
}
.skills h2 {
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.skills .skills-row {
display: flex;
flex-wrap: wrap;
gap: 5rem;
}
.skills-row .skills-column {
flex: 1 1 40rem;
}
.skills-column .title {
position: relative;
display: inline-block;
font-size: 2.5rem;
margin: 0 0 1.5rem;
}
.skills-column .skills-box {
position: relative;
}
.skills-box .skills-content {
position: relative;
border: .2rem solid var(--main-color);
border-radius: .6rem;
padding: .5rem 1.5rem;
z-index: 1;
overflow: hidden;
}
.skills-box .skills-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--bg-color);
z-index: -1;
transition: .5s;
}
.skills-box .skills-content:hover::before {
width: 100%;
}
.skills-content .progress {
padding: 1rem 0;
}
.skills-content .progress h3 {
font-size: 1.7rem;
display: flex;
justify-content: space-between;
}
.skills-content .progress h3 span {
color: var(--text-color);
}
.skills-content .progress .bar {
height: 2.5rem;
border-radius: .6rem;
border: .2rem solid var(--main-color);
padding: .5rem;
margin: 1rem 0;
}
.skills-content .progress .bar span {
display: block;
height: 100%;
border-radius: .3rem;
background: var(--main-color);
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(1) .bar span {
width: 90%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(2) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(3) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(4) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(5) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(6) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(7) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(8) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(9) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(10) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(11) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(12) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(13) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(14) .bar span {
width: 80%;
}
.skills-column:nth-child(1) .skills-content .progress:nth-child(15) .bar span {
width: 80%;
}
/********** PROFISSIONAL SKILLS **********/
.skills-column:nth-child(2) .skills-content .progress:nth-child(1) .bar span {
width: 20%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(2) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(3) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(4) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(5) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(6) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(7) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(8) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(9) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(10) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(11) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(12) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(13) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(14) .bar span {
width: 80%;
}
.skills-column:nth-child(2) .skills-content .progress:nth-child(15) .bar span {
width: 80%;
}
.contact {
min-height: auto;
padding-bottom: 7rem;
}
.contact h2 {
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.contact form {
max-width: 70rem;
margin: 0 auto;
text-align: center;
}
.contact form .input-box {
position: relative;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.contact form .input-box .input-field {
position: relative;
width: 49%;
margin: .8rem 0;
}
.contact form .input-box .input-field input,
.contact form .textarea-field textarea {
width: 100%;
height: 100%;
padding: 1.5rem;
font-size: 1.6rem;
color: var(--text-color);
background: transparent;
border-radius: .6rem;
border: .2rem solid var(--main-color);
}
.contact form .input-box .input-field input::placeholder,
.contact form .textarea-field textarea::placeholder {
color: var(--text-color);
}
.contact form .focus {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--second-bg-color);
border-radius: .6rem;
z-index: -1;
transition: .5s;
}
.contact form .input-box .input-field input:focus~.focus,
.contact form .input-box .input-field input:valid~.focus,
.contact form .textarea-field textarea:focus~.focus,
.contact form .textarea-field textarea:valid~.focus {
width: 100%;
}
.contact form .textarea-field {
position: relative;
margin: .8rem 0 2.7rem;
display: flex;
}
.contact form .textarea-field textarea {
resize: none;
}
.contact form .btn-box.btns .btn {
cursor: pointer;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 2rem 9%;
background: var(--second-bg-color);
}
.footer-text,
.footer-iconTop {
position: relative;
}
.footer-text p {
font-size: 1.6rem;
}
.footer-iconTop a {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
padding: .8rem;
background: var(--main-color);
border: .2rem solid var(--main-color);
border-radius: .6rem;
z-index: 1;
overflow: hidden;
}
.footer-iconTop a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--second-bg-color);
z-index: -1;
transition: .5s;
}
.footer-iconTop a:hover::before {
width: 100%;
}
.footer-iconTop a i {
font-size: 2.4rem;
color: var(--bg-color);
transition: .5s;
}
.footer-iconTop a:hover i {
color: var(--main-color);
}
/****** ANIMATION RELOAD ANDA SCROLL ******/
.animate {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--bg-color);
z-index: 98;
}
.animate.home-img {
width: 50%;
}
.logo .animate,
.navbar .animate,
#menu-icon .animate,
.home.show-animate .animate {
animation: showRight 1s ease forwards;
animation-delay: calc(.3s * var(--i));
}
.animate.scroll {
transition: 1s ease;
transition-delay: calc(.3s / var(--i));
animation: none;
}
section:nth-child(odd) .animate.scroll,
.footer,
.animate.scroll {
background: var(--second-bg-color);
}
.education .education-box .animate.scroll {
width: 105%;
}
.about.show-animate .animate.scroll,
.education.show-animate .animate.scroll,
.skills.show-animate .animate.scroll,
.contact.show-animate .animate.scroll,
.footer.show-animate .animate.scroll {
transition-delay: calc(.3s * var(--1));
width: 0;
}
/******** BRAKPOINTS *******/
@media (max-width: 1200px) {
html {
font-size: 55%;
}
}
@media (max-width: 991px) {
.header {
padding: 2rem 4%;
}
section {
padding: 10rem 4% 2rem;
}
.home {
padding: 0 4%;
}
.footer {
padding: 2rem 4%;
}
}
@media (max-width: 768px) {
.header {
background: var(--bg-color);
}
#menu-icon {
display: block;
}
.navbar {
position: absolute;
top: 100%;
left: -100%;
width: 100%;
padding: 1rem 4%;
background: var(--main-color);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
z-index: 1;
transition: .25s ease;
transition-delay: .25s;
}
.navbar.active {
left: 0;
transition-delay: 0s;
}
.navbar .active-nav {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--bg-color);
border-top: .1rem solid rgba(0, 0, 0, .2);
z-index: -1;
transition: .25s ease;
transition-delay: 0s;
}
.navbar.active .active-nav {
left: 0;
transition-delay: .25s;
}
.navbar a {
border-radius: 15vh;
display: block;
font-size: 2rem;
margin: 3rem 0;
padding: 1.3%;
text-align: center;
transform: translateX(-20rem);
transition: .25s ease;
transition-delay: 0s;
}
.navbar a:hover {
background: var(--second-bg-color);
color: var(--text-color);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .4);
}
.navbar.active a {
transform: translateX(0);
transition-delay: .25s;
}
.home-imgHover {
pointer-events: none;
background: var(--bg-color);
opacity: .6;
}
}
@media (max-width: 780px) {
.header {
background: var(--bg-color);
}
#menu-icon {
display: block;
}
.navbar {
position: absolute;
top: 100%;
left: -100%;
width: 100%;
padding: 1rem 4%;
background: var(--main-color);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
z-index: 1;
transition: .25s ease;
transition-delay: .25s;
}
.navbar.active {
left: 0;
transition-delay: 0s;
}
.navbar .active-nav {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: var(--bg-color);
border-top: .1rem solid rgba(0, 0, 0, .2);
z-index: -1;
transition: .25s ease;
transition-delay: 0s;
}
.navbar.active .active-nav {
left: 0;
transition-delay: .25s;
}
.navbar a {
border-radius: 15vh;
text-align: center;
display: block;
font-size: 2rem;
margin: 3rem 0;
transform: translateX(-20rem);
transition: .25s ease;
transition-delay: 0s;
}
.navbar.active a {
transform: translateX(0);
transition-delay: .25s;
}
.home-imgHover {
pointer-events: none;
background: var(--bg-color);
opacity: .6;
}
}
@media (max-width: 520px) {
html {
font-size: 50%;
}
.home-content h1 {
display: flex;
flex-direction: column;
}
.home-sci {
width: 160px;
}
.home-sci a {
width: 38px;
height: 38px;
}
}
@media (max-width: 462px) {
.home-content h1 {
font-size: 5.2rem;
}
.education {
padding: 10rem 4% 5rem 5%;
}
.contact form .input-box .input-field {
width: 100%;
}
.footer {
flex-direction: column-reverse;
}
.footer p {
margin-top: 2rem;
text-align: center;
}
}
@media (max-width: 371px) {
.home {
justify-content: center;
}
.home-content {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
}
.home-content h1 {
font-size: 5rem;
}
}
/******* KEYFRAMES ANIMATION *******/
@keyframes homeBgText {
0%, 10%, 100% {
background-position: -33rem 0;
}
65%,
85% {
background-position: 0 0;
}
}
@keyframes homeCursorText {
0%,
10%,
100% {
width: 0;
}
65%,
78%,
85% {
width: 100%;
opacity: 1;
}
75%,
81% {
opacity: 0;
}
}
@keyframes aboutSpinner {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes showRight {
100% {
width: 0;
}
}
JAVASCRIPT:
// TOGGLE ICON NAVBAR
let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
menuIcon.onclick = () => {
menuIcon.classList.toggle('bx-x');
navbar.classList.toggle('active');
}
let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');
window.onscroll = () => {
sections.forEach(sec => {
let top = window.scrollY;
let offset = sec.offsetTop - 100;
let height = sec.offsetHeight;
let id = sec.getAttribute('id');
if(top >= offset && top < offset + height) {
navLinks.forEach(links => {
links.classList.remove('active');
document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
});
sec.classList.add('show-animate');
}
else {
sec.classList.remove('show-animate');
}
});
let header = document.querySelector('header')
header.classList.toggle('sticky', window.scrollY > 100);
menuIcon.classList.remove('bx-x');
navbar.classList.remove('active');
let footer = document.querySelector('footer');
footer.classList.toggle('show-animate', this.innerHeight + this.scrollY >= document.scrollingElement.scrollHeight);
}
Mais uma vez peço desculpas pelo tempo e fico grato pela atenção de todos.