-
Notifications
You must be signed in to change notification settings - Fork 123
/
index.html
130 lines (107 loc) · 3.83 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Awesome Websites</title>
<!-- attach our stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- the header -->
<header>
<!-- our main logo -->
<a id="logo" href="index.html">
<img src="img/avatar.jpeg" alt="Logo">
<span>My Website</span>
</a>
<!-- main navigation links -->
<nav>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</nav>
</header>
<!-- the content -->
<main>
<!-- hero content -->
<div class="hero">
<!-- content for the hero -->
<div class="hero-content">
<h1 class="hero-title">Here is Title</h1>
<p>The best and most comprehensive website ever.</p>
<a href="#">Learn More</a>
<a href="#">Sign Up</a>
</div>
</div>
<!-- features section -->
<div class="site-section">
<div class="site-section-inside">
<div class="section-header">
<h2>Key Features</h2>
</div>
<div class="feature-box">
<img src="img/like.png" alt="Easy to Use">
<h5>Easy to Use</h5>
<p>Just think of how easy this is to use. Toddlers can do it. So can you!</p>
</div>
<div class="feature-box">
<img src="img/faces.png" alt="Fun to Use">
<h5>Fun to Use</h5>
<p>Just think of how easy this is to use. Toddlers can do it. So can you!</p>
</div>
<div class="feature-box">
<img src="img/heart.png" alt="Fun to Use">
<h5>You'll Love It</h5>
<p>Just think of how easy this is to use. Toddlers can do it. So can you!</p>
</div>
</div>
</div>
<!-- testimonials section -->
<div class="site-section site-section-secondary">
<div class="site-section-inside">
<div class="section-header">
<h2>What the people say</h2>
</div>
<div class="testimonial-box">
<div class="testimonial-content">
Their service is by far the most influential I've ever seen.
</div>
<div class="testimonial-author">
<img src="img/david.jpg" alt="David East">
<h5>David East</h5>
<span>King of Firebase</span>
</div>
</div>
<div class="testimonial-box">
<div class="testimonial-content">
Their service is by far the most influential I've ever seen.
</div>
<div class="testimonial-author">
<img src="img/holly.jpg" alt="Holly Lloyd">
<h5>Holly Lloyd</h5>
<span>Queen of Scotch</span>
</div>
</div>
<div class="testimonial-box">
<div class="testimonial-content">
Their service is by far the most influential I've ever seen.
</div>
<div class="testimonial-author">
<img src="img/brad.jpg" alt="Brad Green">
<h5>Brad Green</h5>
<span>King of Angular</span>
</div>
</div>
</div>
</div>
</main>
<!-- the footer -->
<footer>
<img src="img/avatar.jpeg" alt="Footer Logo">
<span>My Website<br>Copyright © 2016-3010 </span>
</footer>
</body>
</html>