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 |
JQuery Smooth Scroll | 2,462 Kb |
Materialize Card | 2,757 Kb |
A Pen by Mike | 2,174 Kb |
Scroll to top design 1 | 0 Kb |
Bootstrap Tour Example | 4,821 Kb |
Bill Pay Intro Carousel | 4,943 Kb |
Scroll to top design 2 | 2,213 Kb |
Bill Pay Banner Ad | 76,528 Kb |
Styled radio buttons | 2,893 Kb |
Hero with bottom banner | 3,742 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 Manoz | Manoz | 2,424 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Layout 11 | Altynai | 1,690 Kb |
Drag n Drop | Martin42 | 2,594 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!