Share on facebook
Share on reddit
Share on twitter
Share on pinterest
Share on tumblr
Share on whatsapp
cropped-icon.jpg

How to create CSS cards

Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on whatsapp
Share on pinterest

Do you need to know how to create a CSS card check the code below

HTML

<div class="card">
	<h1>Card title</h1>
	<img src="https://images.unsplash.com/photo-1612903351512-96acf84e5306?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85">
	<p>This is the text</p>
	<div class="action-buttons">
		<button>Buttons</button>
		<button>Links</button>
	</div>
</div>

CSS

.card {
  width: 30%;
  max-width: 30%;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0px 5px 50px #0040ff2b;
  background: #0040ff00;
  font-family: product sans;
}
.card img {
  max-width: 105%;
  width: 105%;
  margin-left: -11px;
}
.card h1 {
  
  text-align: center;
  font-size: 36px;
  text-indent: 0px;
  height: 100%;
}
.card p {
  
  text-align: center;
}
	


.action-buttons {
  text-align: right;
  padding: 9px;
  width: 100%;
  background: #f0f0f0;
  margin-left: -9px;
  margin-top: 20px;
}
button {
  padding: 10px 20px;
  background: #007cff;
  border: none;
  color: white;
  border-radius: 4px;
  box-shadow: 0px 4px 10px #0040ff4d;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
}
button:hover {
  background: #0058ff;
}
	

All done that’s for now. If you need more like this drop a comment or send me an email to [email protected]. And don’t forget to Subscribe.And i almost forgot you can download it here.

Subscribe on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *

Request a tutorial if you didn't find what you need.