An awesome product UI with smooth hover effect and clickable color with product color changing effect.
The project is about how to create a Product Card UI page with html, css/scss & js. This Product Card has wedding blazer with price & some sizes, colors & icons. An Hover Effect is triggered when mouse moves on card as shown in above image. After triggered effect, Card shows price, size, colors & some icons.
This Project is build with Html, Css/Scss & Javascript. For icons, We use FontAwesome that provides us with some cool icons. If u want to learn more about Html, Css/Scss & Javascript below are some links given. Here are a few examples.
Now we setup our environment for project locally. To setup this project locally, follow this steps:
Here, are some software & plugins required that enhance our performance for project.
-
This is text editor that we require for our project. You can use any text editor but I prefer Visual Studio Code as enhances & reduces our workload.
Vscode Plugins required for Our Project
-
This plugin simply reloads the page when we save the porject. We don't need to refresh page on browser.
-
This plugin simply compiles our sass files & reduces our work. It creates css & css.map files.
-
This plugin colorizers our bracket on element we are styling in stylesheet/css file.
-
Copy downloaded project & Paste to desired drive/directory.
-
Install Visual Studio Code.
-
Open our project folder.
-
Right-click on folder & Click on Open With Code.
-
Open index.html file
-
link stylesheet file from
sass/style.cssby using<link rel="stylesheet" href="sass/style.css">Note: Don't link style.scss file bcoz browser can't read .scss file. -
Add FontAwesome cdn link to
index.htmlfile by using<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"> -
link javascript file to
index.htmlby using<script src="app.js"></script>Note: I name app.js but U can prefer any name to .js file. -
Type code in desired file or just copy & paste.
-
Start Live Server from bottom-left corner option.
-
Start Live Sass Compiler from bottom-center option.
-
Now, Project runs successfully on your browser.
Below images will provide usage of our page.
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project.
OR
- Please read CONTRIBUTING, for details on our code of conduct, and the process for submitting pull requests to us.
Distributed under the MIT License. See LICENSE for more information.