• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Users should be able to:

• See hover and focus states for all interactive elements on the page
• View the optimal layout for the interface depending on their device's screen size

• Live Site URL: Live Site

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• CSS Variables
• Custom Font Implementation

During this project, I focused on creating a clean, responsive design using CSS variables for consistent theming. I implemented hover states for interactive elements and worked with custom fonts to achieve the desired visual style.

<div class="profile-card">
  <img src="/assets/images/seyed-ahmad-gholami.webp" alt="Seyed Ahmad Gholami" class="profile-img" />
  <h1 class="profile-name">Seyed Ahmad Gholami</h1>
  <p class="profile-location">London, United Kingdom</p>
  <p class="profile-bio">"Front-end developer and avid reader."</p>
  <!-- Social links -->
</div>

:root {
  --green: hsl(75, 94%, 57%);
  --white: hsl(0, 0%, 100%);
  --grey-700: hsl(0, 0%, 20%);
  --grey-800: hsl(0, 0%, 12%);
  --grey-900: hsl(0, 0%, 8%);
}

.social-link:hover {
  background-color: var(--green);
  color: var(--grey-900);
}

In future projects, I plan to:

• Enhance my CSS animations and transitions
• Explore more advanced responsive design techniques
• Implement accessibility best practices
• Work with CSS Grid for more complex layouts

• CSS Variables Guide - This helped me implement a consistent color scheme using CSS variables.
• Flexbox Guide - An excellent resource for understanding Flexbox layout.
• Web Font Implementation - This article helped me implement custom fonts properly.

• Website - Seyed Ahmad Gholami
• GitHub - seyedahmaddv
• LinkedIn - seyedahmaddv
• Dev.to - seyedahmaddv