Skip to content

Instantly share code, notes, and snippets.

@XielGansz
Created July 25, 2023 10:59
Show Gist options
  • Save XielGansz/15157dfda1c3fcf80d36016a9ccb1311 to your computer and use it in GitHub Desktop.
Save XielGansz/15157dfda1c3fcf80d36016a9ccb1311 to your computer and use it in GitHub Desktop.
Image Card with Button
<div align="center">
<div class="card">
<img class="cardImage" src="https://www.pets4homes.co.uk/images/articles/5010/large/immunoproliferative-enteropathy-in-the-basenji-dog-breed-5bb7233e52e02.jpg" alt="Avatar" style="width:100%">
<div class="cardText">
<h1 class="h2">This is a Basenji</h1>
<p class="p1">Basenjis are a barkless dog breed, originially from Africa. They make great household pets!</p>
<button class="button primary">Learn More</button>
</div>
</div>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 33%;
border-radius: 10px;
text-align: left;
}
.card:hover {
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
}
.h1 {
color: #222f3e;
font-size: 32px;
font-family: lato;
}
.h2 {
color: #222f3e;
font-size: 24px;
font-family: asap;
font-weight: bold;
}
.cardImage {
border-radius: 10px 10px 0 0;
}
.cardText {
padding: 10px 30px 20px;
}
.p1 {
color: #576574;
font-size: 18px;
font-family: lato;
font-weight: 300;
max-width: 500px;
line-height: 30px;
}
.button {
border: none;
color: white;
font-family: asap;
font-weight: 500;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50px;
}
.button:hover {
background-color: #1d009b;
transition: 0.5s;
}
.primary {
background-color: #5f27cd
} /* Purple */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment