In class Week 4 - Mobile Navigation Patterns-Footer Nav
How do I make an in class week 4 - mobile navigation patterns-footer nav?
What is a in class week 4 - mobile navigation patterns-footer nav? How do you make a in class week 4 - mobile navigation patterns-footer nav? This script and codes were developed by Richard on 08 January 2023, Sunday.
In class Week 4 - Mobile Navigation Patterns-Footer Nav - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>In class Week 4 - Mobile Navigation Patterns-Footer Nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <nav class="header-nav hide-for-mobile"> <ul> <li><a href="#dave">Dave Rupert</a></li> <li><a href="#bruce">Bruce Lawson</a></li> <li><a href="#trent">Trent Walton</a></li> <li><a href="#ian">Ian Hickson</a></li> <li><a href="#brad">Brad Frost</a></li> <li><a href="#jeffrey">Jeffrey Zeldman</a></li> </ul> </nav> <a href="#footer-nav" class="show-for-mobile">Menu</a> <div class="col-group"> <header> <h1>Mobile Nav</h1> <p>EDITOR IN CHIEF and ART DIRECTION: Awwwards Team.<br> 2013 Awwwards Blog</p> <p><cite><a href="http://www.awwwards.org/books/Web-and-Mobile-TRENDS-2013.pdf"> http://www.awwwards.org/books/Web-and-Mobile-TRENDS-2013.pdf</a></cite></p> <h2>What is the idea behind the Trends Project?</h2> <p>The idea was to ask all the participants more or less the same questions to get a kind of “data map” which would help us visualize “the future of the web”. To this end, we had the invaluable help of 28 renowned experts in different areas of the industry. </p> <p>This practice HTML document has quotes from several of the experts.</p> </header> <article id="dave"> <p><img src="http://placekitten.com/g/500/500" alt="web expert"></p> <h2>Dave Rupert</h2> <p><i>Lead Developer at Paravel Inc.</i></p> <p>Dave Rupert is the lead developer for Paravel and host of “the ATX Web Show”, a podcast about the local web design and development scene in Austin, Texas.</p> <p><q>“I think the future of web and mobile design is that there is no distinction between the two.”</q></p> </article> <article id="bruce"> <p><img src="http://placekitten.com/g/500/500" alt="web expert"></p> <h2>Bruce Lawson</h2> <p><i>Evangelist of Open web standards</i></p> <p>Opera evangelist, co-author of “Introducing HTML5” and web standards lovegod. Guinness-drinking, kickboxing poetry freak. Man with MS.</p> <p><q>“I think simplicity’s the point. Mobile stuff needs to be simple, but so does everything else.”</q></p> </article> <article id="trent"> <p><img src="http://placekitten.com/g/500/500" alt="web expert"></p> <h2>Trent Walton</h2> <p><i>Founder & 1/3 of Paravel Inc.</i></p> <p>Trent Walton is founder and 1/3 of Paravel, a small web shop based out of the Texas Hill Country, where the lake levels are constant and the chicken fried steaks are as big as your face. Dave Rupert, Reagan Ray, and he have been working together building for the web since 2002.</p> <p><q>“At Paravel, we’re focused on being as device- agnostic and resolution independent as possible.”</q></p> </article> <article id="ian"> <p><img src="http://placekitten.com/g/500/500" alt="web expert"></p> <h2>Ian Hickson</h2> <p><i>HTML5 Specification Editor</i></p> <p>Ian Hickson is the author and maintainer of the Acid2 and Acid3 tests, and the Web Applications 1.0/HTML 5 specification. He is known as a proponent of web standards, and has played a crucial role in the development of specifications such as CSS. Hickson was a co-editor of the CSS 2.1 specification</p> <p><q>“Mobile is where Desktop was a decade or two ago, in terms of innovation.”</q></p> </article> <article id="brad"> <p><img src="http://placekitten.com/g/500/500" alt="web expert"></p> <h2>Brad Frost</h2> <p><i>Mobile Web Strategist and Frontend Designer at R/GA</i></p> <p>Brad Frost is a mobile web strategist and front-end designer at R/GA and is based out of beautiful Pittsburgh, PA. He is the creator of Mobile Web Best Practices, a resource site aimed at helping people create great mobile and responsive web experiences.</p> <p><q>“2013 will be the Year of Performance. People are increasingly intolerant with slowness in any experience.”</q></p> </article> <article id="jeffrey"> <p><img src="http://placekitten.com/g/500/500" alt="web expert"></p> <h2>Jeffrey Zeldman</h2> <p><i>Founder, Happy Cog. Publisher, A List Apart.</i></p> <p>Jeffrey Zeldman is one of the world’s most renowned personalities in Web. Guru of Web standards Zeldman is also Founder, Happy Cog™ studios. Author, Designing With Web Standards. Publisher, A List Apart, A Book Apart. Co-founder, An Event Apart. Host, Big Web Show.</p> <p><q>“We have to keep onthinking about mobile- first & content-first. ”</q></p> </article> </div> <footer> <nav class="footer-nav show-for-mobile" id="footer-nav"> <ul> <li><a href="#dave">Dave Rupert</a></li> <li><a href="#bruce">Bruce Lawson</a></li> <li><a href="#trent">Trent Walton</a></li> <li><a href="#ian">Ian Hickson</a></li> <li><a href="#brad">Brad Frost</a></li> <li><a href="#jeffrey">Jeffrey Zeldman</a></li> </ul> </nav> </footer>
</div>
</body>
</html>
In class Week 4 - Mobile Navigation Patterns-Footer Nav - Script Codes CSS Codes
/*Utility Classes*/
.show-for-mobile{ display: inline-block;
}
.hide-for-mobile{ display: none; }
/*Navagation*/
nav ul{ margin:0; paddding:0; list-style: none;
}
/*Defualt CSS*/
body { font-family: Verdana, Geneva, sans-serif; background-color:#039;
}
#wrapper { max-width:1000px; margin:0 auto; padding:2em; background-color:#fff;
}
header h1:first-of-type{ font-size:3em; text-align:center;
}
.col-group > article { padding: 1em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}
.col-group > article img { width:100%;
}
@media screen and (min-width: 44em) { /*Utility Classes*/ .show-for-mobile{ display: none; } .hide-for-mobile{ display: inline-block; } .col-group { overflow: hidden; } .col-group > article { float: left; width: 50%; } .col-group > article:nth-child(even) { clear: left; }
}
@media screen and (min-width: 64em) { .col-group > article { width: 33%; } .col-group > article:nth-child(even) { clear: none; } /*.col-group > article:nth-child(1+3n) { clear: left; }*/
}
![In class Week 4 - Mobile Navigation Patterns-Footer Nav - Script Codes](http://shots.codepen.io/keyboarddesk/pen/xObvEE-512.jpg)
Developer | Richard |
Username | keyboarddesk |
Uploaded | January 08, 2023 |
Rating | 3 |
Size | 3,732 Kb |
Views | 6,072 |
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 |
Assignment 4 SCSS animation | 2,587 Kb |
Double swipe button | 2,024 Kb |
Richard Lococo -Assignment 6 - Canvas | 2,286 Kb |
Background inside text | 1,917 Kb |
My attempt at Scrollspy | 2,517 Kb |
Modal with triggered animation inside | 5,660 Kb |
Index transfer | 6,213 Kb |
Working with Foundation week13 | 1,766 Kb |
Week 4 ICA | 2,725 Kb |
A Pen by Richard | 2,519 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 Alex Edwards | Exards | 8,218 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Css3 slide | Nakome | 3,190 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!