-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (184 loc) · 11.5 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<title>Acme - Built to Last</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Acme Anvils Eliot Sanford Elliott Stanford Elliot Eliott Sandford freeCodeCamp Landing Page Fee Code Camp HTML CSS Responsive Javascript">
<meta name="description" content="A fictitious product landing page created by Eliot Sanford as one of five projects for the freeCodeCamp Responsive Web Design Certification using only pure HTML, CSS, and Vanilla JavaScript."/>
<meta property="og:image" content="./assets/acme-landing-page-view.png"/>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@devsouthus" />
<meta name="twitter:creator" content="@techieeliot" />
<meta property="og:url" content="https://acme-techieeliot.netlify.app/" />
<meta property="og:title" content="Pure HTML/CSS & Vanilla JavaScript Product Landing Page" />
<meta property="og:description" content="A fictitious product landing page created by Eliot Sanford as one of five projects for the freeCodeCamp Responsive Web Design Certification using only pure HTML, CSS, and Vanilla JavaScript." />
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
<script defer src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</head>
<body class="container">
<header id="header" class="acme-hdr sticky">
<nav id="nav-bar" class="acme-nav-bar">
<ul>
<li class="nav-bullets">
<a href="#main" class="nav-link"><img src="./assets/anvil_white.png" alt="Acme logo black anvil on white background" id="header-img" class="logo"></a>
</li>
<li class="nav-bullets flex-center mobile-toggle">
<a href="#our-guarantee" class="nav-link">Our Guarantee</a>
</li>
<li class="nav-bullets flex-center mobile-toggle">
<a href="#testimonials" class="nav-link">Testimonials</a>
</li>
<li class="nav-bullets flex-center mobile-toggle">
<a href="#news" class="nav-link">News</a>
</li>
<li class="nav-bullets flex-center mobile-toggle">
<a href="#newsletter" class="nav-link">Work Here</a>
</li>
<li class="nav-bullets flex-center mobile-toggle">
<a href="#footer" class="nav-link">About Us</a>
</li>
<li class="nav-bullets flex-center mobile-toggle">
<a href="#hero" class="nav-links"><button class="btn primary-btn">Buy Anvils</button></a>
</li>
<li class="nav-bullets flex-center desktop-toggle">
<div class="btn primary-btn dropdown pointerCursor" id="hamburger-menu">
<div class="title">Menu</div>
<img src="./assets/menu.svg" alt="three horizontal lines" id="menu-svg">
<img src="./assets/close.svg" alt="three horizontal lines" id="close-svg">
<div class="dropdown-content">
<ul class="menu-dropdown hide">
<li class="dropdown-bullets flex-center" id="dropdown1">
<a href="#our-guarantee" class="dropdown-link">Our Guarantee</a>
</li>
<li class="dropdown-bullets flex-center" id="dropdown2">
<a href="#testimonials" class="dropdown-link">Testimonials</a>
</li>
<li class="dropdown-bullets flex-center" id="dropdown3">
<a href="#news" class="dropdown-link">News</a>
</li>
<li class="dropdown-bullets flex-center" id="dropdown4">
<a href="#newsletter" class="dropdown-link">Work Here</a>
</li>
<li class="dropdown-bullets flex-center" id="dropdown5">
<a href="#footer" class="dropdown-link">About Us</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</header>
<main id="main">
<section class="acme-one hero-image" id="hero">
<article class="bottom-left">
<h1>Built to Last</h1>
<p>Our anvils come with a lifetime warranty.</p>
</article>
</section>
<section class="acme-two">
<article class="card-1 cards" id="our-guarantee">
<div class="card-image-1 card-images">
<h2>Our Guarantee</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<button class="btn primary-btn">Learn More</button>
</article>
<article class="card-2 cards mobile-toggle">
<div class="card-image-2 card-images">
<h2>Our Promise</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<button class="btn primary-btn">Learn More</button>
</article>
<article class="card-3 cards mobile-toggle">
<div class="card-image-3 card-images" onmouseenter='this.class="card-image-3-gif card-images"' onmouseout='this.class="card-image-3 card-images"'>
<h2>Our Assurance</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<button class="btn primary-btn">Learn More</button>
</article>
</section>
<section class="acme-video-wrapper">
<iframe id="video" width="720" height="405"
src="https://www.youtube.com/embed/sb-3JjVocRM?start=14&rel=0&modestbranding=1&autohide=1&showinfo=1&controls=0"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- <iframe id="video" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/sb-3JjVocRM"
frameborder="0" allowfullscreen></iframe> -->
</section>
<section class="acme-three">
<article id="testimonials">
<button class="no-show-btn carousel__button--next"><i class="arrows arrow-left"></i></button>
<div class="quote-card carousel-wrapper">
<div class="carousel">
<div class="carousel__item initial">
<p class="quote-card-quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p class="quote-card-name">Jenny Doe</p>
<p class="quote-card-title">Lead Hammerer</p>
</div>
<div class="carousel__item">
<p class="quote-card-quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p class="quote-card-name">Clyde Macgowan</p>
<p class="quote-card-title">Associate Horseshoer</p>
</div>
<div class="carousel__item">
<p class="quote-card-quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p class="quote-card-name">Rashard Williams</p>
<p class="quote-card-title">First Ironsmith</p>
</div>
</div>
<div class="dot-box">
<span class="dot active-dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<button class="no-show-btn carousel__button--prev"><i class="arrows arrow-right"></i></button>
</article>
</section>
</main>
<footer id="footer" class="acme-ftr">
<article class="ftr-1 mobile-toggle">
<ul class="ftr-nav">
<li><a href="#">Our Guarantee</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Works Here</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Buy Anvils</a></li>
</ul>
</article>
<article class="ftr-2 mobile-toggle" id="news">
<h3>Latest News</h3>
<div class="news-item item-1">
<img src="./assets/image8.png" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ipsa rerum temporibus.</p>
</div>
<div class="news-item item-2">
<img src="./assets/image9.png" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ipsa rerum temporibus.</p>
</div>
</article>
<article class="ftr-3 mobile-toggle" id="newsletter">
<h3>Our Newsletter</h3>
<form action="https://www.freecodecamp.com/email-submit" method="post" id="form">
<input type="text" name="name" id="name" placeholder="Your Name">
<input type="email" name="email" id="email" placeholder="Your Email">
<input type="submit" value="Submit" class="btn primary-btn" id="submit">
</form>
</article>
<article class="ftr-4" id="logo">
<img src="./assets/anvil_black.png" alt="acme logo white anvil on black background">
<address>
121 King St., Melbourne<br>
VIC 3000, Austrailia<br>
<a href="mailto:[email protected]">[email protected]</a><br>
<a href="tel:+8881234567">888-123-4567</a>
</address>
</article>
</footer>
</body>
</html>