Coffee image card

Developer
Rico Sta. Cruz
Size
4,570 Kb
Views
2,024
  1. Coffee image card Previews
  2. Coffee image card HTML Codes
  3. Coffee image card CSS Codes

How do I make an coffee image card?

What is a coffee image card? How do you make a coffee image card? This script and codes were developed by Rico Sta. Cruz on 19 January 2023, Thursday.

Coffee image card Previews
IQ Test

Coffee image card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Coffee image card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Playfair+Display'>
<link rel='stylesheet prefetch' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='image-card'> <div class='image-card-image'> <div class='image-card-numbers'> <div class='column'> <strong class='value'>32</strong> <span class='label'>Followers</span> </div> <div class='column'> <strong class='value'>120</strong> <span class='label'>Following</span> </div> </div> <div class='image-card-user'> <img class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/128.jpg'> <div class='text'> <strong class='user'>craftcoffee</strong> <span class='location'>Melbourne, Australia</span> </div> </div> <img class='image' src='https://unsplash.it/300x300?image=1060'> </div> <div class='image-card-description'> <p>Start your day right by stopping over at Craft Coffee and try our new Cafe Macchiato.</p> </div> <div class='image-card-meta'> <span class='timestamp'>2 min</span> <div class='actions'> <i class='ion-ios-upload'></i> <i class='ion-ios-heart'></i> </div> </div>
</div>
</body>
</html>

Coffee image card - Script Codes CSS Codes

/* External CSS added (see settings icon) */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body { font-family: 'open sans', sans-serif;
}
p { font-family: 'playfair display', serif;
}
html, body { padding: 0; margin: 0; height: 100%;
}
body { background: #eee; color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1.6;
}
body > .image-card { margin: auto;
}
.image-card { width: 300px; background: white; border-radius: 4px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); position: relative;
}
.image-card-image { position: relative; overflow: hidden; background-color: black; -webkit-transition: background-color 200ms linear 200ms; transition: background-color 200ms linear 200ms;
}
.image-card-image:before { -webkit-transition: opacity 200ms linear; transition: opacity 200ms linear; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(bottom, transparent 50%, rgba(0, 0, 0, 0.5)); background: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.5));
}
.image-card-image,
.image-card-image > .image { border-top-left-radius: 4px; border-top-right-radius: 4px;
}
.image-card-image > .image { -webkit-transition: all 200ms cubic-bezier(0.63, -0.05, 0.57, 1.23); transition: all 200ms cubic-bezier(0.63, -0.05, 0.57, 1.23); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-filter: blur(0); filter: blur(0); display: block;
}
.image-card-image > .image-card-numbers { opacity: 0; -webkit-transition: all 200ms cubic-bezier(0.63, -0.05, 0.57, 1.23); transition: all 200ms cubic-bezier(0.63, -0.05, 0.57, 1.23); -webkit-transform: translate3d(0, 64px, 0); transform: translate3d(0, 64px, 0);
}
.image-card-image > .image-card-user { position: absolute; z-index: 2; top: 16px; left: 16px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.image-card-user { color: white; padding-left: 48px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.image-card-user > .avatar { width: 128px; height: 128px; border-radius: 50%; position: absolute; top: 0; left: 0; border: solid 4px white; -webkit-transform: scale(0.25); transform: scale(0.25); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: all 200ms cubic-bezier(0.63, -0.05, 0.57, 1.23); transition: all 200ms cubic-bezier(0.63, -0.05, 0.57, 1.23);
}
.image-card-user > .text { -webkit-transition: all 200ms cubic-bezier(0.63, -0.05, 0.57, 1.23); transition: all 200ms cubic-bezier(0.63, -0.05, 0.57, 1.23); line-height: 1.5; margin-top: -2px;
}
.image-card-user > .text > .user,
.image-card-user > .text > .location { display: block; font-size: .8em;
}
.image-card-user > .text > .location { opacity: .75;
}
.image-card-description { padding: 16px;
}
.image-card-description > p { margin: 0;
}
.image-card-meta { padding: 16px; color: #808090; font-size: .8em; border-top: solid 1px #eee; overflow: hidden; line-height: 16px;
}
.image-card-meta > .actions { float: right;
}
.image-card-meta > .actions > i { font-size: 16px; margin-left: 8px;
}
.image-card-image:hover:before { opacity: 0;
}
.image-card-image:hover > .image { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-filter: blur(8px); filter: blur(8px); opacity: .8;
}
.image-card-image:hover > .image-card-numbers { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.image-card-image:hover > .image-card-user > .avatar { -webkit-transform: scale(1) translate3d(64px, 70px, 0); transform: scale(1) translate3d(64px, 70px, 0);
}
.image-card-image:hover > .image-card-user > .text { -webkit-transform: translate3d(-32px, 0, 0); transform: translate3d(-32px, 0, 0);
}
.image-card-numbers { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 3; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9); color: white;
}
.image-card-numbers > .column { display: block; float: left; width: 50%; padding: 16px; box-sizing: border-box;
}
.image-card-numbers > .column > .label,
.image-card-numbers > .column > .value { display: block; text-align: center;
}
.image-card-numbers > .column > .value { font-size: 1.4em;
}
.image-card-numbers > .column > .label { font-size: .8em; opacity: .75;
}
Coffee image card - Script Codes
Coffee image card - Script Codes
Home Page Home
Developer Rico Sta. Cruz
Username rstacruz
Uploaded January 19, 2023
Rating 3
Size 4,570 Kb
Views 2,024
Do you need developer help for Coffee image card?

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!

Rico Sta. Cruz (rstacruz) Script Codes
Name
Startup name generator
Gradient washing
Background blur hack
Offgrid images
Waves
Diff-based typing test
Railroad markers
Swipeshow demo
Cookie notice snippet
A Pen by Rico Sta. Cruz
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!