ICA adding mobile NAV

Developer
Richard
Size
3,739 Kb
Views
6,072
  1. ICA adding mobile NAV Previews
  2. ICA adding mobile NAV HTML Codes
  3. ICA adding mobile NAV CSS Codes

How do I make an ica adding mobile nav?

What is a ica adding mobile nav? How do you make a ica adding mobile nav? This script and codes were developed by Richard on 08 January 2023, Sunday.

ICA adding mobile NAV Previews
IQ Test

ICA adding mobile NAV - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ICA adding mobile NAV</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper">	<nav class="show-for-desktop"> <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>	<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>	<nav class="bottom-bar show-for-mobile"> <a href="#dave" class="navs">Dave</a> <a href="#ian"class="navs">Ian</a> <a href="#jeffrey"class="navs">Jeffrey</a> </nav>
</div>
</body>
</html>

ICA adding mobile NAV - Script Codes CSS Codes

body { font-family: Verdana, Geneva, sans-serif; background-color:#039;
}
#wrapper { max-width:1000px; margin:0 auto; padding:2em; background-color:#fff;
} .show-for-desktop{ display:none; } .show-for-mobile{ display: block; }
.bottom-bar{ float: left; margin: 0; padding: 10px; position: fixed; bottom:0; left:0; width: 100%; border-color:blue; background:#039; text-align:center; font-family: arial; font-size:20px;
}
.navs{
color: white;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1em;
padding:0px 45px;
}
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) { .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) { .show-for-desktop{ display:block; } .show-for-mobile{ display:none;
} .col-group > article { width: 33%; } .col-group > article:nth-child(even) { clear: none; } .col-group > article:nth-child(1+3n) { clear: left; }
}
ICA adding mobile NAV - Script Codes
ICA adding mobile NAV - Script Codes
Home Page Home
Developer Richard
Username keyboarddesk
Uploaded January 08, 2023
Rating 3
Size 3,739 Kb
Views 6,072
Do you need developer help for ICA adding mobile NAV?

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!

Richard (keyboarddesk) Script Codes
Name
In class Week 4 - Mobile Navigation Patterns-Footer Nav
Looping background beach video
Richard Lococo -Assignment 6 - Canvas
My attempt at Scrollspy
Assignment 4 SCSS animations
SVG animation introduction
Expandable horizontal columns
Playing with AFC tabs nav
Working with Foundation week13
ALPACA PRESENTATION
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!