Skip to content

Commit

Permalink
bugs corrigidos - barra de navegação, classe css e cor de fontes
Browse files Browse the repository at this point in the history
  • Loading branch information
@felipetaua
felipetaua committed Jan 9, 2025
1 parent 6e462cf commit 6053b90
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 91 deletions.
55 changes: 25 additions & 30 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,9 +151,9 @@ body.active { overflow: hidden; }

.container { padding-inline: 15px; }

.shape {display: none;}
.shape { display: none; }

.section {padding-block: var(--section-padding);}
.section { padding-block: var(--section-padding); }

.h1,
.h2,
Expand All @@ -165,7 +165,7 @@ body.active { overflow: hidden; }
line-height: 1.2;
}

.h2 {
.h1 {
font-size: var(--fs-1);
font-weight: var(--fw-400);
}
Expand All @@ -174,23 +174,21 @@ body.active { overflow: hidden; }
.h3,
.h4,
.h5,
.h6 { font-weight: var(--fw-300);}
.h6 { font-weight: var(--fw-300); }

.h2 { font-size: var(--fs-2);}
.h2 { font-size: var(--fs-2); }

.h3 { font-size: var(--fs-3);}
.h3 { font-size: var(--fs-3); }

.h4 { font-size: var(--fs-4);}
.h4 { font-size: var(--fs-4); }

.h5 { font-size: var(--fs-5);}

.h6 { font-size: var(--fs-6);}
.h5 { font-size: var(--fs-5); }

.h6 { font-size: var(--fs-6); }

/*-----------------------------------*\
#LOADING
\*-----------------------------------*/

.loading {
position: fixed;
top: 0;
Expand All @@ -200,18 +198,15 @@ body.active { overflow: hidden; }
background-color: var(--white);
z-index: 5;
transform-origin: bottom;
transition: .5s var(--cubic-in);
transition-delay: .5s;

display: none;
transition: 0.5s var(--cubic-in);
transition-delay: 0.5s;
}

.loading.loaded {
transform: scaleY(0);
pointer-events: none;
}


.loading > * {
position: absolute;
top: 50%;
Expand All @@ -220,13 +215,13 @@ body.active { overflow: hidden; }
transition: var(--transition-2);
}

.loading.loaded > * { opacity: 0;}
.loading.loaded > * { opacity: 0; }

.loading .circle { animation: rotate360 1.5s linear infinite;}
.loading .circle { animation: rotate360 1.5s linear infinite; }

@keyframes rotate360 {
0% { transform: translate(-50%, -50%) rotate(0);}
100% { transform: translate(-50%, -50%) rotate(1turn);}
0% { transform: translate(-50%, -50%) rotate(0); }
100% { transform: translate(-50%, -50%) rotate(1turn); }
}


Expand Down Expand Up @@ -268,17 +263,17 @@ body.active { overflow: hidden; }
padding: 25px;
overflow-y: auto;
z-index: 2;
transition: .25s var(--cubic-out);
transition: 0.25s var(--cubic-out);
visibility: hidden;
}

.navbar.active {
visibility: visible;
visibility: visible;
transform: translateX(-280px);
transition-duration: .5s;
transition-duration: 0.5s;
}

.navbar-top .logo .img {width: 130px;}
.navbar-top .logo .img { width: 130px; }

