This is a solution to the Clipboard landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Set the layout of the page. 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
Add a screenshot of your solution.
- Solution URL:https://www.frontendmentor.io/solutions/responsive-landing-page-using-css-flexbox-dlklJ1yDUZ
- Live Site URL:https://uzmakh.github.io/clipboard-landing-page-master/
- Completed the semantic markup structure of the page.
- Set the style.css according to the style-guide.md -> set the color-theme in root selector -> set the html font-size to 18px -> import the google-fonts link for the Bai+Jamjuree font for weights 400-regular and 600-semibold -> used fontawesome link in html-head for font-icons(No use of fontawesome icon library as all icons are given in images in svg form in images folder.) -> reset the browser-default css -> set the utility classes for section, container, buttons for spacing and font-sizes. -> set the hover states of the buttons -> used flexbox for the layout -> used media queries for mobile screen.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
This webpage layout is the good practice source for basic tech like semantic tags of markup,css custom properties and flexbox properties. Moreover the use of media queries for responsiveness is the additional learning piece in this project.
(Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.)
I faced a little bit problem in creating footer-links layout.So I arranged them in divs to have three columns. (I could either use grid properties. I may try them also. )
- Website - Add your name here
- Frontend Mentor - @yourusername
- Twitter - @yourusername