I'm a newbie to front-end development at the moment, but learning everything about it seems so exciting and engaging I'm sure I won't be for much longer!
It looks like your card component takes up the entire width and height of the screen. I suggest wrapping all of its elements in a container (which could be <article> or a <div>), giving that container a fixed width and height (roughly the same as that of the card component in the design JPGsβjust eyeball it), and the using flexbox to center the card component in the viewport. π
Otherwise, your solution looks pretty good and responds well! π
Great job on this challenge! Your solution looks good and responds well! Kudos for making the toggle-switch and buttons accessible to keyboard users! π
I only suggest adding a hover state to the buttons on the pricing cards. π
Allowing the hero image to decrease in size when the width of the page decreases so that there's still some room for the text content to remain in the desktop layout for a while and no horizontal scroll bar appears along the bottom of the page in the mobile layout of the site.
Adding background-repeat: no-repeat and background-size: cover to the background image so that fills the entire screen.
Good work on this challenge! Your solution looks good! π
I suggest using multiple CSS backgrounds to add both the top-left and bottom-right SVG backgrounds to your solution. Here' a great article from CSS tricks on just that to get you started, if you like! π
Latest Comments
RE: Stephen DueΓ±as's "HTML, CSS" solution
Hey, Stephen DueΓ±as! π
Good effort on this challenge! π
It looks like your card component takes up the entire width and height of the screen. I suggest wrapping all of its elements in a container (which could be
<article>or a<div>), giving that container a fixed width and height (roughly the same as that of the card component in the design JPGsβjust eyeball it), and the using flexbox to center the card component in the viewport. πOtherwise, your solution looks pretty good and responds well! π
Keep coding (and happy coding, too)! π
RE: rafet's "Mobile first, grid, js" solution
Hey, rafet! π
Great job on this challenge! Your solution looks good and responds well! Kudos for making the toggle-switch and buttons accessible to keyboard users! π
I only suggest adding a hover state to the buttons on the pricing cards. π
Keep coding (and happy coding, too)! π
RE: Arturo Carida's "Responsive Landing Page using HTML" solution
Hey, Arturo Carida! π
Nice work on this challenge! π
I suggest,
background-repeat: no-repeatandbackground-size: coverto the background image so that fills the entire screen.cursor: pointerto the social media icons.Keep coding (and happy coding, too)! π
RE: Ridwan Abdulkareem's "four card feature design using html and css" solution
Hey, Ridwan Abdulkareem! π
Good work on this challenge! Your solution is responsive! π
I suggest,
max-widthto the feature cards so that they aren't too wide when the layout first changes from desktop to mobile.max-widthto the main container or wrapper so that the content of the page doesn't look too stretched on extra-large screens.Keep coding (and happy coding, too)! π
RE: Andres Felipe's "HTML SASS MOBILE FIRTS" solution
Hey, Andres Felipe! π
Good work on this challenge! Your solution looks good! π
I suggest using multiple CSS backgrounds to add both the top-left and bottom-right SVG backgrounds to your solution. Here' a great article from CSS tricks on just that to get you started, if you like! π
Keep coding (and happy coding, too)! π