Materialize Card
How do I make an materialize card?
What is a materialize card? How do you make a materialize card? This script and codes were developed by Mike on 01 February 2023, Wednesday.
Materialize Card - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Materialize Card</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div class="container"> <div class="row"> <div class="col s12 m6"> <div class="card"> <div class="card-header"> <div class="row valign-wrapper"> <div class="col s2"> <img src="http://placehold.it/40x40" alt="" class="circle valign"> </div> <div class="col s10"> <span class="grey-text text-darken-4"> This is a circle image. </span> </div> </div> </div> <div class="card-content"> <div class="current-price right">$2.34</div> <div class="ticker center">$AAPL</div> <a class="activator btn-floating floating-fab waves-effect waves-light red"><i class="material-icons">add</i></a> </div> <div class="card-footer"> <p><a href="#">This is a link</a></p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Notes<i class="material-icons right">close</i></span> <p>Here is some more information about this product that is only revealed once clicked on. I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively...</p> </div> </div> <!-- card --> </div> </div>
</div>
<!-- jQuery JS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</body>
</html>
Materialize Card - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* Materialize CSS */
@import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css");
body { padding: 50px 0;
}
.card-header { position: relative; background-color: inherit; border-bottom: 1px solid rgba(160, 160, 160, 0.2); padding: 4px 14px;
}
.card-header .row { margin: 8px 0;
}
.card-content .ticker { font-size: 2em; color: green;
}
.card-content .floating-fab { position: absolute; right: 24px; bottom: 40px;
}
.card-footer { position: relative; background-color: inherit; border-top: 1px solid rgba(160, 160, 160, 0.2); padding: 4px 14px;
}
![Materialize Card - Script Codes](http://shots.codepen.io/mikestabile/pen/OpgExm-512.jpg)
Developer | Mike |
Username | mikestabile |
Uploaded | February 01, 2023 |
Rating | 3 |
Size | 2,757 Kb |
Views | 4,048 |
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 |
Materialize Card | 2,757 Kb |
Scroll to top design 2 | 2,213 Kb |
Hero with bottom banner | 3,742 Kb |
Bill Pay Intro Carousel | 4,943 Kb |
Bill Pay Banner Ad | 76,528 Kb |
Scroll to top design 1 | 0 Kb |
JQuery Smooth Scroll | 2,462 Kb |
Business Card Sample Using jQuery Flip | 4,122 Kb |
Bootstrap Tour Example | 4,821 Kb |
Styled radio buttons | 2,893 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 |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Loader | MikitaLisavets | 3,321 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 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!