Skip to content

Commit

Permalink
Add footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@coxde
coxde committed Nov 14, 2023
1 parent 6adc1b8 commit dc9300b
Show file tree
Hide file tree
Showing 2 changed files with 218 additions and 1 deletion.
89 changes: 89 additions & 0 deletions digitalcraft/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,3 +422,92 @@
padding: 1.2rem;
border-radius: 9px;
}

/***********/
/* FOOTER */
/***********/

.footer {
padding: 12.8rem 0;
border-top: 1px solid #eee;
}

.grid--footer {
grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
gap: 1.6rem;
}

.logo-col {
display: flex;
flex-direction: column;
}

.footer .logo {
gap: 0.8rem;
margin-bottom: 3.2rem;
/* Align hack */
transform: translateX(-3px);
}

.footer .logo__img {
width: 32px;
}

.footer .logo__text {
font-weight: 700;
font-size: 2.4rem;
}

.social-links {
list-style: none;
display: flex;
gap: 2.4rem;
}

.social-icon {
height: 2.4rem;
width: 2.4rem;
}

.copyright {
font-size: 1.6rem;
line-height: 1.6;
color: #767676;
margin-top: auto;
}

.footer__heading {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 4rem;
}

.contacts {
font-style: normal;
font-size: 1.6rem;
line-height: 1.6;
}

.address {
margin-bottom: 2.4rem;
}

.footer__nav {
list-style: none;
display: flex;
flex-direction: column;
gap: 2.4rem;
}

.footer__link:link,
.footer__link:visited {
text-decoration: none;
font-size: 1.6rem;
color: #767676;
transition: all 0.3s;
}

.footer__link:hover,
.footer__link:active {
color: #555;
}
130 changes: 129 additions & 1 deletion digitalcraft/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,135 @@ <h2 class="heading--secondary">
</section>
</main>

<footer class="footer"></footer>
<footer class="footer">
<div class="container grid grid--footer">
<div class="logo-col">
<div class="logo">
<!-- Credit: https://www.flaticon.com/free-icon/layer_10169782 -->
<img
class="logo__img"
src="img/logo.png"
width="32px"
height="32px"
alt="The logo of DigitalCraft. A circle code block shape on the stack shape thing."
/>
<a class="logo__text" href="#">DigitalCraft</a>
</div>

<ul class="social-links">
<li>
<a class="footer__link" href="#"
><ion-icon
class="social-icon"
name="logo-linkedin"
></ion-icon
></a>
</li>
<li>
<a class="footer__link" href="#"
><ion-icon
class="social-icon"
name="logo-facebook"
></ion-icon
></a>
</li>
<li>
<a class="footer__link" href="#"
><ion-icon
class="social-icon"
name="logo-github"
></ion-icon
></a>
</li>
</ul>

<p class="copyright">
Copyright &copy; <span class="year">2027</span> by
DigitalCraft Studio. All rights reserved.
</p>
</div>

<div class="address-col">
<p class="footer__heading">Contact Us</p>
<address class="contacts">
<p class="address">
4 Westmoreland St, Temple Bar, Dublin, D02 W951
</p>
<p>
<a class="footer__link" href="tel:016-708-212"
>016-708-212</a
><br />
<a
class="footer__link"
href="mailto:[email protected]"
>[email protected]
</a>
</p>
</address>
</div>

<nav class="nav-col">
<p class="footer__heading">Services</p>
<ul class="footer__nav">
<li>
<a class="footer__link" href="pages/service.html"
>Web Development</a
>
</li>
<li>
<a class="footer__link" href="pages/service.html"
>UI/UX Design</a
>
</li>
<li>
<a class="footer__link" href="pages/service.html"
>Graphics Design</a
>
</li>
<li>
<a class="footer__link" href="pages/service.html"
>Digital Marketing</a
>
</li>
</ul>
</nav>

<nav class="nav-col">
<p class="footer__heading">Company</p>
<ul class="footer__nav">
<li>
<a class="footer__link" href="pages/about.html"
>About Us</a
>
</li>
<li>
<a class="footer__link" href="pages/blog.html"
>Our Blog</a
>
</li>
<li>
<a class="footer__link" href="#">Press Media</a>
</li>
<li><a class="footer__link" href="#">Careers</a></li>
</ul>
</nav>

<nav class="nav-col">
<p class="footer__heading">Resources</p>
<ul class="footer__nav">
<li>
<a class="footer__link" href="#">Newsletter</a>
</li>
<li>
<a class="footer__link" href="#">Help Center</a>
</li>
<li>
<a class="footer__link" href="#">Privacy & Terms</a>
</li>
</ul>
</nav>
</div>
</footer>

<script defer src="js/script.js"></script>
<script
Expand Down

0 comments on commit dc9300b

Please sign in to comment.