MajinDev

Search This Blog

Image Zoom effect like Amazon (Javascript)

on January 17, 2021

Get link
Facebook
X
Pinterest
Email
Other Apps

Get link
Facebook
X
Pinterest
Email
Other Apps

Comments

Popular Posts

Leaflet Get coordinates CSS .container { text-align: center; } input, button, .results { height: 50px; font-size: 20px; } input { width: 500px; margin-top: 100px; } button { margin: 10px; background-color: rgb(7, 78, 7); color: white; width: 200px; } button:hover { background-color: rgb(116, 235, 61); color: rgb(50, 50, 50); } HTML <div class = "container" > <input type = "text" placeholder= "address" id= "address" > <br> <button onclick= " findAddress ()" > Search </button> <div id= "results" ></div> </div> JS var address...

Shopping cart part 2: Add and remove items (Javascript)

I n this part we gonna see how to add T-Shirts to shopping cart and how to remove T-Shirts from shopping cart. If you followed all steps of part1, you html code should looks like : <body> <h2 class = "ti" > T-Shirts Collection </h2> <div class = "container" > <div class = "articles" > <div> <img src = "imgFolder/img1.jpeg" > <div class = "prod" > <h3 class = "tit" id = "brand1" > Nike </h3> <h4 ...

Shopping Cart part 1: Products cards

Before using javascript to add and to remove items from shopping cart, we need products cards for items. In this part we gonna design responsive products cards with HTML and CSS. In the css file, we gonna set the margin and padding of the body 0. The color white and the background black. (You can choose other colors). body { margin : 0; padding : 0; color : white; background-color: black; } We gonna create a container for product cards .container { display : flex; flex-wrap : wrap; padding : 25px; } In html file add a title with a class ti and a container: <body> <h2 class = "ti" > T-Shirts Collection </h2> <div class = "container" > </div> </body> In css file : .ti { padding-top : 30px; text-align : center; } In html file. Inside the container add...

Powered by Blogger

Image Zoom effect like Amazon (Javascript)

Comments

Post a Comment