finalProjectCS4300/billy.html at main · rhettmarcelo/finalProjectCS4300 · 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
175
176
177
<!DOCTYPE html>

<!-- Fig. 2.1: main.html -->
<!-- First HTML5 example. -->
<html>
   <head>
      <meta charset = "utf-8">
      <title>All about me</title>
   </head>

   <body>
	<h1>Introduction about me! </h1>
	<p style = "font-size: 20pt; color: deepskyblue;">
         <em>Hello my name is Billy Martinez! A little of bit about myself is that I love tech related stuff! I like to
	   build custom computers such as gaming ones. <br>My whole world has been tech related so when I started college, I knew from the beginning I wanted to do something in the IT field. <br>Something about technology is so fascinating that it just makes me happy to talk about and be a part of.
	   This is also my last semester here at UHD! <br>I hope to have a job that makes me feel excited to go to work instead of being bored at work. I believe if you find something that you truly love doing, <br>you will never work a day in your life because you are doing something that you love.<em> </p>

	<p style = "font-size: 20pt; color: deepskyblue;">
	 I hope in this semester I get to learn more about web programming! So far it is fun and I am excited to learn
	    new skills in this class!
	 I am also excited to <br>see what I can make at the end of the semester as well after all the content that will be taught in this class! This first assignment makes me feel excited for the future in this class! :)<p>

         <img src = "img/unnamed.jpg" width = "1000" height = "720"
            alt = "Billy">
      <p style = "font-size: 30pt; color: deepskyblue;">
	 Check out my Linkedin page! <p>
	<p style = "font-size: 30pt; color: deepskyblue;"><a href = "https://www.linkedin.com/in/billy-m-8941aa123/">Linkedin</a></p>
   </body>
</html>

	<body>
		<p style = "font-size: 30pt; color: deepskyblue;"> Lists below here! <p>


<ul>
         <!-- the list contains four list items -->
         <li><a href = "http://www.youtube.com">YouTube</a></li>
         <li><a href = "http://www.wikipedia.org">Wikipedia</a></li>
         <li><a href = "http://www.amazon.com">Amazon</a></li>
         <li><a href = "http://www.linkedin.com">LinkedIn</a></li>
       </ul>

	<!-- the <table> tag opens a table -->
      <table border = "1">


         <!-- the <thead> section appears first in the table -->
         <!-- it formats the table header area -->
         <thead>
            <tr> <!-- <tr> inserts a table row -->
		   <table bgcolor="white"
               <th>Class Homework</th> <!-- insert a heading cell -->
               <th>Check Y or N</th>
            </tr>
         </thead>

         <!-- the <tfoot> section appears last in the table -->
         <!-- it formats the table footer -->
         <tfoot>
            <tr>
               <th>Total Progression</th>
               <th>80%</th>
            </tr>
         </tfoot>

         <!-- all table content is enclosed -->
         <!-- within the <tbody> -->
         <tbody>
            <tr>
               <td>BIOL 1301</td> <!-- insert a data cell -->
               <td>Y</td>
            </tr>
            <tr>
               <td>BIOL 1101</td>
               <td>Y</td>
            </tr>
            <tr>
               <td>CS 3300</td>
               <td>Y</td>
            </tr>
            <tr>
               <td>CS 4300</td>
               <td>N</td>
            </tr>
         </tbody>
      </table>

   </body>
</html>


<html>
   <head>
      <meta charset = "utf-8">
      <title>Background Images</title>
      <style type = "text/css">
         body  { background-image: url(grey.jpg);
                 background-size: cover;
                 background-repeat: no-repeat;
                 background-attachment: fixed;
                 background-color: LightGrey }
         p     { font-size: 18pt;
                 color: Black;
                 text-indent: 1em;
                 font-family: arial, sans-serif; }
         .dark { font-weight: bold; }

<!DOCTYPE html>

<!-- Fig. 4.12: width.html -->
<!-- Element dimensions and text alignment. -->
<html>
   <head>
      <meta charset = "utf-8">
      <title>Box Dimensions</title>
      <style type = "text/css">
         p { background-color: Blue;
               margin-bottom: .5em;
               font-family: arial, helvetica, sans-serif; }
      </style>
   </head>
   <body>
      <p style = "width: 20%; height: 150px; overflow: scroll;">
         This here is my box model!
	I am able to type whatever I want here! Here is some text art!
	░░░░░░░░░▄░░░░░░░░░░░░░░▄░░░░
░░░░░░░░▌▒█░░░░░░░░░░░▄▀▒▌░░░
░░░░░░░░▌▒▒█░░░░░░░░▄▀▒▒▒▐░░░
░░░░░░░▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐░░░
░░░░░▄▄▀▒░▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐░░░
░░░▄▀▒▒▒░░░▒▒▒░░░▒▒▒▀██▀▒▌░░░
░░▐▒▒▒▄▄▒▒▒▒░░░▒▒▒▒▒▒▒▀▄▒▒▌░░
░░▌░░▌█▀▒▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐░░
░▐░░░▒▒▒▒▒▒▒▒▌██▀▒▒░░░▒▒▒▀▄▌░
░▌░▒▄██▄▒▒▒▒▒▒▒▒▒░░░░░░▒▒▒▒▌░
▀▒▀▐▄█▄█▌▄░▀▒▒░░░░░░░░░░▒▒▒▐░
▐▒▒▐▀▐▀▒░▄▄▒▄▒▒▒▒▒▒░▒░▒░▒▒▒▒▌
▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒▒▒░▒░▒░▒▒▐░
░▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒░▒░▒░▒░▒▒▒▌░
░▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▒▄▒▒▐░░
░░▀▄▒▒▒▒▒▒▒▒▒▒▒░▒░▒░▒▄▒▒▒▒▌░░
░░░░▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀░░░
░░░░░░▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀░░░░░
░░░░░░░░░▒▒▒▒▒▒▒▒▒▒▀▀░░░░░░░░</p>
   </body>
</html>


<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> This is an animation of a square that changes color!</p>

</body>
</html>