Material Cards

Developer
Kyle Houston
Size
5,979 Kb
Views
46,552
  1. Material Cards Previews
  2. Material Cards HTML Codes
  3. Material Cards CSS Codes
  4. Material Cards JS Codes

How do I make an material cards?

What is a material cards? How do you make a material cards? This script and codes were developed by Kyle Houston on 25 August 2022, Thursday.

Material Cards Previews
IQ Test

Material Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Cards</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.7/angular-material.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-controller="AppCtrl" ng-app="MyApp" class="app">	<h1>Cards</h1>	<h2>Partner Card</h2>	<md-card class="card-partner card">	<md-card-content class="card-partner__content card__content">	<img src="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="card-partner__logo" alt="">	<div class="card-partner__details">	<h2 class="card-partner__name">Partner Name</h2>	<p class="card-partner__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus consequuntur dicta adipisci optio reprehenderit dolor veniam ratione ea. Quod blanditiis inventore temporibus, aperiam, odit ex cumque itaque in consectetur reiciendis.</p>	</div>	</md-card-content>	<div class="card-partner__actions card__actions md-actions" layout="row" layout-align="end center">	<md-button class="card-partner__action">Visit Site</md-button>	<md-button class="card-partner__action">View Offers</md-button>	</div>	</md-card>	<br>	<h2>Tool Card - Our Tools</h2>	<md-card class="card-tool card">	<md-card-content class="card-tool__content">	<img src="http://dummyimage.com/296x164/000/fff" width="296" height="164" alt="" class="card-tool__thumb">	<div class="card-tool__details">	<h2 class="card-tool__name">Tool Name</h2>	<p class="card-tool__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in neque ut justo gravida egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>	</div>	</md-card-content>	<div class="card-tool__actions card__actions md-actions" layout="row" layout-align="end center">	<md-button class="card__action">Learn more</md-button>	</div>	</md-card>	<br>	<h2>Tool Card - Google Tools</h2>	<md-card class="card-tool card-tool--other card">	<md-card-content class="card-tool--other__content card__content">	<img src="http://dummyimage.com/32x32/000/fff&text=G" alt="" class="card-tool--other__icon" width="32" height="32">	<div class="card-tool--other__details">	<h2 class="card-tool--other__name card-tool__name">Google Tools Card</h2>	<p class="card-tool__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in neque ut justo gravida egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>	</div>	</md-card-content>	<div class="card-tool__actions card-tool--other__actions card__actions md-actions" layout="row" layout-align="end center">	<md-button class="card__action">Learn more</md-button>	</div>	</md-card>	<br>	<h2>Topics Card - WIP</h2>	<md-card class="wip card card-topic">	<md-card-content class="card__content">	<h2 class="md-title">Topic Card - WIP</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur excepturi commodi voluptates odit at perferendis repellendus quo officia, temporibus omnis accusamus ipsa eaque, voluptatem! Assumenda a molestias recusandae, tempore vitae.</p>	<!-- Progress Bar -->	<hr />	<p>2 Lessons to watch</p>	</md-card-content>	<div class="md-actions" layout="row" layout-align="end center">	<md-button class="">Explore</md-button>	</div>	</md-card>	<br />	<h2>Topic Progress Card - WIP</h2>	<md-card class="wip card-topic-progress">	<img src="http://dummyimage.com/40x40/000/fff" class="md-card-image" alt="">	<md-card-content class="card__content">	<h2 class="md-title">Getting Started</h2>	<hr class="progress-bar" />	</md-card-content>	<div class="md-actions" layout="row" layout-align="end center">	<md-button class="">Resume</md-button>	</div>	</md-card>	<br />	<h2>Events Card - Text Card</h2>	<md-card class="event-text-card card">	<md-card-content class="event-text-card__content card__content">	<div class="event-text-card__date-time">	<p class="event-text-card__date">May 14, 2015</p>	<p class="event-text-card__time">3:30pm</p>	</div>	<h2 class="event-text-card__name">Reach New Customers Online - Street Food Vendor Focus</h2>	</md-card-content>	<div class="event-text-card__actions card__actions md-actions" layout="row" layout-align="end center">	<md-button class="card__action">See all events</md-button>	</div>	</md-card>	<br />	<h2>Event Card - Media</h2>	<md-card class="event-media-card card">	<img src="http://dummyimage.com/387x208/000/fff" class="event-media-card__thumb" alt="">	<div class="event-media-card__actions card__actions md-actions" layout="row" layout-align="end center">	<md-button class="card__action">Book a session</md-button>	</div>	</md-card>	<br />	<h2>Lesson Card - WIP</h2>	<md-card class="wip">	<img src="http://dummyimage.com/285x163/000000/fff" class="" alt="" width="285" height="163">	<md-card-content class="card__content">	<h2 class="md-title">Lesson Card</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis error.</p>	</md-card-content>	<div class="md-actions" layout="row" layout-align="end center">	<md-button>Watch Lesson</md-button>	</div>	</md-card>	<br />	<h2>Upcoming Lesson Card - WIP</h2>	<md-card class="wip">	<md-card-content class="card__content">	<p class="md-title">Lesson 12</p>	<p>Time 5 mins</p>	<h2>Social Media Landscape</h2>	</md-card-content>	<div class="md-actions" layout="row" layout-align="end center">	<md-button>Watch Lesson</md-button>	</div>	</md-card>
</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Cards - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100);
html, body { -webkit-font-smoothing: antialiased;
}
html { font-size: 62.5%; line-height: 1;
}
body { font-size: 1.6rem; font-family: 'Roboto', Helvetica, sans-serif; font-weight: 300; line-height: 1;
}
h1, h2, h3 { font-weight: 400;
}
.app { padding: 1.6rem; max-width: 80rem; margin: auto;
}
md-card { margin: 0;
}
md-card > img { width: auto;
}
.card { background: white;
}
.card__content { padding: 1.6rem;
}
@media (min-width: 768px) { .card__content { padding: 3.2rem; }
}
.card__actions { border-top: 1px solid rgba(0, 0, 0, 0.12); padding: 0 1.6rem;
}
@media (min-width: 768px) { .card__actions { padding: 0 3.2rem; }
}
.card__action { font-weight: 500; font-size: 1.4rem; letter-spacing: 0.5px; line-height: 1.6rem; color: #FF5252;
}
@media (min-width: 768px) { .card-partner__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}
.card-partner__logo { max-width: 15.5rem; margin: auto; padding: 4.5rem 0 4rem; display: block; width: 100%;
}
@media (min-width: 768px) { .card-partner__logo { margin: 0; padding: 0; }
}
@media (min-width: 768px) { .card-partner__details { padding-left: 3.2rem; }
}
.card-partner__name { font-weight: 400; font-size: 2.4rem; line-height: 2.4rem; color: #4A4A4A; margin: 0 0 0.8rem;
}
@media (min-width: 768px) { .card-partner__name { font-size: 1.8rem; color: #343434; }
}
.card-partner__description { font-weight: 300; font-size: 1.4rem; line-height: 2.4rem; color: #343434;
}
@media (min-width: 768px) { .card-partner__description { font-size: 1.6rem; color: #444444; }
}
.card-partner__description:first-of-type { margin-top: 0;
}
.card-partner__description:last-of-type { margin-bottom: 0;
}
.card-partner__actions { height: 5.4rem;
}
@media (min-width: 768px) { .card-partner__actions { height: 7.4rem; }
}
.card-partner__action { font-weight: 500; font-size: 1.4rem; line-height: 1.6rem; color: #FF5252;
}
.card-tool__content { padding: 0;
}
@media (min-width: 768px) { .card-tool__content { display: -webkit-box; display: -ms-flexbox; display: flex; }
}
@media (min-width: 768px) { .card-tool__thumb { -webkit-box-flex: 1; -ms-flex: 1 0 37.326607818%; flex: 1 0 37.326607818%; max-width: 29.6rem; }
}
.card-tool__details { padding: 1.6rem;
}
@media (min-width: 768px) { .card-tool__details { padding: 3.2rem; }
}
.card-tool__name { font-weight: 400; font-size: 1.8rem; line-height: 2.4rem; color: #343434; margin-top: 0;
}
@media (min-width: 768px) { .card-tool__name { margin-bottom: 1rem; }
}
.card-tool__description { font-weight: 300; font-size: 1.6rem; line-height: 2.4rem; color: #343434;
}
@media (min-width: 768px) { .card-tool__description { color: #444444; }
}
.card-tool__description:first-of-type { margin-top: 0;
}
.card-tool__description:last-of-type { margin-bottom: 0;
}
.card-tool__actions { height: 4.9rem;
}
@media (min-width: 768px) { .card-tool__actions { height: 8.2rem; }
}
.card-tool__action { font-weight: 500; font-size: 1.4rem; line-height: 1.6rem;
}
.card-tool--other__content { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.card-tool--other__details { margin-left: 1.6rem;
}
.card-tool--other__icon { -webkit-box-flex: 0; -ms-flex: none; flex: none;
}
.card-tool--other__name { margin-top: -0.5rem;
}
.card-tool--other__actions { height: 4.2rem;
}
@media (min-width: 768px) { .card-tool--other__actions { height: 7.3rem; }
}
.event-text-card__content { box-sizing: border-box; min-height: 20.8rem;
}
.event-text-card__date-time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.event-text-card__date { font-family: 'Roboto Slab'; font-weight: 400; font-size: 1.6rem; color: rgba(0, 0, 0, 0.3); letter-spacing: 0.5px; line-height: 2.1rem; margin: 0;
}
.event-text-card__time { font-weight: 500; font-size: 1.4rem; line-height: 1.6rem; color: #FF5252; margin: 0;
}
.event-text-card__name { font-weight: 300; font-size: 2.4rem; line-height: 3.2rem; color: rgba(0, 0, 0, 0.87); margin: 1.1rem 0 0;
}
.event-text-card__actions { height: 5.4rem;
}
@media (min-width: 768px) { .event-text-card__actions { height: 6.4rem; }
}
.event-media-card__actions { height: 5.4rem;
}
@media (min-width: 768px) { .event-media-card__actions { height: 6.4rem; }
}
.wip { position: relative;
}
.wip:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: rgba(255, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.6); background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0, 0, 0, 0.7) 5px, rgba(0, 0, 0, 0.7) 10px); background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0, 0, 0, 0.7) 5px, rgba(0, 0, 0, 0.7) 10px);
}

Material Cards - Script Codes JS Codes

console.clear();
angular.module('MyApp').controller('AppCtrl', function($scope) {});
Material Cards - Script Codes
Material Cards - Script Codes
Home Page Home
Developer Kyle Houston
Username styler
Uploaded August 25, 2022
Rating 3
Size 5,979 Kb
Views 46,552
Do you need developer help for Material 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!

Kyle Houston (styler) Script Codes
Name
CSS3 Preloader
Mobile Menu Button
Material Design Card Hover
Material Design Ripple Button
Movie App - Watchlist - Creating a watchlist movie view RESOLVED
Flexbox - Align a single element to the right inside a flex container
Flexbox thumbnail grid
Movie App - Detailed View - Adding a watchlist button - RESOLVED
Dropdown Navigation
View Transition
Create amazing captions 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!