Material Design Card - For Blog Post Article

Developer
Size
3,417 Kb
Views
170,016

How do I make an material design card - for blog post article?

A card style blog post build with HTML5 , CSS3 and a little bit of jQuery..... What is a material design card - for blog post article? How do you make a material design card - for blog post article? This script and codes were developed by Mithicher on 09 July 2022, Saturday.

Material Design Card - For Blog Post Article Previews

Material Design Card - For Blog Post Article - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Card - For Blog Post Article</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="card radius shadowDepth1">	<div class="card__image border-tlr-radius">	<img src="http://lorempixel.com/400/200/sports/" alt="image" class="border-tlr-radius"> </div>	<div class="card__content card__padding"> <div class="card__share"> <div class="card__social"> <a class="share-icon facebook" href="#"><span class="fa fa-facebook"></span></a> <a class="share-icon twitter" href="#"><span class="fa fa-twitter"></span></a> <a class="share-icon googleplus" href="#"><span class="fa fa-google-plus"></span></a> </div> <a id="share" class="share-toggle share-icon" href="#"></a> </div>	<div class="card__meta">	<a href="#">Web Design</a> <time>17th March</time>	</div>	<article class="card__article">	<h2><a href="#">Material Design Card - For Blog Post Article</a></h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus harum...</p>	</article>	</div>	<div class="card__action">	<div class="card__author">	<img src="http://lorempixel.com/40/40/sports/" alt="user">	<div class="card__author-content">	By <a href="#">John Doe</a>	</div>	</div>	</div>	</div> <p class="text-center">Created By <a href="https://twitter.com/mithicher">Mithicher Baro</a></p>	</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>

Material Design Card - For Blog Post Article - Script Codes CSS Codes

@import 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
@import 'http://fonts.googleapis.com/css?family=Roboto:700,400';
/*
* Basic Reset
*/
*,
*:after,
*:before {	margin: 0;	padding: 0;	box-sizing: border-box;
}
/** * Basics Styles */
html {	font-size: 62.5%;
}
body {	background-color: #eee;	font-family: Roboto;	font-weight: 400;	font-size: 1.6em;	line-height: 1.6;	color: #666;
}
a {	text-decoration: none;	color: #3498db;
}	a:hover {	color: #2980b9;	}
h2 {	line-height: 1.2;	margin-bottom: 1.6rem;
}
.wrapper {	max-width: 400px;	margin: 50px auto;	padding-left: 1em;	padding-right: 1em;
}
/** * Helpers */
.border-tlr-radius {	border-top-left-radius: 2px;	border-top-right-radius: 2px;
}
.text-center { text-align: center; }
.radius { border-radius: 2px; }
.padding-tb { padding-top: 1.6rem; padding-bottom: 1.6rem;}
.shadowDepth0 { box-shadow: 0 1px 3px rgba(0,0,0, 0.12); }
.shadowDepth1 { box-shadow:	0 1px 3px rgba(0,0,0, 0.12),	0 1px 2px rgba(0,0,0, 0.24);
}
/** * Card Styles */
.card {	background-color: #fff;	margin-bottom: 1.6rem;
}
.card__padding {	padding: 1.6rem;
}
.card__image {	min-height: 100px;	background-color: #eee;
}	.card__image img {	width: 100%;	max-width: 100%;	display: block;	}
.card__content {	position: relative;
}
/* card meta */
.card__meta time {	font-size: 1.5rem;	color: #bbb;	margin-left: 0.8rem;
}
/* card article */
.card__article a {	text-decoration: none;	color: #444;	transition: all 0.5s ease;
}	.card__article a:hover {	color: #2980b9;	}
/* card action */
.card__action {	overflow: hidden;	padding-right: 1.6rem;	padding-left: 1.6rem;	padding-bottom: 1.6rem;
}
.card__author {}	.card__author img,	.card__author-content {	display: inline-block;	vertical-align: middle;	}	.card__author img{	border-radius: 50%;	margin-right: 0.6em;	}
.card__share {	float: right;	position: relative;	margin-top: -42px;
}
.card__social {	position: absolute;	top: 0;	right: 0;	visibility: hidden;	width: 160px;	transform: translateZ(0);	transform: translateX(0px);	transition: transform 0.35s ease;
}	.card__social--active {	visibility: visible;	/*z-index: 3;*/	transform: translateZ(0);	transform: translateX(-48px);	transition: transform 0.35s ease;	}
.share-toggle {	z-index: 2;
}
.share-toggle:before {	content: "\f1e0";	font-family: 'FontAwesome';	color: #3498db;
}	.share-toggle.share-expanded:before {	content: "\f00d";	}
.share-icon {	display: inline-block;	width: 48px;	height: 48px;	line-height: 48px;	text-align: center;	border-radius: 50%;	background-color: #fff;	transition: all 0.3s ease;	outline: 0;	box-shadow:	0 2px 4px rgba(0,0,0, 0.12),	0 2px 4px rgba(0,0,0, 0.24);
}	.share-icon:hover,	.share-icon:focus {	box-shadow:	0 3px 6px rgba(0,0,0, 0.12),	0 3px 6px rgba(0,0,0, 0.24); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);	}
.facebook {	background-color: #3b5998;
}
.twitter {	background-color: #00abe3;
}
.googleplus {	background-color: #d3492c;
}
.facebook,
.twitter,
.googleplus {	color: #fff;
}	.facebook:hover,	.twitter:hover,	.googleplus:hover {	color: #eee;	}

Material Design Card - For Blog Post Article - Script Codes JS Codes

$(document).ready(function($) {	$('.card__share > a').on('click', function(e){	e.preventDefault() // prevent default action - hash doesn't appear in url	$(this).parent().find( 'div' ).toggleClass( 'card__social--active' );	$(this).toggleClass('share-expanded'); });
});
Material Design Card - For Blog Post Article - Script Codes
Material Design Card - For Blog Post Article - Script Codes
Home Page Home
Developer Mithicher
Username mithicher
Uploaded July 09, 2022
Rating 4.5
Size 3,417 Kb
Views 170,016
Do you need developer help for Material Design Card - For Blog Post Article?

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!

Mithicher (mithicher) Script Codes
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!