MarcoFranca / challengeSkilled

This is a responsive page challenge that I chose to train and improve my knowledge of HTML and CSS.

Welcome! 👋

This is a solution to the challenge Skilled e-learning landing page challenge on Frontend Mentor. of a preview stats card made to test my knowledge in html and css.

---

Table of contents

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

Overview

The challenge:

Users should be able to:

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

Links

• solution URL
• live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• desktop-first

What I learned

I reinforced my CSS knowledge in position: absolute , :hoover, @media query and overflow.

---

.firstContainer--img{
    background-image: url("../../assets/[e-mail]");
    background-size:cover ;
    background-repeat: no-repeat;
    position: absolute;
    top: -150px;
    right: 0;
    width: 720px;
    height: 950px;
}

.button--2:hover{
    background-image: linear-gradient(rgba(255, 111, 72, 0.5), rgba(240, 42, 166, 0.5));
}

@media screen  and (max-width: 425px){
    main{
        position: relative;
        background-image: linear-gradient(#FFFFFF 50%, rgb(239, 241, 254));
        max-width: 100vw;
        overflow: hidden;
        padding: 0;
    }

}

Continued development

I will dedicate myself to future projects using javascript concepts along with html and css which I am studying and improving myself

Author

• Linkdin - Marco Tullio Franca
• Frontend Mentor - @MarcoFranca