-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (124 loc) · 6.38 KB
/
index.html
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
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8">
<title>Title</title>
<!-- EMB GOOGLE FONT -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,700" rel="stylesheet">
<!-- STYLE SHEETS -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<!-- PAGE HEADER GOES HERE -->
<header>
<h1>Paul's Autos</h1>
<h2>Quality you can ride in</h2>
</header>
<!-- PAGE NAVIGATION GOES HERE -->
<nav class="clearfix">
<ul class="clearfix">
<li class="active">
<a href="index.html">New</a>
</li>
<li>
<a href="used.html">Used</a>
</li>
<li>
<a href="service.html">Service</a>
</li>
<li>
<a href="location.html">Location</a>
</li>
</ul>
</nav>
<!-- PAGE CONTENT GOES HERE -->
<main class="clearfix">
<figure class="banner">
<img src="images/banner01.jpg" alt="banner of a car" />
</figure>
<h1>New Cars</h1>
<hr class="fadeaway" />
<figure class="photo">
<img src="images/black.jpg" alt="black car">
<figcaption>SALE: $30,997</figcaption>
</figure>
<figure class="photo">
<img src="images/red.jpg" alt="red car">
<figcaption>SALE: $25,997</figcaption>
</figure>
<figure class="photo">
<img src="images/silver.jpg" alt="silver car">
<figcaption>SALE: $28,997</figcaption>
</figure>
<figure class="photo">
<img src="images/blue.jpg" alt="blue car">
<figcaption>SALE: $32,997</figcaption>
</figure>
<h2>Blog Topics</h2>
<div class="blog">
<article>
<h3>Topic 1</h3>
<p>Elementum, sagittis adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus
in ac egestas egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam
ultrices dis facilisis nascetur. Pellentesque cursusnon porta, nisi turpis. Ultricies integer sociis
etiam ultrices dis facilisis nascetur. Pellentesque cursus integer mauris augue enim. Add additional
words so that it is taller than the one to the right.</p>
</article>
<article>
<h3>Topic 2</h3>
<p>Elementum, sagittis adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus
in ac egestas egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam
ultrices dis facilisis nascetur. Pellentesque cursus integer mauris augue enim</p>
</article>
<article>
<h3>Topic 3</h3>
<p>Elementum, sagittis adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus
in ac egestas egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam
ultrices dis facilisis nascetur. Pellentesque cursus integer mauris augue enimElementum, sagittis
adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus in ac egestas
egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam ultrices dis facilisis
nascetur. Pellentesque cursus integer mauris augue enim</p>
</article>
<article>
<h3>Topic 4</h3>
<p>Elementum, sagittis adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus
in ac egestas egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam
ultrices dis facilisis nascetur. Pellentesque cursus integer mauris augue enim</p>
</article>
<article>
<h3>Topic 5</h3>
<p>Elementum, sagittis adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus
in ac egestas egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam
ultrices dis facilisis nascetur. Pellentesque cursus integer mauris augue enim</p>
</article>
<article>
<h3>Topic 6</h3>
<p>Elementum, sagittis adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus
in ac egestas egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam
ultrices dis facilisis nascetur. Pellentesque cursus integer mauris augue enim</p>
</article>
<article>
<h3>Topic 7</h3>
<p>Elementum, sagittis adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus
in ac egestas egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam
ultrices dis facilisis nascetur. Pellentesque cursus integer mauris augue enim</p>
</article>
<article>
<h3>Topic 8</h3>
<p>Elementum, sagittis adipiscing, nec et? Ridiculus, porta placerat ultrices odio diam in, urna phasellus
in ac egestas egestas nunc, pellentesque, non porta, nisi turpis. Ultricies integer sociis etiam
ultrices dis facilisis nascetur. Pellentesque cursus integer mauris augue enim</p>
</article>
</div>
</main>
<!-- PAGE FOOTER GOES HERE -->
<footer>
<p>©2017 Paul's Auto •
<a href="tel:9875551234">987-555-1234</a>
</p>
</footer>
</div>
</body>
</html>