-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathindex.html
103 lines (95 loc) · 4.16 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golden Retrievers Are Adorable </title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<h1><a href="index.html">Golden Retrievers <i class="fa fa-heart" aria-hidden="true"></i>
</a></h1>
</div>
<div class="nav-toggle">
<i class="fa fa-bars"></i>
</div>
<nav class="nav-main">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</nav>
</div><!--.container-->
</header>
<div class="banner"></div>
<div class="feature">
<div class="container">
<h2>Fusce ultrices fringilla metus</h2>
<h3>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue</h3>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.</p>
<a href="#"><button>Etiam posuere</button></a>
</div><!--.container-->
</div>
<section class="content">
<div class="container">
<main>
<h3>Content Title</h3>
<p>Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</main>
<aside>
<img src="images/tower.jpg">
</aside>
</div><!--.container-->
</section>
<section class="services">
<div class="container">
<div class="box">
<h3>Magna Cras Bibendum Mattis</h3>
<p>Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie.</p>
<a href="#"><button>Read More</button></a>
</div>
<div class="box">
<h3>Magna Parturient Dapibus</h3>
<p>Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie.</p>
<a href="#"><button>Read More</button></a>
</div>
<div class="box">
<h3>Pharetra Aenean Ullamcorper Euismod</h3>
<p>Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie.</p>
<a href="#"><button>Read More</button></a>
</div>
</div><!--.container-->
</section>
<footer>
<div class="container">
<h2>Get in Touch</h2>
<h4>Phasellus nec erat sit amet nibh pellentesque congue</h4>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
<p class="copyright">Copyright info could appear here, if you really want it!</p>
</div><!--.container-->
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//add or remove nav-open class to body for off-canvas nav
$('.nav-toggle').click(function() {
$('body').toggleClass("nav-open");
});
</script>
</body>
</html>