-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·128 lines (112 loc) · 6.45 KB
/
index.html
File metadata and controls
executable file
·128 lines (112 loc) · 6.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Responsive Web Design</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<!-- Open Sans webfonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
<!-- custom styles -->
<link rel="stylesheet" href="css/styles.css">
<script src="js/modernizr.min.js"></script>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<!-- async allows the page to be loaded asynchronously, w/o waiting to finish loading the rest of the document -->
<script src="js/picturefill.min.js" async></script>
</head>
<body>
<div class="container">
<header class="topbar clearfix" role="header">
<a class="menu-icon" href="#mobile-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="site-name">Responsive Web Design</div>
<nav class="navigation">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<!-- end of header -->
<section class="hero clearfix">
<div class="hero-image">
<img src="images/hero-image.jpg" alt="Responsive Design" title="Responsive Design" />
</div>
<div class="hero-intro">
<h1>Responsive Web Design!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi non delectus, dignissimos consequatur temporibus consequuntur odio repellendus, nihil ipsam aut nemo, corporis possimus quod mollitia iure. </p>
<a class="button" href="https://github.com/mariohernandez/responsive">Get Source Code →</a>
</div>
</section>
<!-- end of .hero -->
<div class="content clearfix">
<section class="main">
<h2>Picking the right framework</h2>
<img class="article-image" src="images/css-frameworks.jpg" alt="CSS Frameworks" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis nemo et, vel vitae totam odit in quia alias repellendus expedita dolorum doloribus, sapiente deserunt aliquam debitis facilis perferendis quod quasi.</p>
<p>Rem asperiores similique aspernatur, vel quod aperiam, quisquam nobis vero sit reprehenderit cupiditate numquam eum eos et consectetur inventore nam ipsa. Possimus, vitae, quas sit eius odio tenetur ipsa voluptatibus?</p>
<p>Recusandae odio ad, odit numquam eaque molestias ullam ipsa ab nulla esse minima alias ex adipisci omnis quo quas quos rerum velit nemo eveniet natus, facilis sint. Sit, molestias, nesciunt.</p>
<hr>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 70em)" srcset="images/web-design-lg.jpg">
<source media="(min-width: 50em)" srcset="images/web-design-md.jpg">
<source media="(min-width: 40em)" srcset="images/web-design-sm.jpg">
<source media="(min-width: 30em)" srcset="images/web-design-tiny.jpg">
<!--[if IE 9]></video><![endif]-->
<img src="images/web-design-tiny.jpg" alt="Web Design">
</picture>
<div class="main-left">
<h3>This is content on the left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, ipsum accusamus accusantium. Aliquam odio velit corporis natus ut aliquid. Provident deserunt atque itaque, est placeat, non nihil voluptas nisi vitae?</p>
<p>Eveniet quibusdam laboriosam magnam obcaecati illum commodi a sapiente provident accusantium suscipit praesentium consequuntur tenetur totam fuga quasi culpa soluta, itaque eum consectetur ratione accusamus ipsum facilis vitae. Consectetur, tenetur?</p>
<p>Rerum architecto fugiat eveniet necessitatibus, quidem reprehenderit ullam deleniti est numquam dolores fuga, vel assumenda quaerat quam qui a alias iure cupiditate quae quasi odit? Dignissimos eaque cumque harum, tenetur!</p>
</div>
<div class="main-right">
<h3>This is content on the right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, ipsum accusamus accusantium. Aliquam odio velit corporis natus ut aliquid. Provident deserunt atque itaque, est placeat, non nihil voluptas nisi vitae?</p>
<p>Eveniet quibusdam laboriosam magnam obcaecati illum commodi a sapiente provident accusantium suscipit praesentium consequuntur tenetur totam fuga quasi culpa soluta, itaque eum consectetur ratione accusamus ipsum facilis vitae. Consectetur, tenetur?</p>
<p>Rerum architecto fugiat eveniet necessitatibus, quidem reprehenderit ullam deleniti est numquam dolores fuga, vel assumenda quaerat quam qui a alias iure cupiditate quae quasi odit? Dignissimos eaque cumque harum, tenetur!</p>
</div>
</section>
<aside class="sidebar">
<h3>Related Articles</h3>
<img src="images/smartphones.png" alt="Smartphones">
<h4>Smartphones</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam minus numquam voluptatum nisi consequuntur fugiat placeat, sit! Dolor, repellendus, consequuntur. Veniam fugiat necessitatibus ea exercitationem hic repellendus, maxime suscipit quis!</p>
<hr>
<img src="images/breakpoints.jpg" alt="Breakpoints">
<h4>Finding the right breakpoint</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, tempora, aspernatur. Quae perferendis ut dolor, quam labore molestiae iure sunt eaque dicta dolores nam molestias, laudantium odio accusantium maiores quasi.</p>
</aside>
</div>
<!-- end of .content -->
<!-- mobile navigation -->
<nav id="mobile-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Us</a></li>
<li><a href="index.html">Portfolio</a></li>
<li><a href="news.html">News</a></li>
<li><a href="index.html">Contact Us</a></li>
</ul>
</nav>
<!-- end of mobile navigation -->
<footer class="footer">
<p>© 2015 - All Rights Reserved</p>
</footer>
</div>
<!-- end of .container -->
</body>
</html>