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
.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- desktop-first
I reinforced my CSS knowledge in position: absolute
, :hoover
, @media query
and overflow
.
.firstContainer--img{
background-image: url("../../assets/image-hero-desktop@2x.png");
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;
}
}
I will dedicate myself to future projects using javascript concepts along with html and css which I am studying and improving myself
- Linkdin - Marco Tullio Franca
- Frontend Mentor - @MarcoFranca