Materialize Card

Developer
Mike
Size
2,757 Kb
Views
4,048
  1. Materialize Card Previews
  2. Materialize Card HTML Codes
  3. Materialize Card CSS Codes

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 Previews
IQ Test

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
Materialize Card - Script Codes
Home Page Home
Developer Mike
Username mikestabile
Uploaded February 01, 2023
Rating 3
Size 2,757 Kb
Views 4,048
Do you need developer help for Materialize Card?

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!

Mike (mikestabile) Script Codes
Name
A Pen by Mike
Scroll to top design 2
Scroll to top design 1
Styled radio buttons
Bill Pay Banner Ad
Hero with bottom banner
Business Card Sample Using jQuery Flip
Bootstrap Tour Example
Bill Pay Intro Carousel
JQuery Smooth Scroll
Create amazing sales emails 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!