Adembc / fylo-dark-theme-landing-page-master

Challenge From Frontendmonitor

Frontend Mentor - Fylo dark theme landing page solution

This is a solution to the Fylo dark theme landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview

  • The challenge

  • Links

• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Links

• Solution URL: Github
• Live Site URL: Here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Normalize - Normalize.css makes browsers render all elements more consistently and in line with modern standards
• Fontawesome - the web's most popular icon set and toolkit.

What I learned

Some CSS code I am proud of

.container {
    padding: 0 90px;
    margin: 0 auto; 
    width: 98%;
}
@media (max-width : 992px){
    .container{
    padding : 0 45px ;
}
}
@media (max-width : 767px){
    .container {
        padding: 0 20px;
    }
}
@media (max-width : 767px){
    .access form {
        flex-direction: column; 
        padding: 0 ;
    }
}

Continued development

Learn more about SVG

Useful resources

• Elzero Web School - This helped me understand deeply the basic of Css
• CSS Grid Course From Free Code Camp - This is an amazing course which helped me finally understand CSS grid I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - Adem_bc

• Linkedin - Adem Baccara

• Instgram - adem_bc

Acknowledgments

I would thank Ousama Mohamed Elzero for his effort to simplify the learning process and make it enjoyable