-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (119 loc) · 4.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<link rel="icon" type="image/png" href="img/favicon.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style-media.css" />
</head>
<body id="bg">
<!--Dark Mode Swich -->
<div class="theme-switch-wrapper">
<span id="toggle-icon">
<span class="toggle-text">Light Mode</span>
<i class="fas fa-sun"></i>
</span>
<label class="theme-switch">
<input type="checkbox" />
<div class="slider round"></div>
</label>
</div>
<!-- Navigation -->
<nav id="nav">
<img class="logo" src="dog/logo-light.png" alt="dog" />
<a href="#home">HOME</a>
<a href="#about">ABOUT</a>
<a href="#why">WHY</a>
<a href="#contact">CONTACT</a>
<span class="span">Choose your dog Today</span>
</nav>
<!-- Home section -->
<section id="home">
<div class="title-group-bg">
<img class="pupyImg" src="dog/puppies-light.png" alt="" />
</div>
<div class="title-group">
<h1 id="dogType">German Shepherd</h1>
<h2 id="dogText">
The protective but loving German Shepherd is a great choice for families with children
</h2>
</div>
</section>
<!-- About section -->
<section id="about">
<h1 class="aboutDog">Dogs are a human’s best friend, they love you unconditionally</h1>
<div class="about-container">
<div class="image-container">
<h2 class="svg-text">Best Friends</h2>
<img src="img/undraw_good_doggy_light.svg" alt="Pround Coder" id="image1" />
</div>
<div class="image-container">
<h2 class="svg-text">Improves your physical wellbeing</h2>
<img src="img/undraw_nature_fun_light.svg" alt="Pround" id="image2" />
</div>
<div class="image-container">
<h2 class="svg-text">They’re always happy when you get home</h2>
<img src="img/undraw_team_spirit_light.svg" alt="Idea" id="image3" />
</div>
</div>
</section>
<!-- Why Section -->
<section id="why">
<div class="why-content">
<div class="text-box">
<img id="dogImg_1" class="dogImg" src="dog/1-light.png" alt="" />
<p id="dogText_1">
They really are smart. The German Shepherd Dog is one of America’s most popular dog
breeds — for good reasons. They’re intelligent and capable working dogs. Their devotion
and courage are unmatched. And they’re amazingly versatile.
</p>
</div>
<div class="text-box">
<img id="dogImg_2" class="dogImg" src="dog/2-light.png" alt="" />
<p id="dogText_2">
The German shepherd dog is a herding breed known for its courage, loyalty and guarding
instincts. This breed makes an excellent guard dog, police dog, military dog, guide dog
for the blind and search and rescue dog. For many families, the German shepherd is also
a treasured family pet.
</p>
</div>
<div class="text-box">
<img id="dogImg_3" class="dogImg" src="dog/3-light.png" alt="" />
<p id="dogText_3">
German Shepherd Dogs are among the most popular breeds in the world. During the war,
Germans used the dogs for a number of purposes.The United States was captivated with the
breed’s appearance, and they soon became wildly popular.
</p>
</div>
<div class="text-box">
<img id="dogImg_4" class="dogImg" src="dog/4-light.png" alt="" />
<p id="dogText_4">
German Shepherds are known for their intelligence, and with good reason: They’re
considered the third smartest breed of dog. To be placed in the top tier of
intelligence, breeds must understand a new command after only five repetitions and
follow the first command given to them 95 percent of the time.
</p>
</div>
</div>
</section>
<!-- Contact section -->
<section id="contact">
<div class="footerText">
Whichever you choose, any type of dog is able to give an honest friendship
</div>
<footer>
<div class="social-icons">
<span>Made with ❤️ by RedSquirrrel </span>
<a href="https://github.com/RedSquirrrel"> <i class="fab fa-github"></i></a>
</div>
</footer>
</section>
<script src="script.js"></script>
</body>
</html>