-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (129 loc) · 6.15 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
<!DOCTYPE html>
<html>
<head>
<title>iFit Test Landing</title>
<!-- Social Media SEO -->
<meta name="description" content="Welcome to the center of it all. The Fitness Shop presents you with hundreds of workout programs designed to guide your weight loss journey." />
<meta property="og:title" content="iFit Test Landing" />
<meta property="og:description" content="Welcome to the center of it all. The Fitness Shop presents you with hundreds of workout programs designed to guide your weight loss journey." />
<meta property="og:image" content="./images/ifit-fb-meta.jpg" /> <!-- Compressed using TinyPNG.com -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,700" />
<link rel="stylesheet" href="./css/landing.css" />
</head>
<body>
<div id="hero-area">
<!--
The design shows the header & nav are placed over the hero image, but the
instructions does not say they are fixed. So we will make them absolute,
relative to a parent
-->
<header class="split-nav">
<div class="nav-left">
<a href="/"><img alt="iFit" src="./images/ifit-logo.png" /></a>
</div>
<div class="nav-right">
<a href="#">Login</a>
<a href="#">Sign Up</a>
<a href="#">Menu <img alt="" src="./images/icons/menu.png" /></a>
</div>
</header>
<nav class="split-nav">
<div class="nav-left">
<div id="nav-title">Weight Loss</div>
</div>
<div class="nav-right">
<a href="#">Overview</a>
<a href="#">Features</a>
<a href="#">Programs</a>
<a href="#">Training</a>
<button class="search-button">
<img alt="Search" src="./images/icons/magnifying-glass.png" />
</button>
<input type="text" name="search" placeholder="Enter text here" />
</div>
</nav>
<div id="hero-text">
<h1 id="hero-title">Working Out<br />Has Never Been So Fun</h1>
<p id="hero-description">
Welcome to the center of it all. The Fitness Shop presents<br /> you
with hundreds of workout programs designed to guide<br /> your weight loss journey.
</p>
</div>
</div>
<div id="programs-section">
<h2>Weight Loss</h2>
<p class="section-subtitle">
Welcome to the center of it all. The Fitness Shop presents you with hundreds
of workout programs designed to guide your weight loss journey.
</p>
<div id="programs-grid"></div>
<div class="action-button-container">
<button>View More</button>
</div>
</div>
<div id="testimonial-section">
<!-- Hard-coded with one slide - NOT functional -->
<div id="slider">
<div class="slide">
<div class="quote-block">
<img alt="" src="./images/icons/quotes.png"/>
<p class="quote">
To date I have lost 14 Kilos (30 pounds) and my fitnes level is at least the same as when
I was actively engaged in sport (if not better), thanks to iFit and the range and variation
of fitness programs available.
</p>
</div>
<p class="author">—Graham Lambourne</p>
</div>
</div>
<div class="slider-page-marks">
<div class="slide-dot active"></div>
<div class="slide-dot"></div>
<div class="slide-dot"></div>
</div>
</div>
<div id="last-call">
<h2>Get started on your weight loss journey.</h2>
<div class="action-button-container">
<button>Join iFit Today</button>
</div>
</div>
<footer class="split-nav">
<div class="nav-left">
<div class="page-links">
<a href="#">Blog+Videos</a>
<a href="#">Shop</a>
<a href="#">Company</a>
<a href="#">Press</a>
<a href="#">Jobs</a>
<a href="#">Support</a>
<a href="#">Legal</a>
<a href="#">Contact</a>
</div>
<div class="social-links">
<a href="#"><img alt="facebook" src="./images/icons/social/facebook.png" /></a>
<a href="#"><img alt="twitter" src="./images/icons/social/twitter.png" /></a>
<a href="#"><img alt="google+" src="./images/icons/social/google.png" /></a>
<a href="#"><img alt="pinterest" src="./images/icons/social/pinterest.png" /></a>
<a href="#"><img alt="instagram" src="./images/icons/social/instagram.png" /></a>
<a href="#"><img alt="youtube" src="./images/icons/social/youtube.png" /></a>
</div>
</div>
<div class="nav-right">
<div class="copyright">Copyright © iFit.com, All rights reserved.</div>
<div class="language-dropdown">
Language:
<select>
<option>English</option>
<option>Español</option>
<option>Deutsch</option>
<option>Français</option>
</select>
</div>
</div>
</footer>
<!-- Load JS last to allow site to load faster -->
<script type="text/javascript" src="./js/landing.js"></script>
</body>
</html>