Skip to main content

Archive

Show more

Cookies Card Design | HTML And CSS

by Rustcode
Cookies-Card-Design-HTML-And-CSS

Cookies Card Design Using HTML And CSS

The "Cookies Card Design" is used on the bottom of each block. We won't discuss how cookies work, but we will design a cookie card.

This card has a title and a disclaimer paragraph. It has two links in the disclaimer, one for reading cookies and the other for a privacy policy. Apart from this, it has two buttons, one for "accepting cookies" and the other for "decline".

You can read more articles on useful cards like profile cards, blog post card, course card, credit card,s etc.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Cookies Card Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
<head>
 <title>Cookie Card Design | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="cookie-warning">
  <h3 class="cookie-title">We use cookies 🍪</h3>
    <div class="cookie-text">We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our <a href="#">Cookie Policy</a> & <a href="#">Privacy Policy</a>.</div>
    <div class="cookie-btn-wrapper">
      <button class="cookie-btn">Accept</button>
      <button class="cookie-btn">Decline</button>
    </div>
</div>

</body>
</html>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@500;600;700');
* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-family: "Mulish", sans-serif;
  font-size: 22px;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.cookie-warning {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  padding: 24px 30px;
  border-radius: 4px;
  color: #FFF;
  z-index: 100;
  background: linear-gradient(0deg, #F38375 0%, #EF6351 100%);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}
.cookie-title {
  font-size: 20px;
  margin-bottom: 12px;
}

.cookie-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
  line-height: 1.8em;
  font-family: inherit;
}
.cookie-warning a {
  color: rgba(255, 255, 255, 0.8);
}
.cookie-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.cookie-btn {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 16px 24px;
  border-radius: 2px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #FFF;
  font-family: inherit;
  transition: 0.15s ease;
}
.cookie-btn:hover {
  color: #111;
  background-color: rgba(255, 255, 255, 0.8);
}



04. Youtube Video

Here we are attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment