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.
This is the newbie task for HTML and CSS learner to improve their skills. Try to make it by your own and then if you find any difficulty then entertain this.
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/sakshi2028/product-preview-card-
- Live Site URL: https://sakshi2028.github.io/product-preview-card-/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- visualstudio code
- Styled Components - For styles
some of my major learnings while working through this project.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz@9..144&family=Merriweather&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
```css
.btn {
background: darkcyan;
background-image: -webkit-linear-gradient(top, #358045, #2b6b41);
background-image: -moz-linear-gradient(top, #358045, #2b6b41);
background-image: -ms-linear-gradient(top, #358045, #2b6b41);
background-image: -o-linear-gradient(top, #358045, #2b6b41);
background-image: linear-gradient(to bottom, #358045, #2b6b41);
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 5px;
font-family: Courier New;
color: #ffffff;
font-size: 12px;
padding: 7px 25px 7px 25px;
text-decoration: none;
position: relative;
bottom:75px;
left:200px;
}
.btn:hover {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #3498db);
background-image: -moz-linear-gradient(top, #3498db, #3498db);
background-image: -ms-linear-gradient(top, #3498db, #3498db);
background-image: -o-linear-gradient(top, #3498db, #3498db);
background-image: linear-gradient(to bottom, #3498db, #3498db);
text-decoration: none;
}
### Continued development
i want to learn more about section dividing and adding icon on button.
### Useful resources
https://developer.mozilla.org
https://www.w3schools.com
both has complete knowledge of html and css tags
## Author
- Website - [sakshigupta]
- Frontend Mentor - [@sakshi2028](https://www.frontendmentor.io/profile/@sakshi2028)
## Acknowledgments
I have worked on this project alone and i also suggesting you to work alone because in team you only worked on a particular domain not on the whole project.