Article Cards

Developer
Brock Nunn
Size
4,487 Kb
Views
6,072
  1. Article Cards Previews
  2. Article Cards HTML Codes
  3. Article Cards CSS Codes

How do I make an article cards?

Responsive Article Cards with Flexbox. What is a article cards? How do you make a article cards? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.

Article Cards Previews
IQ Test

Article Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Article Cards</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Roboto:400,100,500,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap">
<div class="card" style="background-image:'http://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg';"> <header class="head"> <h3> <i class="fa fa-picture-o"></i> The Industry<span class="time">1hr ago</span></h3> </header> <article> <h2>Exploring a snowy land where all is happy &amp; good.</h2> <p>Sustainable Vice street art, mustache cred Tonx normcore. Before they sold out Shoreditch next level Carles Brooklyn. Photo booth cliche Pitchfork, you probably haven't heard of them farm-to-table...</p> </article> <footer class="foot"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="" class="profile-pic" /> <span class="author"><a href="#">Brock Nunn</a></span> <aside class="social"> <a class="fa fa-comment-o"></a> <a class="fa fa-star-o"></a> </aside> </footer>
</div>
<div class="card" style="background-image:'http://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg';"> <header class="head"> <h3> <i class="fa fa-picture-o"></i> The Industry<span class="time">1hr ago</span></h3> </header> <article> <h2>Exploring a snowy land where all is happy &amp; good.</h2> <p>Sustainable Vice street art, mustache cred Tonx normcore. Before they sold out Shoreditch next level Carles Brooklyn. Photo booth cliche Pitchfork, you probably haven't heard of them farm-to-table...</p> </article> <footer class="foot"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="" class="profile-pic" /> <span class="author"><a href="#">Brock Nunn</a></span> <aside class="social"> <a class="fa fa-comment-o"></a> <a class="fa fa-star-o"></a> </aside> </footer>
</div>
<div class="card" style="background-image:'http://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg';"> <header class="head"> <h3> <i class="fa fa-picture-o"></i> The Industry<span class="time">1hr ago</span></h3> </header> <article> <h2>Exploring a snowy land where all is happy &amp; good.</h2> <p>Sustainable Vice street art, mustache cred Tonx normcore. Before they sold out Shoreditch next level Carles Brooklyn. Photo booth cliche Pitchfork, you probably haven't heard of them farm-to-table...</p> </article> <footer class="foot"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="" class="profile-pic" /> <span class="author"><a href="#">Brock Nunn</a></span> <aside class="social"> <a class="fa fa-comment-o"></a> <a class="fa fa-star-o"></a> </aside> </footer>
</div>
<div class="card" style="background-image:'http://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg';"> <header class="head"> <h3> <i class="fa fa-picture-o"></i> The Industry<span class="time">1hr ago</span></h3> </header> <article> <h2>Exploring a snowy land where all is happy &amp; good.</h2> <p>Sustainable Vice street art, mustache cred Tonx normcore. Before they sold out Shoreditch next level Carles Brooklyn. Photo booth cliche Pitchfork, you probably haven't heard of them farm-to-table...</p> </article> <footer class="foot"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="" class="profile-pic" /> <span class="author"><a href="#">Brock Nunn</a></span> <aside class="social"> <a class="fa fa-comment-o"></a> <a class="fa fa-star-o"></a> </aside> </footer>
</div> </div> <!--end wrap --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Article Cards - Script Codes CSS Codes

html { background: #eee; font-family: 'Roboto', sans;
}
.wrap { max-width: 95%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.card { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 31%; max-width: 31%; overflow: hidden; border-radius: .25em; background: #fff; margin: 25px 1%; box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.03);
}
@media (max-width: 68em) { .card { min-width: 48%; }
}
@media (max-width: 48em) { .card { min-width: 98%; }
}
.card .head { background: url("https://farm4.staticflickr.com/3729/12516648584_d9bfc9f762_c.jpg") -59% 51.5%; min-height: 250px; color: #fff; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; background-repeat: no-repeat; background-size: cover;
}
.card .head:hover { background-position: -79% 21.5%;
}
.card .head h3 { margin: 0; padding: 1em 1.5em; -ms-flex-item-align: end; align-self: flex-end; display: block; width: 100%; font-weight: 400; text-shadow: 0px 1px 0px #000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #000000), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, #000000, rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, #000000, rgba(0, 0, 0, 0));
}
.card .head h3 i.fa { font-size: 120%; position: relative; top: 2px;
}
.card .head h3 span.time { float: right; font-weight: 200;
}
.card article { padding: .5em 1.5em;
}
.card article h2:nth-of-type(1) { margin-top: .5em; font-weight: 400; font-size: 205%; line-height: 1.2em; margin-bottom: .45em;
}
.card article p { font-family: 'Droid Serif', serif; line-height: 1.55em; text-align: justify;
}
.card article p:nth-of-type(1) { margin-top: 0;
}
.card .foot { border-top: 3px solid rgba(0, 0, 0, 0.1); margin: 0 1.5em; padding: 2em 0;
}
.card .foot .profile-pic { max-width: 52px; height: auto; border-radius: 50%; margin: 0 1em 0 0; display: inline-block;
}
.card .foot .author { font-weight: bold;
}
.card .foot .author a { text-decoration: none; color: tomato; position: relative; top: -.95em; font-size: 1.25em;
}
.card .foot .social { display: inline-block; float: right; font-size: 2.5em;
}
.card .foot .social a { margin-left: .5em; color: rgba(0, 0, 0, 0.3);
}
.card .foot .social a:hover { color: rgba(0, 0, 0, 0.5);
}
Article Cards - Script Codes
Article Cards - Script Codes
Home Page Home
Developer Brock Nunn
Username banunn
Uploaded January 06, 2023
Rating 3.5
Size 4,487 Kb
Views 6,072
Do you need developer help for Article Cards?

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!

Brock Nunn (banunn) Script Codes
Name
Simple Login Form Template
Pop Up Question Form
Super Simple Slideshow
JQuery Add and Remove Items
Tooltip Pulse
Simple jQuery .fadeToggle demo
Angular Users Application
Flat UI Alert
A Pen by Brock Nunn
Modern Web Button
Create amazing Facebook ads 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!