Card UI CSS

Developer
Damien Flandrin
Size
2,897 Kb
Views
143,704
  1. Card UI CSS Previews
  2. Card UI CSS HTML Codes
  3. Card UI CSS CSS Codes

How do I make an card ui css?

What is a card ui css? How do you make a card ui css? This script and codes were developed by Damien Flandrin on 12 June 2022, Sunday.

Card UI CSS Previews
IQ Test

Card UI CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card UI CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card"> <a href="https://damienflandrin.fr/blog/post/tutoriel-realiser-une-carte-en-css"> <div class="card-image"> <img src="https://damienflandrin.fr/storage/tutoriel-realiser-une-carte-en-css/card-image.jpg" alt="Orange" /> </div> <div class="card-body"> <div class="card-date"> <time>20 Novembre 1992</time> </div> <div class="card-title"> <h3>Lorem Ipsum</h3> </div> <div class="card-excerpt"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus autem consectetur voluptate facere at, omnis ab optio placeat officiis! Animi modi harum enim quia veniam consectetur unde autem inventore.</p> </div> </div> </a>
</div>
<a style="position: absolute; top:10px; left:0px; right:0px; margin:auto; display:block; text-align:center;" href="https://damienflandrin.fr/blog/post/tutoriel-realiser-une-carte-en-css" target="blank">Voir le tutoriel sur https://www.damienflandrin.fr</a>
</body>
</html>

Card UI CSS - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Playfair+Display");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display|Source+Sans+Pro");
body { background: #eee; padding: 40px 0px;
}
.card { width: 400px; margin: 0px auto; background-color: white; box-shadow: 0px 5px 20px #555;
}
.card a { color: #333; text-decoration: none;
}
.card:hover .card-image img { width: 110%; filter: grayscale(0);
}
.card-image { height: 250px; position: relative; overflow: hidden;
}
.card-image img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: grayscale(1); transition-property: filter width; transition-duration: .3s;
}
.card-body { text-align: center; padding: 15px 20px; box-sizing: border-box;
}
.card-date { font-family: 'Source Sans Pro', sans-serif;
}
.card-title, .card-exceprt { font-family: 'Playfair Display', serif;
}
.card-date, .card-title { text-align: center; text-transform: uppercase; font-weight: bold;
}
.card-date, .card-excerpt { color: #777;
}
Card UI CSS - Script Codes
Card UI CSS - Script Codes
Home Page Home
Developer Damien Flandrin
Username dam62500
Uploaded June 12, 2022
Rating 4
Size 2,897 Kb
Views 143,704
Do you need developer help for Card UI CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Damien Flandrin (dam62500) Script Codes
Name
Description list inline
A Pen by Damien Flandrin
Make a grid with Neat 2.0
Menu responsive avec Flexbox - 2
Menu responsive avec Flexbox - 1
LAMP PURE CSS with Animation
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!