Csci22/index.html at main · ramirezg-web/Csci22 · 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
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
<!DOCTYPE html>
<html>
 <head>
   <title> Welcome Everyone! </title>

   <link rel="icon" type="image/png" href="favicon-32x32.png">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="js/custom.js"></script>
   <link href="animate.min.css" rel="stylesheet">

   <link rel="stylesheet" href="css/portfolioStyles.css" type="text/css">
  <script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
  <script src="jquery.min.js"></script>

  <script>
    function load() {
             // Update the UI
             document.getElementById("display").innerText = "Enjoy the Tunes!";
             document.getElementById("loadBtn").disabled = "disabled";

             // Load the sound
      createjs.Sound.alternateExtensions = ["mp3"];
             createjs.Sound.addEventListener("fileload", handleFileLoad);
             createjs.Sound.registerSound({id:"mySound", src:"Hart.mp3"});
    }

         function handleFileLoad(event) {
             // Update the UI
             // document.getElementById("display").innerHTML = "Loaded: " + event.src
             //         + " using " + createjs.Sound.activePlugin.toString();
             document.getElementById("stopBtn").disabled = "";

             // Play the loaded sound
             createjs.Sound.play(event.src);
         }
  </script>
 </head>
 <body>
   <div class="animated slideInDown fast alert alert-danger" id="covid" role="alert" style="margin: 0; justify:center; background-color: #EBFFFF;">
     <input id="loadBtn" type="button" value="Begin Loading" onclick="load()"/>
     <input id="stopBtn" type="button" value="Stop Playing" onclick="createjs.Sound.stop();" disabled="disabled" />
     <label id="display" style="background-color:#EBFFFF;">Would you enjoy scrolling music? </label>   </div>
   <!-- <input id="loadBtn" type="button" value="Begin Loading" onclick="load()"/>
   <input id="stopBtn" type="button" value="Stop Playing" onclick="createjs.Sound.stop();" disabled="disabled" />
<label id="display">Would you enjoy scrolling music?</label> -->
<div class="container">
  <div class="row">
    <div class="col-md-12 banner">
<img src="banner.png" style="width: 100%; height:100%;"alt="">
    </div>
  </div>

 <div class="row">
   <div class="col-md-12 mainArea">
<div class="card">
  <div class="card-body" style="background-color: #EBFFFF;">
  <p>  Welcome! My name is Gentle, I am a junior at NYU, and here is a portfolio site! This site contains
    all completed assignments in the Introduction to Web Design and Computer Principles course
    offered at New York University during the Fall 2020 COVID-19 Semester. <p>
</div>
</div>
</div>
</div>
<div class="row">
  <div class="col-md-6 mainArea" style="background-color:(0,0,0);">
  <div class="card-body" style="width: 100%; height:100%; ">
     <p>The syllabus states: there are two primary aspects to this course.
<ul>The first is learning how to build websites and prepare the various elements
that comprise them.</ul> <ul> The second is understanding concepts behind computers in general
and the Web in particular.</ul> </p>
<p>Lecture Topics included:
<ul>  Unix command line</ul>
<ul>  HTML</ul>
<ul>  CSS</ul>
<ul>  Web graphics</ul>
<ul>  Design and accessibility</ul>
<ul>  Web page layout</ul>
<ul>  Responsive design</ul>
<ul>  Interactivity with JavaScript</ul>
<ul>  Web forms</ul>
<ul>  Web audio and video</ul>
<ul>  Web hosting and domain names</ul></p>
  </div>
</div>
<div class="col-md-6 mainArea">
  <div class="card-body" style="width: 100%; height:100%;">

  <!-- <div class="row">
    <div class="col-md-12 banner">  -->

      <div class="jumbotron">
       <p class="lead">HyperLinked Below are 5 websites with their respective web pages demonstrating
       my knowelge aquired in this course! Please enjoy!</p>
         <nav class="col-md-12 navigation">
           <ul class="nav justify-content-center">
             <li class="nav-item">
               <a class="nav-link btn btn-light" href="personal/index.html">Personal HTML/CSS</a>
             </li>
             <li class="nav-item">
               <a class="nav-link btn btn-info" href="interest3/index.html">Interest Site Responsive & Media Queries</a>
             </li>
             <li class="nav-item">
               <a class="nav-link btn btn-success" href="advertisement/index.html" >Photo Shop Assignment</a>
             </li>
             <li class="nav-item">
               <a class="nav-link btn btn-warning" href="gif/index.html" >Photo Shop Assignment Extra Credit Gif Site</a>
             </li>

             <li class="nav-item">
               <a class="nav-link btn btn-info" href="cause/index.html" >Black Lives Matter Boostrap Assignment</a>
             </li>

             <li class="nav-item">
               <a class="nav-link btn btn-light" href="index.html">Portfolio</a>
             </li>
           </ul>
         </nav>

       <!-- <a href="personal/index.html"> Go to Personal Site  </a>
     <br/>
     <a href="interest/index.html"> Go to Interest Site </a>
     <br/>
     <a href= "cause/index.html"> Go to Cause Site </a>
      <br/>
     <a href="advertisement/index.html"> Go to Advertisement Site </a>
     <br/>
     <a href="gif/index.html"> Go to Gif Site </a> -->

     </div>
   </div>
 </div>
</div>
<div class="row">
  <div class="col-md-12 joinMailingList">
    <h3> Direct all inquires below!</h3>
    <form>
      <div class="form-row">
        <div class="form-group col-md-6">
            <label for="name" style="font-weight:bold;" >First Name</label>
            <input type="name" class="form-control" id="inputEmail4">
          </div>
          <div class="form-group col-md-6">
            <label for="name" style="font-weight:bold;" >Last Name</label>
            <input type="name" class="form-control" id="inputEmail4">
          </div>
        </div>
      <div class="form-row">

        <div class="form-group col-md-12">
          <label for="inputEmail4" style="font-weight:bold;" >Email</label>
          <input type="email" class="form-control" id="inputEmail4">
        </div>
          </div>
          <div class="form-row">

        <div class="form-group col-md-12">
          <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" style="font-weight:bold;">Input Text </span>
      </div>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>
        </div>
      </div>
      <button type="submit" class="btn btn-secondary btn-lg btn-block">Submit</button>
    </form>
  </div>
</div>
 </div>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>