Card
How do I make an card?
What is a card? How do you make a card? This script and codes were developed by Elena on 17 December 2022, Saturday.
Card - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Card</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *,
*:before,
*:after { box-sizing: border-box;
}
.container { max-width: 400px; width: 100%; margin: 0 auto; padding-bottom: 70px; position: relative;
}
.intro { position: relative; min-height: 300px; height: 100%; width: 100%; background: transparent url(https://images.unsplash.com/photo-1467733444521-ab3e6983f8b1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=69aaefe565d19beb876979d89510601b) top center no-repeat; background-size: 100%; overflow: hidden; transition: all .72s ease-in-out;
}
.intro:after { content: ''; display: block; position: absolute; /* width: 100%; */ height: 500px; right: -100%; left: 0; transform: skew(100deg); background: #fff; bottom: -70%; box-shadow: inset 1px 0px 5px 0px rgba(204, 204, 204, 0.72);
}
.container:after { content: ''; max-width: 300px; width: 100%; margin: 0% auto 0; position: absolute; left: 0; bottom: 0; top:0; right: 0; box-shadow: 0px 5px 5px 0px rgba(204, 204, 204, 0.72); z-index: -1; transition: all .52s ease-in-out;
}
.meta { max-width: 300px; width: 100%; margin: 0% auto 0; position: absolute; left: 0; bottom: 0; right: 0; z-index: 10; padding-top: 110px; overflow: hidden; transition: all .52s ease-in-out;
}
.meta__inner { padding: .25rem 1rem; line-height: 1.5rem; position: relative; background: #fff; z-index: 15; background: #fff; border: 1px solid #ccc; border-top: none;
}
.meta:after { content: ''; display: block; position: absolute; left:0; right: 0; top: 80px; max-width: 300px; height: 300px; background: #fff; border: 1px solid #ccc; transform: rotate(90deg) skew(10deg); z-index: 4;
}
h3 { position: relative; font-family: sans-serif; font-weight: 300; border-left: 4px solid #e91e63; padding-left: .72rem;
}
p { font-family: serif; font-size: .85rem; font-weight: inherit; color: #555; text-align: justify;
}
p a { color: #e91e63; text-decoration: none; opacity: .72; transition: all .27s ease-in-out;
}
p a:hover { opacity: 1; text-decoration: underline;
}
.container:hover .meta{ transform: translateY(5px);
}
.container:hover .intro { transform: translateY(-5px);
}
.container:hover:after { transform: translateY(5px);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <section class="intro"></section> <div class="meta"> <div class="meta__inner"> <h3>Some Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo fugiat ad quae amet dignissimos laborum, repellat maxime ipsa ipsam nisi <a href="#">read more ...</a></p> </div> </div>
</div>
</body>
</html>
Card - Script Codes CSS Codes
*,
*:before,
*:after { box-sizing: border-box;
}
.container { max-width: 400px; width: 100%; margin: 0 auto; padding-bottom: 70px; position: relative;
}
.intro { position: relative; min-height: 300px; height: 100%; width: 100%; background: transparent url(https://images.unsplash.com/photo-1467733444521-ab3e6983f8b1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=69aaefe565d19beb876979d89510601b) top center no-repeat; background-size: 100%; overflow: hidden; transition: all .72s ease-in-out;
}
.intro:after { content: ''; display: block; position: absolute; /* width: 100%; */ height: 500px; right: -100%; left: 0; transform: skew(100deg); background: #fff; bottom: -70%; box-shadow: inset 1px 0px 5px 0px rgba(204, 204, 204, 0.72);
}
.container:after { content: ''; max-width: 300px; width: 100%; margin: 0% auto 0; position: absolute; left: 0; bottom: 0; top:0; right: 0; box-shadow: 0px 5px 5px 0px rgba(204, 204, 204, 0.72); z-index: -1; transition: all .52s ease-in-out;
}
.meta { max-width: 300px; width: 100%; margin: 0% auto 0; position: absolute; left: 0; bottom: 0; right: 0; z-index: 10; padding-top: 110px; overflow: hidden; transition: all .52s ease-in-out;
}
.meta__inner { padding: .25rem 1rem; line-height: 1.5rem; position: relative; background: #fff; z-index: 15; background: #fff; border: 1px solid #ccc; border-top: none;
}
.meta:after { content: ''; display: block; position: absolute; left:0; right: 0; top: 80px; max-width: 300px; height: 300px; background: #fff; border: 1px solid #ccc; transform: rotate(90deg) skew(10deg); z-index: 4;
}
h3 { position: relative; font-family: sans-serif; font-weight: 300; border-left: 4px solid #e91e63; padding-left: .72rem;
}
p { font-family: serif; font-size: .85rem; font-weight: inherit; color: #555; text-align: justify;
}
p a { color: #e91e63; text-decoration: none; opacity: .72; transition: all .27s ease-in-out;
}
p a:hover { opacity: 1; text-decoration: underline;
}
.container:hover .meta{ transform: translateY(5px);
}
.container:hover .intro { transform: translateY(-5px);
}
.container:hover:after { transform: translateY(5px);
}
Developer | Elena |
Username | semenchenko |
Uploaded | December 17, 2022 |
Rating | 4.5 |
Size | 3,220 Kb |
Views | 8,096 |
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!
Name | Size |
Css piramide | 2,681 Kb |
Slider CSS Only | 8,018 Kb |
VideoBg | 2,592 Kb |
A Pen by Elena | 3,573 Kb |
Calc.js | 4,200 Kb |
Fish 2d game only CSS | 9,489 Kb |
CSS hover effect | 3,256 Kb |
Pricing Table | 6,784 Kb |
Walking skeleton only css | 9,064 Kb |
Modal | 9,533 Kb |
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!
Name | Username | Size |
Z-index demo | Kblh | 1,534 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Responsive slide | Thorien | 2,400 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Popover Example | Seanboom | 2,429 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!