-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
64 lines (52 loc) · 2.66 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
<!DOCTYPE html>
<html>
<!-- This is a comment! This does not show up in the code, it's just a way to document what's going on for other devs. -->
<head>
<meta charset="UTF-8">
<title>Tab Title</title>
<link rel="stylesheet" href="styles.css"> <!-- Imports the CSS file -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Imports the jQuery library.
Note that jQuery is being replaced by frameworks like Vue and React these days,
but it makes it easier to read what the code is doing to the HTML.-->
<script src="scripts.js"></script> <!-- Imports our own JavaScript file -->
</head>
<body>
<!-- The body is where all of the visual elements of your page will go. -->
<!-- A Header 1 element with default styles -->
<h1>Code Playground</h1>
<!-- A Header 2 element with a class -->
<h2 class="light-header">Custom H2 w/ .light-header class</h2>
<!-- A Header 2 element with an id-->
<h2 id="orangeHeader">Custom H2 w/ #orangeHeader id</h2>
<!-- A Header 2 element with an id and a class -->
<h2 id="redHeader" class="light-header">Custom H2 w/ #redHeader id and .light-header class</h2>
<p>
<a id="toggleLink" href="">Something to notice!</a>
</p>
<div id="hiddenCaptionContainer">
<p id="hiddenCaption" class="hidden caption">#redHeader being bold is considered to be more specific (and thus more important) than .light-header's normal
font weight.<br /> This message will self-destruct.</p>
</div>
<p>
<button id="toggleButton">Display Super Rare Secret NFT Collection</button>
</p>
<!-- div elements are often used to encase other elements. In this case, we hide everything inside this div by hiding the div itself.-->
<div id="nftCardContainer" class="hidden">
<div class="nft-card">
<!-- An image stored locally within this project folder -->
<img src="assets/ultra-rate-authentic-nft.png" class="centered-image">
<!-- A caption for the above image, styled with the reusable .caption class -->
<p class="caption">Ultra rare authentic NFT!<br />
No Right Clicking or Saving As!!!</p>
</div>
<div class="nft-card">
<!-- An image stored on the interwebs -->
<img src="https://lastslice.org/wp-content/uploads/2021/08/footer-avatar.png" class="centered-image" />
<!-- A caption for the above image, styled with the reusable .caption class -->
<p class="caption">Ultra rare authentic NFT Wearable! <br />
Right click and Save As to try it on!</p>
</div>
</div>
</body>
</html>