forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdonut.html
More file actions
89 lines (71 loc) · 3.22 KB
/
donut.html
File metadata and controls
89 lines (71 loc) · 3.22 KB
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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - CYF Landing Page</title>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/bd58734f6d.js" crossorigin="anonymous"></script>
</head><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<header id="header">
<div class="h1-and-navbar">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#doughnuts">The Big 3</a></li>
<li><a class="nav-link" href="#video">Doughnut Display</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
<h1>Doughnut Dream</h1>
</div>
<div class="header-img">
<img id="header-img" src="https://source.unsplash.com/Fq54FqucgCE/100x100" alt="logo">
</div>
</header>
<div class="doughnuts-container">
<h2 class="description">'Dough'nut feel blue, let us help make your doughnut dreams come true; we've jam, chocolate and sprinkles just for you! </h2>
<h2 class="intro"> Indulge and enjoy! Choose from our amazing selection! </h2>
<div class="offer"><strong><em>STOP PRESS</em><br> Discount Days: Mondays and Wednesdays....<br> ..buy 12 and get 6 free! </strong></div>
<p id="doughnuts">The Big Three</p>
<div class="choice">
<div class="jam">Jam<br>
<img class="jampic" src="https://source.unsplash.com/r22iesHiNC4/400x200" alt="jam donut">
</div>
<div class="choc">Chocolate<br>
<img class="chocpic" src="https://source.unsplash.com/HRoXagGs_oU/400x200" alt="chocolate donut">
</div>
<div class="sprinkles">Sprinkles<br>
<img class="sprinklepic" src="https://source.unsplash.com/_qS0EQGn6qg/400x200" alt="donuts with sprinkles">
</div>
</div>
</div>
<h2>Party Time</h2>
<div class="box">
<div class="buy">Buy<br><img class="boxpic" src="
https://source.unsplash.com/GBfNe3ZZjhI/400x200" alt="selection of donuts">
</div>
<div class="arrow"> This way to make your own doughnut display<br>
<img class="arrowpic" src="https://source.unsplash.com/zF_pTLx_Dkg/400x200" alt="white arrow on blue background">
</div>
<div class="video">
<iframe width="400" height="200" id="video" src="https://www.youtube.com/embed/RtzxeG5x3fs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<p id="text-link">
<a id="recipe-link" href="https://www.theguardian.com/lifeandstyle/wordofmouth/2012/aug/16/how-cook-perfect-jam-doughnuts" target="_blank"> Click <strong>here</strong> to learn how to make your own doughnuts. </a>
</p>
<h2 id="contact">Sign up for our newsletter</h2>
<form id="form" action=" https://www.freecodecamp.com/email-submit">
<label for="email">Enter your email:</label>
<input type="email" name="email" id="email" placeholder="Email">
<input type="submit" name="submit" id="submit">
</form>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>