This is a final project for the FreeCode Camp "Responsive Web Design" course.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Live Site URL: https://yazdrahobycha.github.io/Not-a-real-portfolio/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- FontAwesome icons library
Despite the perception of this project being relatively straightforward, there were some challenges that arose during its development. One instance was creating a hover animation utilizing the before and after pseudo-elements, which required a bit of extra effort to get right:
Implementation of `hover` elements
.btn:hover i {
transform: translateX(5px);
}
.btn:hover {
background-color: var(--color-red);
}
Additionally, this project marked my first experience integrating the "FontAwesome" icon library onto the website, which proved to be a learning experience in itself as I navigated through the process of implementation.
FontAwesome library implementation
<section id="contact" class="contact">
<h2 class="contact__title">Let's work together...</h2>
<p><i>How do you take your coffee?</i></p>
<div class="contact__links">
<a href="#" target="_blank" class="contact__link">
<i class="fab fa-facebook-square"></i>
Facebook
</a>
<a href="#" target="_blank" class="contact__link">
<i class="fab fa-github"></i>
GitHub
</a>
<a href="" target="_blank" class="contact__link">
<i class="fab fa-twitter"></i>
Twitter
</a>
<a href="mailto:ars.yar24@gmail.com" class="contact__link">
<i class="fa-solid fa-envelope"></i>
Email
</a>
<a href="mailto:ars.yar24@gmail.com" class="contact__link">
<i class="fa-solid fa-bell"></i>
Ring Me
</a>
</div>
</section>
- Enhance proficiency in utilizing icons from external libraries
- Streamline the coding process to achieve maximum efficiency
- Enhance expertise in managing responsive images.
- Instagram - @yazdrahobycha
- Telegram - Орсен