Hover Effect Menu tutorial Using CSS And HTML PART:1

0

 

Hello, coders so here is the first-ever blog on CSS and HTML. This can be a very interesting project as it can work as a major project for your practice. This project will be covered in 2 blog posts so do subscribe to the blog so you never miss an update.

So we will be creating a hovercard that can be used on your E-Commerce website with any brand you work with. This will be animated and will bring you a sense of aesthetic.

We will be creating it for a shoe brand, It will require basic knowledge of HTML and CSS.

if you are not in the practice for the CSS just go through the source code definitely you will learn something new.

So This blog will be basically focusing on the structure, which means Your HTML code.

Go through the given code carefully 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adidas Hover </title>
    <link rel="stylesheet" href="style3.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="imgbox">
                <img src="adidas-shoes-png-26548.png" alt="">
            </div>
            <div class="imgbox2">
                <img src="adidas_PNG23.png" alt="">
            </div>
            <div class="contentbx">
                <h2>Adidas Shoes</h2>
                <div class="size">
                    <h3>Size :</h3>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                </div>     
                <div class="color">     
                    <h3>Colours:</h3>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <a href="#">Buy Now</a>
            </div>
        </div>
    </div>
</body>
</html>

This will be the basic template for the card.

We will include the shoe size number,color, and it buy now link.

Its CSS blog will be uploaded very so stay tune and keepcoding 

ALL THE BEST!! 


Post a Comment

0 Comments
Post a Comment (0)
To Top