jQuery-Review-Project/index.html at master · jesseH123/jQuery-Review-Project · 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
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>
    <head>
        <title> Marc's Github </title>


        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="style.css" type="text/css">

    </head>
    <body>
        <h1 id="site-title">....'s scriptEd Summary Project for 2016! </h1>

        <button class="btn btn-primary" id="goals-button">PROJECT GOALS</button>
        <button class="btn btn-info" id="info-button">ABOUT ME</button>
        <button class="btn btn-success">MY PAST PROJECTS</button>
        <button class="btn btn-warning">DARK THEME</button>
        <button class="btn btn-danger">DO NOT PRESS</button>
        <button class="btn btn-info">TAKEOVER MY SITE</button>

        <div class="all-content" id="goals-content">
            <h2>Main Goals</h2>
            <ol>
                <li>In the section that appears when you press "ABOUT ME", write your name and include:<br />
                    - a list of your top 3 favorite foods in order from 1 to 3<br />
                    - a list of some of your favorite musicians, in no particular order<br />
                    - a picture of your favorite food <br />
                    - a picture of one of your favorite musicians
                </li>
                <li>Use one or more <a href="https://fonts.google.com/">custom google fonts on your site.</a></li>
                <li>Fix your site so that as soon as it loads, the PROJECT GOALS section is displayed
                (without needing to click on it first!).</a></li>
                <li>Creation a section for MY PAST PROJECTS that displays a list of
                links to some of the past projects you've worked on in class, including your
                <strong>Simpsons project</strong> and your <strong>Halloween Project</strong></li>
                <li>When you click on the DARK THEME button, change the background color of your site and the text color so it has a dark background and the font is still readable.</li>
                <li>When you click on the DO NOT PRESS button, show a pop-up over your site that says "You shouldn't have pressed that!"</li>
                <li>When you click on the TAKEOVER MY SITE button, show a form input and a prompt that asks for your name. When you enter your name, change the title of the site to "This site now belongs to: [name that was inputted]"</li>
            </ol>

            <h2>Bonus Goals</h2>
            <ol>
                <li>
                    Add a new button to the top of the site called TAKE ACTION that displays a section with a link to the <a href="https://rawgit.com/vacxozzy/-TakeAction/master/home.html#carousel-example-generic" target="_new">TAKE ACTION</a> site that was made by your classmates!
                </li>
                <li>
                    Place 5 of the icons available in Twitter Bootstrop <a href="http://getbootstrap.com/components/" target="_new">here</a> on this site.
                </li>
                <li>
                    Learn more about CSS by playing the <a href="http://flexboxfroggy.com/" target="_new">Flexbox Froggy game</a></h3>
                </li>
            </ol>


            <h2>If you need help</h2>
            <ul>
                <li>Use your reference guide!</li>
                <li> Look through <a href="https://docs.google.com/document/d/1eJf_bUNNAG28JrDiouNr9j5yCHk0j_wAUeRXAumAToU/edit#heading=h.c02740878p57">slides from previous classes</a> for hints.
               </li>Raise your hand for help!</li>
            </ul>

            <h2>WHEN YOU'RE DONE</h2>
            When you're done, make sure you save to git using the git commands we learned and the terminal at the bottom of cloud9:
            <ul>
                <li>git add .</li>
                <li>git status</li>
                <li>git commit -m 'enter a message here'</li>
                <li>git push</li>
            </ul>


        </div>

        <div class="all-content" id="info-content">
            <h1>ABOUT ME</h1>
            <p>My name is ....</p>
        </div>

        <div class="all-content" id="takeover-content">
            <h1>TAKEOVER</h1>
            What is your name? <input type="text" id="takeover-input"> <button id="takeover-form-button">Take over</button>
        </div>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="javascript.js"></script>

    </body>
</html>