.nav-close-btn {
width: 25px;
Expand All @@ -295,9 +290,9 @@ body.active { overflow: hidden; }

.nav-close-btn .one { transform: rotate(45deg) translate(2px, 2px); }

.nav-close-btn .two { transform: rotate(-45deg);}
.nav-close-btn .two { transform: rotate(-45deg); }

.nav-close-btn:is(:hover, :focus-visible) .span { background-color: var(--radical-red);}
.nav-close-btn:is(:hover, :focus-visible) .span { background-color: var(--radical-red); }

.navbar-list {
text-align: center;
Expand All @@ -312,7 +307,7 @@ body.active { overflow: hidden; }
transition: var(--transition-1);
}

.navbar-link:is(:hover, :focus-visible) { color: var(--radical-red);}
.navbar-link:is(:hover, :focus-visible) { color: var(--radical-red); }

.login-btn {
display: flex;
Expand All @@ -327,7 +322,7 @@ body.active { overflow: hidden; }
margin-block-end: 50px;
}

.login-btn .span { font-weight: var(--fw-500);}
.login-btn .span { font-weight: var(--fw-500); }

.navbar-title {
font-size: var(--fs-8);
Expand All @@ -349,7 +344,7 @@ body.active { overflow: hidden; }
font-weight: var(--fw-400);
}

.navbar .contact-link:is(:hover, :focus-visible) {text-decoration: underline;}
.navbar .contact-link:is(:hover, :focus-visible) { text-decoration: underline; }

.overlay {
position: fixed;
Expand All @@ -362,7 +357,7 @@ body.active { overflow: hidden; }
}

.overlay.active {
opacity: .75;
opacity: 0.75;
pointer-events: all;
}

Expand Down
133 changes: 72 additions & 61 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,70 +25,81 @@


<!-- header -->
<header class="header" data-header>
<header class="header" data-header>
<div class="container">
<a href="#" class="logo">
<img src="./assets/images/logo.svg" width="40" height="40" alt="Richard home">
</a>

<button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
<img src="./assets/images/menu.svg" width="17" height="17" alt="menu icon">

<a href="#" class="logo">
<img src="./assets/images/logo.svg" width="40" height="40" alt="Richard home">
</a>

<button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
<img src="./assets/images/menu.svg" width="17" height="17" alt="menu icon">
</button>

<nav class="navbar" data-navbar>

<div class="navbar-top">
<a href="#" class="logo">
<img src="./assets/images/nav-logo.svg" width="140" height="40" alt="Richard home" class="img">
</a>

<button class="nav-close-btn" aria-label="close menu" data-nav-toggler>
<span class="span one"></span>
<span class="span two"></span>
</button>
</div>

<ul class="navbar-list">

<li class="navbar-item">
<a href="#home" class="navbar-link" data-nav-link>Home</a>
</li>

<li class="navbar-item">
<a href="#gallery" class="navbar-link" data-nav-link>Gallery</a>
</li>

<li class="navbar-item">
<a href="#about" class="navbar-link" data-nav-link>About</a>
</li>

<li class="navbar-item">
<a href="#services" class="navbar-link" data-nav-link>Services</a>
</li>

<li class="navbar-item">
<a href="#portfolio" class="navbar-link" data-nav-link>Portfolio</a>
</li>

<li class="navbar-item">
<a href="#contact" class="navbar-link" data-nav-link>Contact us</a>
</li>

</ul>

<button class="login-btn">
<img src="./assets/images/user.svg" width="21" height="21" alt="user icon">

<span class="span">Login</span>
</button>

<nav class="navbar" data-navbar>
<div class="navbar-top">
<a href="" class="logo">
<img src="./assets/images/nav-logo.svg" width="140" height="40" alt="Richard home" class="img">
</a>

<button class="nav-close-btn" aria-label="close menu" data-nav-toggler>
<span class="span one"></span>
<span class="span two"></span>
</button>
</div>

<ul class="navbar-list">
<li class="navbar-item">
<a href="#home" class="navbar-link" data-nav-link>Home</a>
</li>
<li class="navbar-item">
<a href="#gallery" class="navbar-link"data-nav-link>Gallery</a>
</li>
<li class="navbar-item">
<a href="#about" class="navbar-link"data-nav-link>About</a>
</li>
<li class="navbar-item">
<a href="#services" class="navbar-link"data-nav-link>Services</a>
</li>
<li class="navbar-item">
<a href="#portfolio" class="navbar-link"data-nav-link>Portfolio</a>
</li>
<li class="navbar-item">
<a href="#contact" class="navbar-link"data-nav-link>Contact us</a>
</li>
</ul>

<button class="login-btn">
<img src="./assets/images/user.svg" width="21" height="21" alt="user icon">

<span class="span">login</span>
</button>

<p class="navbar-title">Meu Endereço</p>

<address class="navbar-text">
3287 Indiana Avenue, Waialua, Hawaii
</address>

<p class="navbar-text">
Urgent issue? call us at
<a href="tell:808-561-3846" class="contact-link">808-561-3846</a>
</p>
</nav>

<div class="overlay active" data-nav-toggler data-overlay></div>

<p class="navbar-title">My Address</p>

<address class="navbar-text">
3287 Indiana Avenue, Waialua, Hawaii
</address>

<p class="navbar-text">
Urgent issue? call us at
<a href="tel:8085613846" class="contact-link">808-561-3846</a>
</p>

</nav>

<div class="overlay" data-nav-toggler data-overlay></div>

</div>
</header>
</header>

<!-- herosection-->
<main>
Expand Down

0 comments on commit 6053b90

Please sign in to comment.