Clean Card Layout
How do I make an clean card layout?
This is a clean responsive card layout I wrote. The idea is to give a nice smooth roll into "Read On" as well list items for users to notice.. What is a clean card layout? How do you make a clean card layout? This script and codes were developed by Saysora on 26 August 2022, Friday.
Clean Card Layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clean Card Layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrap"> <div id="cardholder"> <div class="titleLine"> <div class="padding"> <h1>Clean Cards</h1> </div> </div> <div class="padding"> <div class="card"> <div class="cImg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/26158/big_bf215b02b1991f4bc8d6495c9d49b235424b1ebe.jpg"> </div> <div class="cDesc"> <div class="padding"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum pellentesque tristique. Nulla consequat condimentum enim, eget blandit massa pretium sit amet. Sed cursus velit eget mi vehicula tincidunt.</p> </div> </div> <p class="overOn"><span class="block padding">Read On</span></p> </div> <div class="card"> <div class="cImg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/26158/big_28c9fadd5f1b4ea8cbf8a92e8c44e2f0e110e572.jpg"> </div> <div class="cDesc"> <div class="padding"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum pellentesque tristique. Nulla consequat condimentum enim, eget blandit massa pretium sit amet. Sed cursus velit eget mi vehicula tincidunt.</p> </div> </div> <p class="overOn"><span class="block padding">Read On</span></p> </div> <div class="card"> <div class="cImg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/26158/big_741e1ba2ddb0398d7430162d05d364a1e2098c6f.jpg"> </div> <div class="cDesc"> <div class="padding"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum pellentesque tristique. Nulla consequat condimentum enim, eget blandit massa pretium sit amet. Sed cursus velit eget mi vehicula tincidunt.</p> </div> </div> <p class="overOn"><span class="block padding">Read On</span></p> </div> <div class="card"> <div class="cImg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/26158/big_bf215b02b1991f4bc8d6495c9d49b235424b1ebe.jpg"> </div> <div class="cDesc"> <div class="padding"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum pellentesque tristique. Nulla consequat condimentum enim, eget blandit massa pretium sit amet. Sed cursus velit eget mi vehicula tincidunt.</p> </div> </div> <p class="overOn"><span class="block padding">Read On</span></p> </div> <div class="card"> <div class="cImg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/26158/big_28c9fadd5f1b4ea8cbf8a92e8c44e2f0e110e572.jpg"> </div> <div class="cDesc"> <div class="padding"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum pellentesque tristique. Nulla consequat condimentum enim, eget blandit massa pretium sit amet. Sed cursus velit eget mi vehicula tincidunt.</p> </div> </div> <p class="overOn"><span class="block padding">Read On</span></p> </div> <div class="card"> <div class="cImg"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/26158/big_741e1ba2ddb0398d7430162d05d364a1e2098c6f.jpg"> </div> <div class="cDesc"> <div class="padding"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum pellentesque tristique. Nulla consequat condimentum enim, eget blandit massa pretium sit amet. Sed cursus velit eget mi vehicula tincidunt.</p> </div> </div> <p class="overOn"><span class="block padding">Read On</span></p> </div> <div class="clear"></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Clean Card Layout - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
html { height: 100%; font-family: "Helvetica";
}
body { height: 100%;
}
#wrap { background: #222222; min-height: 100%; padding: 5% 0 0;
}
#cardholder { width: 960px; max-width: 100%; margin: 0 auto; background: #ecf0f1; height: 100%; color: #fff;
}
.card { width: 30%; height: 340px; background: #3f3f3f; float: left; margin: 2.5%; position: relative; cursor: pointer;
}
.card:hover .overOn { max-height: 100px;
}
.card:hover .cImg { margin-bottom: -20%;
}
.card .cImg { max-width: 100%; position: relative; z-index: 5; overflow: hidden; -webkit-transition: margin 0.5s; -moz-transition: margin 0.5s; transition: margin 0.5s;
}
.card .cImg img { max-width: 100%;
}
.card .cDesc { position: relative; background: inherit; z-index: 10;
}
.card .cDesc h2 { font-size: 1.2em; text-align: center;
}
.card .cDesc p { font-size: 0.9em;
}
.card:nth-child(3n+1) { margin-left: 0;
}
.card:nth-child(3n+3) { margin-right: 0;
}
@media (max-width: 620px) { .card { float: none; width: 100%; margin: 2.5% 0; } .card .cImg { max-height: 200px; overflow: hidden; } .card:hover .cImg { margin: 0; } .card:hover { box-shadow: 0 0 5px 1px #27ae60; } .card .overOn { display: none; }
}
.overOn { width: 100%; background: #27ae60; color: #fff; text-align: center; margin-top: 5px; max-height: 0; overflow: hidden; position: absolute; left: 0; bottom: 0; -webkit-transition: max-height 0.5s, background 0.3s; -moz-transition: max-height 0.5s, background 0.3s; transition: max-height 0.5s, background 0.3s;
}
.overOn:hover { background: #3498db;
}
.titleLine { background: #34495e; color: #fff; text-transform: uppercase;
}
.padding { padding: 10px;
}
.block { display: block;
}
.clear { clear: both;
}
Clean Card Layout - Script Codes JS Codes
/*
------------------ Clean Card Layout
------------------
**
Adaptive Height alternative with different Read On animation located:
**
*/
Developer | Saysora |
Username | azureknight |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 3,654 Kb |
Views | 30,360 |
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 |
Simple Loading Bar | 2,513 Kb |
First Loading Animation | 2,886 Kb |
Flat Ui Rollover Buttons | 3,312 Kb |
Life Mottos | 3,352 Kb |
Responsive Background | 2,168 Kb |
CSS Browser | 2,611 Kb |
Legend of Zelda - Triforce | 2,530 Kb |
Flat UI Login | 3,358 Kb |
Beautiful Ribbon | 1,985 Kb |
CSS Full Width Content Menu | 3,712 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 |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
Form Labels | Bartuc | 2,717 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Click handler test | Snapson | 2,329 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!