Card with HTML and CSS

In this article, you will learn how to make Card using only HTML and CSS.I have shared another snippet based on how to create a Responsive Card with HTML and CSS. In this tutorial, I have created Website Card Layout with HTML and CSS, If you like this article, please also subscribe my channel - Code Info

Below is the video tutorials. watch and practice.

Source Code:

If you like this Card Design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Card | By Code Info</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div>
        <h1>Follow Us</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
          illum aperiam minima reprehenderit,<br />
          ex ratione voluptatibus? Explicabo <br />
          quo tempora corrupti!
        </p>
        <div class="icons">
          <img src="images/insta.svg" />
          <img src="images/tw.png" />
          <img src="images/fa.png" />
        </div>
      </div>
      <div>
        <img src="images/pic.png" />
      </div>
    </div>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  width: 600px;
  height: 350px;
  margin: 70px auto;
  border-radius: 15px;
  display: flex;
  box-shadow: 5px 5px 10px rgb(180, 170, 170), -5px -5px 10px rgb(179, 165, 165);
}

h1 {
  padding: 20px;
  color: teal;
  margin-left: 70px;
}

p {
  margin-left: 20px;
}

.container img {
  width: 300px;
  height: 300px;
  cursor: pointer;
}

.icons {
  display: flex;
  margin: 20px 0 0 130px;
}

.icons img {
  width: 25px;
  height: 25px;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
}

h1:hover {
  width: 150px;
  background: teal;
  color: white;
  cursor: pointer;
  border-radius: 50px;
}

.icons img:hover {
  padding: 1px;
}

.container img:hover {
  padding: 5px;
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

You may like this:

Source Code:

Post a Comment

Post a Comment

About Us

Contact Form