This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL:(https://github.com/00awaudby/product-preview/blob/master/README.md)
- Live Site URL:(https://00awaudby.github.io/product-preview/)
The process goes as follows, built out using basic html, we use css to style it and make it loop presentable, along with flex box and media queries to make it responsive. Iused css variables to make adding colors to elements simplyer.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- custom css variables
I primaraily wanted to use this project to re inforce some css skills , i managed to achieve this i also wanted to implement the use of css variables to add colors and font family styles.
code snippet im proud of
css :root{ /primary colors/ --Dark-Cyan: hsl(158,36%,37%); --Cream: hsl(30,38%,92%);
/*Neautral colors*/
--Very-Dark-Blue: hsl(212,21%,14%);
--Very-Grayish-Blue: hsl(228,12%,48%);
--White: hsl(0,0%,100%);
/*Font Sizes*/
--Paragraph-Font-Size: 2rem;
/*Font Families*/
--Font-Montserrat: 'Montserrat', sans-serif;
--Font-Fraunces: 'Fraunces', serif;
}
going forward i plan to do more projects like this to nail it down even furthur i also plan on working more on js and react.
The resources i used where minimal i used previouse projects off the bootcamp i completed to aid me and just information i could remember.
- Github - [00awaudby]https://github.com/00awaudby
- Frontend Mentor - [@00awaudby] https://www.frontendmentor.io/home