Anthony Young - ayoungh.co.uk Material Design mashup
How do I make an anthony young - ayoungh.co.uk material design mashup?
Just a mashup / prototype of what I would like my site to look like, using material design. What is a anthony young - ayoungh.co.uk material design mashup? How do you make a anthony young - ayoungh.co.uk material design mashup? This script and codes were developed by Anthony Young on 31 October 2022, Monday.
Anthony Young - ayoungh.co.uk Material Design mashup Previews
Anthony Young - ayoungh.co.uk Material Design mashup - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Anthony Young - ayoungh.co.uk Material Design mashup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <!-- Material Design Lite --> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.blue-red.min.css"> <!-- Material Design icon font --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body> <!-- Uses a transparent header that draws on top of the layout's background --> <div class="layout-transparent mdl-layout mdl-js-layout mdl-layout__container"> <header class="mdl-layout__header mdl-layout__header--transparent"> <div class="mdl-layout__header-row pageHeader"> <!-- Title --> <span class="mdl-layout-title">Anthony Young</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="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Anthony Young</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <main class="mdl-layout__content"> <div class="homepage-inner mdl-grid">
<div class="demo-blog__posts mdl-grid"> <div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col"> <div class="mdl-card__media mdl-color-text--grey-50"> <h3><a href="entry.html">Coffee Pic</a></h3> </div> <div class="mdl-card__supporting-text meta mdl-color-text--grey-600"> <div class="minilogo"></div> <div> <strong>The Newist</strong> <span>2 days ago</span> </div> </div> </div> <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop"> <button class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent" data-upgraded=",MaterialButton,MaterialRipple"><i class="material-icons mdl-color-text--white">add</i><span class="mdl-button__ripple-container"><span class="mdl-ripple is-animating" style="width: 160.391918985787px; height: 160.391918985787px; -webkit-transform: translate(-50%, -50%) translate(20px, 30px); transform: translate(-50%, -50%) translate(20px, 30px);"></span></span></button> <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600"> <img src="images/logo.png"> +1,337 </div> <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600"> <div> <strong>The Newist</strong> </div> <div class="mdl-menu__container is-upgraded"><div class="mdl-menu__outline mdl-menu--bottom-right"></div><ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="menubtn" data-upgraded=",MaterialMenu"> <button class="mdl-menu__item mdl-js-ripple-effect" tabindex="-1" data-upgraded=",MaterialRipple">About</button> <button class="mdl-menu__item mdl-js-ripple-effect" tabindex="-1" data-upgraded=",MaterialRipple">Message</button> <button class="mdl-menu__item mdl-js-ripple-effect" tabindex="-1" data-upgraded=",MaterialRipple">Favorite</button> <button class="mdl-menu__item mdl-js-ripple-effect" tabindex="-1" data-upgraded=",MaterialRipple">Search</button> </ul></div> <button id="menubtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" data-upgraded=",MaterialButton,MaterialRipple"> <i class="material-icons">more_vert</i> <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button> </div> </div> <div class="mdl-card on-the-road-again mdl-cell mdl-cell--12-col"> <div class="mdl-card__media mdl-color-text--grey-50"> <h3><a href="entry.html">On the road again</a></h3> </div> <div class="mdl-color-text--grey-600 mdl-card__supporting-text"> Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis. </div> <div class="mdl-card__supporting-text meta mdl-color-text--grey-600"> <div class="minilogo"></div> <div> <strong>The Newist</strong> <span>2 days ago</span> </div> </div> </div> <div class="mdl-card amazing mdl-cell mdl-cell--12-col"> <div class="mdl-card__title mdl-color-text--grey-50"> <h3 class="quote"><a href="entry.html">I couldn’t take any pictures but this was an amazing thing…</a></h3> </div> <div class="mdl-card__supporting-text mdl-color-text--grey-600"> Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis. </div> <div class="mdl-card__supporting-text meta mdl-color-text--grey-600"> <div class="minilogo"></div> <div> <strong>The Newist</strong> <span>2 days ago</span> </div> </div> </div> <div class="mdl-card shopping mdl-cell mdl-cell--12-col"> <div class="mdl-card__media mdl-color-text--grey-50"> <h3><a href="entry.html">Shopping</a></h3> </div> <div class="mdl-card__supporting-text mdl-color-text--grey-600"> Enim labore aliqua consequat ut quis ad occaecat aliquip incididunt. Sunt nulla eu enim irure enim nostrud aliqua consectetur ad consectetur sunt ullamco officia. Ex officia laborum et consequat duis. </div> <div class="mdl-card__supporting-text meta mdl-color-text--grey-600"> <div class="minilogo"></div> <div> <strong>The Newist</strong> <span>2 days ago</span> </div> </div> </div> <nav class="demo-nav mdl-cell mdl-cell--12-col"> <div class="section-spacer"></div> <a href="entry.html" class="demo-nav__button"> More <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" data-upgraded=",MaterialButton,MaterialRipple"> <i class="material-icons">arrow_forward</i> <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button> </a> </nav> </div> </div><!-- end of homepage-inner --> </main> </div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Anthony Young - ayoungh.co.uk Material Design mashup - Script Codes CSS Codes
.layout-transparent { background: url('https://www.ayoungh.co.uk/content/images/2014/Feb/unsplash_52c36ef60f8df_1-1.JPG') center / cover;
}
.layout-transparent .mdl-layout__header,
.layout-transparent .mdl-layout__drawer-button { /* This background is dark, so we set text to white. Use 87% black instead if your background is light. */ color: white;
}
.mdl-layout__content { padding-top: 230px; position: relative; -webkit-overflow-scrolling: touch;
}
.mdl-layout__header .mdl-layout__header-row { -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear;
}
.mdl-layout__header .mdl-layout__header-row.vis { background-color: #F44336; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear;
}
.homepage-inner { max-width: 900px; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin: 0 auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0;
}
body .homepage-inner { font-family: 'Roboto', 'Helvetica', sans-serif;
}
.homepage-inner .homepage-inner__posts { max-width: 900px; padding: 0; display: flex; width: 100%; margin: 0 auto; flex-shrink: 0;
}
.homepage-inner.mdl-layout .mdl-layout__content { padding-top: 230px; position: relative; -webkit-overflow-scrolling: touch;
}
.homepage-inner .mdl-card { display: flex; flex-direction: column; align-items: stretch; min-height: 360px;
}
.homepage-inner .mdl-card__title { padding: 16px; flex-grow: 1;
}
.homepage-inner .mdl-card__media { box-sizing: border-box; background-size: cover; padding: 24px; display: flex; flex-grow: 1; flex-direction: row; align-items: flex-end; cursor: pointer;
}
.homepage-inner .mdl-card__media a,
.homepage-inner .mdl-card__title a { color: inherit;
}
.homepage-inner .mdl-card__supporting-text { width: 100%; padding: 16px; min-height: 64px; display: flex; align-items: center;
}
.homepage-inner .mdl-card__supporting-text strong { font-weight: 400;
}
.homepage-inner .mdl-card__media ~ .mdl-card__supporting-text { min-height: 64px;
}
.homepage-inner .mdl-card__supporting-text:not(:last-child) { box-sizing: border-box; min-height: 76px;
}
.homepage-inner:not(.homepage-inner--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text { border-top: 1px solid rgba(0,0,0,0.1);
}
.homepage-inner .mdl-card__actions:first-child { margin-left: 0;
}
.homepage-inner .meta { box-sizing: border-box; padding: 16px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; height: auto;
}
.homepage-inner .meta > .meta__favorites{ flex-direction: row; margin: 0 8px; font-size: 13px; font-weight: 500;
}
.homepage-inner .meta > .meta__favorites .material-icons { font-size: 2em; cursor: pointer; margin-left: 12px;
}
.homepage-inner .mdl-card .meta.meta--fill { justify-content: space-between;
}
.homepage-inner .meta > *:first-child { margin-right: 16px;
}
.homepage-inner .meta > * { display: flex; flex-direction: column;
}
.homepage-inner.is-small-screen .homepage-inner__posts > .mdl-card.coffee-pic { order: 0;
}
.homepage-inner.is-small-screen .homepage-inner__posts > .mdl-card.something-else { order: -1;
}
.homepage-inner .coffee-pic .mdl-card__media { background-image: url('images/coffee.jpg');
}
.homepage-inner .something-else .mdl-card__media { display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.homepage-inner .something-else > button { position: absolute; top: 0; right: 28px; transform: translate(0px, -28px);
}
.homepage-inner .something-else .mdl-card__media { font-size: 13px; font-weight: 500; border-top-left-radius: 2px; border-top-right-radius: 2px;
}
.homepage-inner .something-else .mdl-card__media img { width: 64px; height: 64px; margin-bottom: 10px;
}
.homepage-inner .something-else .mdl-card__supporting-text { background-color: #F44336; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
}
.homepage-inner .on-the-road-again .mdl-card__media { background-image: url('images/road.jpg');
}
.homepage-inner .shopping .mdl-card__media { background-image: url('images/shopping.jpg');
}
.homepage-inner .homepage-inner__posts > .demo-nav { margin: 12px 15px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: white; font-weight: 500;
}
.homepage-inner .homepage-inner__posts > .demo-nav > .demo-nav__button { color: white; text-decoration: none;
}
.homepage-inner .homepage-inner__posts > .demo-nav .mdl-button { color: rgba(0,0,0,0.54); background-color: white;
}
.homepage-inner .homepage-inner__posts > .demo-nav > .demo-nav__button:first-child .mdl-button { margin-right: 16px;
}
.homepage-inner .homepage-inner__posts > .demo-nav > .demo-nav__button:last-child .mdl-button { margin-left: 16px;
}
.homepage-inner .mdl-card > a { color: inherit; text-decoration: none; font-weight: inherit;
}
.homepage-inner .mdl-card h3 { margin: 0;
}
.homepage-inner .mdl-card h3 a { text-decoration: none;
}
.homepage-inner .mdl-card h3.quote:before, .homepage-inner .mdl-card h3.quote:after { display: block; font-size: 3em; margin-top: 0.5em;
}
.homepage-inner .mdl-card h3.quote:before { content: '“';
}
.homepage-inner .mdl-card h3.quote:after { content: '”';
}
.homepage-inner--blogpost .custom-header { background-color: transparent;
}
.homepage-inner--blogpost .homepage-inner__posts > .mdl-card .mdl-card__media { background-image: url('images/road_big.jpg'); height: 280px;
}
.homepage-inner--blogpost .comments { background-color: #EEE;
}
.homepage-inner--blogpost .meta > * { align-items: center;
}
.homepage-inner--blogpost .meta + .mdl-card__supporting-text { border: 0; display: flex; flex-direction: column;
}
.homepage-inner--blogpost .meta + .mdl-card__supporting-text p { max-width: 512px; margin: 16px auto; font-size: 16px; line-height: 28px;
}
.homepage-inner--blogpost .comments { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 32px; box-sizing: border-box;
}
.homepage-inner--blogpost .comments > form { display: flex; flex-diretion: row; margin-bottom: 16px;
}
.homepage-inner--blogpost .comments > form .mdl-textfield { flex-grow: 1; margin-right: 16px; color: rgb(97, 97, 97);
}
/* Workaround for Firefox. * User agent stylesheet kept overwriting the font in FF only. */
.homepage-inner--blogpost .comments > form .mdl-textfield .mdl-textfield__input { font-family: 'Roboto', 'Helvetica', sans-serif;
}
.homepage-inner--blogpost .comments > form .mdl-textfield input,
.homepage-inner--blogpost .comments > form .mdl-textfield textarea { resize: none;
}
.homepage-inner--blogpost .comments > form button { margin-top: 20px; background-color: rgba(0, 0, 0, 0.24); color: white;
}
.homepage-inner--blogpost .comments .comment { display: flex; flex-direction: column; align-items: stretch;
}
.homepage-inner--blogpost .comments .comment > .comment__header { display: flex; flex-direction: row; align-items: center; margin-bottom: 16px;
}
.homepage-inner--blogpost .comments .comment > .comment__header > .comment__avatar { width: 48px; height: 48px; border-radius: 24px; margin-right: 16px;
}
.homepage-inner--blogpost .comments .comment > .comment__header > .comment__author { flex-grow: 1; display: flex; flex-direction: column;
}
.homepage-inner--blogpost .comments .comment > .comment__text { line-height: 1.5em;
}
.homepage-inner--blogpost .comments .comment > .comment__actions { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size: 0.8em; margin-top: 16px;
}
.homepage-inner--blogpost .comments .comment > .comment__actions button { margin-right: 16px; color: rgba(0, 0, 0, 0.24);
}
.homepage-inner--blogpost .comments .comment > .comment__answers { padding-top: 32px; padding-left: 48px;
}
.homepage-inner--blogpost .demo-back { position: absolute; top: 16px; left: 16px; color: white; z-index: 9999;
}
.homepage-inner .section-spacer { flex-grow: 1;
}
.homepage-inner .something-else { overflow: visible; z-index: 10;
}
.homepage-inner .amazing .mdl-card__title { background-color: #263238;
}
.homepage-inner .minilogo { width: 44px; height: 44px; background-image: url('images/avatar.png'); background-position: center; background-repeat: no-repeat; background-size: 50%; border-radius: 22px; background-color: #F5F5F5;
}
/* Fixes for IE 10 */
.mdl-grid { display: flex !important;
}
.social-btn { background-position: center; background-size: contain; background-repeat: no-repeat; background-color: transparent; margin: 0 16px; width: 24px; height: 24px; cursor: pointer; opacity: 0.46; border-radius: 2px;
}
.social-btn__twitter { background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png');
}
.social-btn__blogger { background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png');
}
.social-btn__gplus { background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_black_24dp.png');
}
.social-btn__share { color: rgba(0, 0, 0, 0.54); background: transparent;
}
.homepage-inner .mdl-mini-footer { margin-top: 80px; height: 120px; padding: 40px; align-items: center; background-color: white; box-sizing: border-box;
}
Anthony Young - ayoungh.co.uk Material Design mashup - Script Codes JS Codes
$('.mdl-layout__content').scroll(function() { var is_active = $('.pageHeader').hasClass('vis'); if ($('.mdl-layout__content').scrollTop() > 30 && !is_active) { $('.pageHeader').addClass('vis'); } else if ($('.mdl-layout__content').scrollTop() <= 30 && is_active) { $('.pageHeader').removeClass('vis'); }
});
| Developer | Anthony Young |
| Username | ayoungh |
| Uploaded | October 31, 2022 |
| Rating | 3 |
| Size | 5,216 Kb |
| Views | 10,120 |
Do you need developer help for Anthony Young - ayoungh.co.uk Material Design mashup?
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!
Anthony Young (ayoungh) Script Codes
| Name | Size |
| Scroll Progress Indicator With jQuery and SVG | 3,444 Kb |
| Keypress check mobile | 1,492 Kb |
| Mobile push in nav | 2,605 Kb |
| UL scroll to | 2,036 Kb |
| Yourorderhub.co.uk | 91,604 Kb |
| Field validation | 2,249 Kb |
| Exit Intention JS | 2,356 Kb |
| Material header and menu drawer | 3,347 Kb |
| Drop down sidebar | 2,616 Kb |
| React - Table with expanding rows | 6,773 Kb |
Create amazing SEO content 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!
Similar Scripts & Codes
| Name | Username | Size |
| Sticky Navbar | Phantomesse | 5,106 Kb |
| Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
| Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
| A simple log in form made with css | Mayurelbhar | 2,160 Kb |
| Svg penguin | _massimo | 2,990 Kb |
| NT Tribute | Skybutterfly | 2,850 Kb |
| Bubble animation | Ftabor | 6,565 Kb |
| Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
| Resizable SASS Icons | Marianarlt | 7,611 Kb |
| Portfolio page | Bhavya_j | 2,804 Kb |
Do you want hide your ip address?
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!