Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> <title>Starter Template - Materialize</title> <!-- CSS --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://materializecss.com/dist/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/> </head> <body> <nav class="light-blue lighten-1" role="navigation"> <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a> <ul class="right hide-on-med-and-down"> <li><a href="#">Navbar Link</a></li> </ul> <ul id="nav-mobile" class="sidenav"> <li><a href="#">Navbar Link</a></li> </ul> <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a> </div> </nav> <div class="section no-pad-bot" id="index-banner"> <div class="container"> <br><br> <h1 class="header center orange-text">Starter Template</h1> <div class="row center"> <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> </div> <div class="row center"> <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a> </div> <br><br> </div> </div> <div class="container"> <div class="section"> <!-- Icon Section --> <div class="row"> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2> <h5 class="center">Speeds up development</h5> <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="material-icons">group</i></h2> <h5 class="center">User Experience Focused</h5> <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2> <h5 class="center">Easy to work with</h5> <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p> </div> </div> </div> </div> <br><br> </div> <footer class="page-footer orange"> <div class="container"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text">Company Bio</h5> <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p> </div> <div class="col l3 s12"> <h5 class="white-text">Settings</h5> <ul> <li><a class="white-text" href="#!">Link 1</a></li> <li><a class="white-text" href="#!">Link 2</a></li> <li><a class="white-text" href="#!">Link 3</a></li> <li><a class="white-text" href="#!">Link 4</a></li> </ul> </div> <div class="col l3 s12"> <h5 class="white-text">Connect</h5> <ul> <li><a class="white-text" href="#!">Link 1</a></li> <li><a class="white-text" href="#!">Link 2</a></li> <li><a class="white-text" href="#!">Link 3</a></li> <li><a class="white-text" href="#!">Link 4</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a> </div> </div> </footer> <!-- Scripts--> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://materializecss.com/bin/materialize.js"></script> </body> </html>
/* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* Custom Stylesheet */ /** * Use this file to override Materialize files so you can update * the core Materialize files in the future * * Made By MaterializeCSS.com */ .icon-block { padding: 0 15px; } .icon-block .material-icons { font-size: inherit; }
(function($){ $(function(){ $('.sidenav').sidenav(); }); // end of document ready })(jQuery); // end of jQuery name space