Apple-style website (first half 2011)

Developer
Billy Brown
Size
3,385 Kb
Views
22,264
  1. Apple-style website (first half 2011) Previews
  2. Apple-style website (first half 2011) HTML Codes
  3. Apple-style website (first half 2011) CSS Codes

How do I make an apple-style website (first half 2011)?

The design that the Apple website used for the first half of 2011, all made in HTML and CSS (no sprites).. What is a apple-style website (first half 2011)? How do you make a apple-style website (first half 2011)? This script and codes were developed by Billy Brown on 30 September 2022, Friday.

Apple-style website (first half 2011) Previews
IQ Test

Apple-style website (first half 2011) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Apple-style website (first half 2011)</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="page-wrap"> <div id="header"> <a href="#" class="nav nav-left">Home</a> <a href="#" class="nav">Page 1</a> <a href="#" class="nav">Page 2</a> <a href="#" class="nav">Page 3</a> <a href="#" class="nav">Page 4</a> <a href="#" class="nav">Page 5</a> <a href="#" class="nav">Page 6</a> <a href="#" class="nav nav-right">Page 7</a> </div> <div id="guts"> <h1>Home</h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> </div> <div id="footer"> <div class="footer"> <h2>Left</h2> Text goes here </div> <div class="footer"> <h2>Middle-1</h2> Text goes here </div> <div class="footer"> <h2>Middle-2</h2> Text goes here </div> <div class="footer"> <h2>Right</h2> Text goes here </div> <div id="footnote"> This is the Footnote. <span style="float: right;">Links: <a href="#">Page 1</a> | <a href="#">Page 2</a> | <a href="#">Page 3</a> | <a href="#">Page 4</a> | <a href="#">Page 5</a> | <a href="#">Page 6</a> | <a href="#">Page 7</a></span> </div> Copyright &copy; 2014 Druid of L&ucirc;hn. All Rights Reserved. <a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a> </div>
</div>
</body>
</html>

Apple-style website (first half 2011) - Script Codes CSS Codes

/*
--------------------
Resets
--------------------
*/
* { padding: 0;	margin: 0;
}
html { background-color: #f3f3f3;	overflow-y: scroll;	font-family: "Myriad Pro", Helvetica, sans-serif;
}
body { margin: 1em;
}
a {	text-decoration: none;	color: #10c0e0;
}	a:hover {	text-decoration: underline;	}
h1 {	font-family: "Myriad Pro", Helvetica, sans-serif;	font-weight: normal;	font-size: 40px;	color: #000000;
}
h2 {	font-family: "Myriad Pro", Helvetica, sans-serif;	font-weight: 500;	font-size: 18px;	color: #000000;
}
ul, ol { padding: 10px 20px;
}
/*
--------------------
Page Layout
--------------------
*/
div#page-wrap {	margin: 0 auto; /* This makes the whole footer visible in "Details" view */ padding-bottom: 50px;
}
div#header {	margin: 20px auto;	width: 980px;
}
div#guts {	clear: both;	padding: 20px;	margin: 20px auto;	display: block;	height: 560px;	width: 940px;	color: #000000;	font-size: 18px;	font-family: "Myriad Pro", Helvetica, sans-serif;	background-color: #f9f9f9;	border-radius: 5px;	box-shadow:inset 1px 1px 5px #666666;
}
div#footer {	width: 996px;	margin: 20px auto 0;	text-align: center;	color: #888888;	font-size: 12px;	font-family: "Myriad Pro", Helvetica, sans-serif;
}
/*
--------------------
navigation CSS
--------------------
*/
.nav-left {	border-top-left-radius: 4px;	border-bottom-left-radius: 4px;
}
.nav {	display: block;	margin: 0 -1px 20px 0;	height: 33px;	border: solid 1px #666666;	text-align: center;width: 121px;	font-size: 13px;	color: #eeeeee;	font-family: "Myriad Pro", Helvetica, sans-serif;	line-height: 35px;	float: left;	text-shadow:	0px -1px 0 #444444,	0px -1px 0 #444444,	0px 0px 0 #444444,	0px 0px 0 #444444;	background-image: -webkit-linear-gradient(top, #8b8b8b, #707070 49%, #5e5e5e 50%, #777777);	background-image: linear-gradient(top, #8b8b8b, #707070 49%, #5e5e5e 50%, #777777);	box-shadow:inset 1px 1px 20px #797979, rgba(0, 0, 0, 0.5) 0px 2px 2px -1px, inset 0 0 1px #cccccc;
}
.nav-right {	border-top-right-radius: 4px; border-bottom-right-radius: 4px;
}
/*
--------------------
navigation CSS - Hover
--------------------
*/
.nav:hover {	background: -webkit-linear-gradient(top, #565656, #555555 49%, #454545 50%, #555555);	background: linear-gradient(top, #565656, #555555 49%, #454545 50%, #555555); text-decoration: none;	text-shadow:	-1px -1px 0 #444444,	1px -1px 0 #444444,	-1px 1px 0 #444444,	1px 1px 0 #444444;	box-shadow:inset 1px 1px 10px #555555, rgba(0, 0, 0, 0.5) 0px 2px 2px -1px;
}
.nav:active { box-shadow:inset 1px 2px 10px #111111, rgba(0, 0, 0, 0.5) 0px 2px 2px -1px;
}
/*
--------------------
footer CSS
--------------------
*/
#footer { padding-bottom: 10px;
}
div#footer div.footer {	padding: 10px;	margin: 0 10px 20px;	display: block;	height: 100px;	width: 209px;	color: #777777;	font-size: 12px;	font-family: "Myriad Pro", Helvetica, sans-serif;	text-align: center;	background-color: #f9f9f9;	float: left;	border-radius: 5px;	-khtml-border-radius: 5px;	box-shadow:inset 1px 1px 5px #666666;
}
div#footnote {	display: block;	width: 910px;	height: 30px;	margin: 40px auto;	padding: 0 20px;	clear: both;	font-size: 12px;	line-height: 30px;	text-align: left;	color: #888888;	border-bottom: solid thin #dddddd;	border-top: solid thin #dddddd;
}
Apple-style website (first half 2011) - Script Codes
Apple-style website (first half 2011) - Script Codes
Home Page Home
Developer Billy Brown
Username _Billy_Brown
Uploaded September 30, 2022
Rating 3
Size 3,385 Kb
Views 22,264
Do you need developer help for Apple-style website (first half 2011)?

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!

Billy Brown (_Billy_Brown) Script Codes
Name
Playing with FlexBox
Mandelbrot Fractal
Number game
Aperture-style lens
Online Shop
Pure CSS image slider
Canvas Pacman
Pure CSS change stylesheet
A Pen by Billy Brown
Better Transparent input boxes
Create amazing blog posts 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!