codeup-web-exercises/adding_removing_elements.html at main · stephaniezvill/codeup-web-exercises · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Adding and Removing Elements</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="css/adding_removing_elements.css">
</head>
<body>
<div id="all-content">
    <header>
        <h1>Adding and Removing Elements</h1>
        <button>Add Card</button>
    </header>
    <div id="addCardFormWrapper" class="hideForm">
        <form>
            <fieldset>
                <legend>Add a Card:</legend>
                <label for="title">Title:</label>
                <input type="text" name="title" id="title">
                <label for="image">Image Link:</label>
                <input type="text" name="image" id="image">
                <label for="description">Description:</label>
                <textarea name="description" id="description"></textarea>
                <button>Add Card</button>
            </fieldset>
        </form>
    </div>
    <div id="gizmos">
        <div class="gizmo">
            <h2>Lightsaber</h2>
            <img src="img/luke-with-lighbsaber.png" alt="Luke Skywalker tries the light saber in Obi Wan Kenobi's house on Tatooine">
            <p>A lightsaber is a plasma blade emitted from a hilt through a kyber crystal, which can be shut off at will. It can cut through almost anything, including blast doors, but takes specialized training to use well.</p>
            <button class="edit">Edit</button>
            <button class="remove">Remove</button>
        </div>
        <div class="gizmo">
            <h2>Hoverboard</h2>
            <img src="img/hoverboard.png" alt="Marty McFly on the hoverboard in Back to the Future II">
            <p>A hoverboard is a skateboard that hovers above the ground and moves forward under its own power.</p>
            <button class="edit">Edit</button>
            <button class="remove">Remove</button>
        </div>
        <div class="gizmo">
            <h2>Replicator</h2>
            <img src="img/replicator.png" alt="In a futuristic setting, a cup of coffee materializes out of a hazy fog">
            <p>A replicator is a device that transforms any matter, including waste or trash, into any other object or material. It can break anything down into its component atoms and rearrange those atoms into any shape.</p>
            <button class="edit">Edit</button>
            <button class="remove">Remove</button>
        </div>
    </div>
</div>
<script src="js/adding_removing_elements.js"></script>
</body>
</html>