Gallery Theme getmdl

Developer
Kuldeep Pisda
Size
3,230 Kb
Views
20,240
  1. Gallery Theme getmdl Previews
  2. Gallery Theme getmdl HTML Codes
  3. Gallery Theme getmdl CSS Codes

How do I make an gallery theme getmdl?

What is a gallery theme getmdl? How do you make a gallery theme getmdl? This script and codes were developed by Kuldeep Pisda on 30 October 2022, Sunday.

Gallery Theme getmdl Previews
IQ Test

Gallery Theme getmdl - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gallery Theme getmdl</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title>Gallery</title> <!-- Add to homescreen for Chrome on Android --> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="images/android-desktop.png"> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Material Design Lite"> <link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png"> <!-- Tile icon for Win8 (144x144 + tile color) --> <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> <meta name="msapplication-TileColor" content="#3372DF"> <link rel="shortcut icon" href="images/favicon.png"> <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones --> <!-- <link rel="canonical" href="http://www.example.com/"> --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-red.min.css"> <link rel="stylesheet" href="styles.css"> <style> #view-source { position: fixed; display: block; right: 0; bottom: 0; margin-right: 40px; margin-bottom: 40px; z-index: 900; } </style> </head> <body> <!-- Uses a header that scrolls with the text, rather than staying locked at the top -->
<div class="mdl-layout mdl-js-layout"> <header class="mdl-layout__header mdl-layout__header--scroll"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Gallery</span> <!-- Add spacer, to align navigation to the right --> <div class="mdl-layout-spacer"></div> <!-- Navigation --> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href=""><i class="material-icons">&#xE871;</i> Dashbooard</a> <a class="mdl-navigation__link" href=""><i class="material-icons">&#xE2C6;</i> Upload</a> <a class="mdl-navigation__link" href=""><i class="material-icons">&#xE8AF;</i> FAQ</a> <a class="mdl-navigation__link" href=""><i class="material-icons">&#xE154;</i> Logout</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href=""><i class="material-icons">&#xE871;</i> Dashbooard</a> <a class="mdl-navigation__link" href=""><i class="material-icons">&#xE2C6;</i> Upload</a> <a class="mdl-navigation__link" href=""><i class="material-icons">&#xE8AF;</i> FAQ</a> <a class="mdl-navigation__link" href=""><i class="material-icons">&#xE154;</i> Logout</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--2-offset-desktop mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> <div class="mdl-cell mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> <div class="mdl-cell mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--2-offset-desktop mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> <div class="mdl-cell mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> <div class="mdl-cell mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> </div> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--2-offset-desktop mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> <div class="mdl-cell mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> <div class="mdl-cell mdl-cell--3-col-desktop"> <div class="demo-card-image mdl-card mdl-shadow--2dp" style="background: url('https://s-media-cache-ak0.pinimg.com/avatars/shalupisda_1471721118_280.jpg') center / cover;"> <div class="mdl-card__title mdl-card--expand"></div> <div class="mdl-card__actions"> <span class="demo-card-image__filename">Image.jpg</span> </div> </div> </div> </div> </div> <footer class="mdl-mega-footer"> <div class="mdl-mega-footer__middle-section"> <div class="mdl-mega-footer__drop-down-section"> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked> <h1 class="mdl-mega-footer__heading">Features</h1> <ul class="mdl-mega-footer__link-list"> <li><a href="#">About</a></li> <li><a href="#">Terms</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Updates</a></li> </ul> </div> <div class="mdl-mega-footer__drop-down-section"> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked> <h1 class="mdl-mega-footer__heading">Details</h1> <ul class="mdl-mega-footer__link-list"> <li><a href="#">Specs</a></li> <li><a href="#">Tools</a></li> <li><a href="#">Resources</a></li> </ul> </div> <div class="mdl-mega-footer__drop-down-section"> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked> <h1 class="mdl-mega-footer__heading">Technology</h1> <ul class="mdl-mega-footer__link-list"> <li><a href="#">How it works</a></li> <li><a href="#">Patterns</a></li> <li><a href="#">Usage</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contracts</a></li> </ul> </div> <div class="mdl-mega-footer__drop-down-section"> <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked> <h1 class="mdl-mega-footer__heading">FAQ</h1> <ul class="mdl-mega-footer__link-list"> <li><a href="#">Questions</a></li> <li><a href="#">Answers</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div> <div class="mdl-mega-footer__bottom-section"> <div class="mdl-logo">Title</div> <ul class="mdl-mega-footer__link-list"> <li><a href="#">Help</a></li> <li><a href="#">Privacy & Terms</a></li> </ul> </div>
</footer> </main>
</div> <a href="" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast"><i class="material-icons">&#xE8A3;</i> Contact Us</a> <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> </body>
</html>
</body>
</html>

Gallery Theme getmdl - Script Codes CSS Codes

.demo-card-image.mdl-card { width: 256px; height: 256px;
}
.demo-card-image > .mdl-card__actions { height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.2);
}
.demo-card-image__filename { color: #fff; font-size: 14px; font-weight: 500;
}
Gallery Theme getmdl - Script Codes
Gallery Theme getmdl - Script Codes
Home Page Home
Developer Kuldeep Pisda
Username kdpisda
Uploaded October 30, 2022
Rating 3
Size 3,230 Kb
Views 20,240
Do you need developer help for Gallery Theme getmdl?

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!

Kuldeep Pisda (kdpisda) Script Codes
Name
JNVRaipur
Gallery using materializecss
Email
Email Template
Loader
React
From Layout
A Pen by Kuldeep Pisda
Loader with materializecss
Create amazing video scripts 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!