Skip to content

Commit

Permalink
💄 "feat: Estilizando o footer"
Browse files Browse the repository at this point in the history
  • Loading branch information
@JrValerio
JrValerio committed Jan 15, 2024
1 parent d19e0eb commit 9a421b3
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 52 deletions.
104 changes: 52 additions & 52 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,61 +197,61 @@ <h2 class="about__title">Bringing you the <span>best</span> audio gear</h2>
<!-- Rodapé do site -->
<footer class="footer">
<div class="footer__content">
<div class="footer__brand">
<img
src="./starter-code/assets/shared/desktop/logo.svg"
alt="Logo audiophile"
/>
<div class ='footer__line'></div>

<div class="footer__Social">


<div class="footer__brand">
<img
src="./starter-code/assets/shared/desktop/logo.svg"
alt="Logo audiophile"
/>
</div>
<div class="footer__social-media">
<nav class="footer__navigation">
<ul class="footer__nav-list">
<li><a href="/home">Home</a></li>
<li><a href="/headphones">Headphones</a></li>
<li><a href="/speakers">Speakers</a></li>
<li><a href="/earphones">Earphones</a></li>
</ul>
</nav>

</div>
</div>
<p class="footer__description">
Audiophile is an all in one stop to fulfill your audio needs. We're a
small team of music lovers and sound specialists who are devoted to
helping you get the most out of personal audio. Come and visit our
demo facility - we’re open 7 days a week.
</p>
<div class="footer__social-media">
<nav class="footer__navigation">
<ul class="footer__nav-list">
<li><a href="/home">Home</a></li>
<li><a href="/headphones">Headphones</a></li>
<li><a href="/speakers">Speakers</a></li>
<li><a href="/earphones">Earphones</a></li>


<div class="footer__description">
<p class="footer__text">
Audiophile is an all in one stop to fulfill your audio needs. We're a
small team of music lovers and sound specialists who are devoted to
helping you get the most out of personal audio. Come and visit our
demo facility - we’re open 7 days a week.
</p>

<ul class="footer__social-icons">
<li>
<a href="https://www.facebook.com" target="_blank" aria-label="Facebook" class="footer__icon">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com" target="_blank" aria-label="Twitter" class="footer__icon">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com" target="_blank" aria-label="Instagram" class="footer__icon">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</nav>
<ul class="footer__social-icons">
<li>
<a
href="https://www.facebook.com"
target="_blank"
aria-label="Facebook"
>
<img src="path/to/facebook-icon.svg" alt="Facebook" />
</a>
</li>
<li>
<a
href="https://www.twitter.com"
target="_blank"
aria-label="Twitter"
>
<img src="path/to/twitter-icon.svg" alt="Twitter" />
</a>
</li>
<li>
<a
href="https://www.instagram.com"
target="_blank"
aria-label="Instagram"
>
<img src="path/to/instagram-icon.svg" alt="Instagram" />
</a>
</li>
</ul>
</div>
<div class="footer__copyright">
<p>Copyright 2021. All Rights Reserved</p>
</div>
</div>
</div>
<div class="footer__copyright">
<p>Copyright 2021. All Rights Reserved</p>
</div>
</footer>

<script type="module" src="./starter-code/src/script/index.js"></script>
Expand Down
120 changes: 120 additions & 0 deletions starter-code/src/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,3 +259,123 @@
line-height: 25px;
opacity: 0.5;
}

.footer {
height: 365px;

background-color: var(--black-200);
color: var(--white-100);
padding: 16px 0;
position: relative;
}

.footer__line {
background-color: var(--orange-100);
height: 4px;
width: 100px;
position: absolute;
top: 0px;
}

.footer__content {
padding-top: 75px;
}

.footer__Social {
display: flex;
justify-content: space-between;
}

.footer__brand img {
width: auto;
height: 1.5rem;
margin-bottom: 2rem;
}

.footer__social-media {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footer__navigation {
margin-bottom: 2rem;
}

.footer__nav-list {
list-style: none;
padding: 0;
}

.footer__nav-list li {
display: inline-block;
margin: 0 1rem;
}

.footer__nav-list li a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
font-size: 0.875rem;
line-height: 25px;
letter-spacing: 2px;
}

.footer__nav-list li a:hover {
color: #d87d4a;
}

.footer__description {
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.footer__text {
max-width: 540px;
color: var(--white-100);
font-size: var(--fs-300);
line-height: 25px;
font-weight: 500;
font-style: normal;
max-width: 50%;
opacity: 0.5;
margin-bottom: 1.5rem;
}

.footer__social-icons {
display: flex;
top: 25px;

list-style: none;
}

.footer__social-icons li {
margin: 0 0.5rem;
}

.footer__social-icons li a {
color: #ffffff;
font-size: 1.5rem;
transition: color 0.3s ease;
}

.footer__social-icons li a:hover {
color: #d87d4a;
}

.footer__social-icons li a i {
text-decoration: none;
}

.footer__copyright {
margin-top: 25px;

color: var(--white-100);
font-size: var(--fs-300);
line-height: 25px;
font-weight: 700;
font-style: normal;
max-width: 50%;
opacity: 0.5;
}

0 comments on commit 9a421b3

Please sign in to comment.