finalProjectCS4300/Ashley.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
<!DOCTYPE html>

<html>
   <head>
      <meta charset = "utf-8">
      <title>CS 4300</title>
   </head>
   <style type = "text/css">
      body  { background-image: url(back1.jpg);
              background-position: bottom right;
              background-repeat: repeat;
              background-attachment: fixed;
              font-family: georgia, times, serif;
              font-weight: bold;}
        em     { font-weight: bold;
                color: black; }
      h1, em   { text-decoration: underline; }
          p {font-size: 12pt;
              color: Black;
              text-indent: 0em;}
            p
              { margin: 0.9em 0em; }
              /* styles for smartphones with screen widths 480px or smaller */
              @media handheld and (max-width: 480px),
                 screen and (max-device-width: 480px),
                 screen and (max-width: 480px)
              {
                 div {
                    -webkit-column-count: 2;
                    column-count: 2; }
              }
              /* styles for devices with screen widths of 481px to 1024px */
              @media only screen and (min-width: 481px) and
                 (max-width: 1024px)
              {
                 div {
                    -webkit-column-count: 2;
                    column-count: 2;
                    -webkit-column-gap: 30px;
                    column-gap: 30px;
                    -webkit-column-rule: 1px outset black;
                    column-rule: 1px outset black; }
              }
              /* styles for devices with screen widths of 1025px or greater */
              @media only screen and (min-width: 1025px)
              {
                 div {
                    -webkit-c4olumn-count: 3;
                    column-count: 3;
                    -webkit-column-gap: 30px;
                    column-gap: 30px;
                    -webkit-column-rule: 1px outset black;
                    column-rule: 1px outset black; }
              }
              div {
                    width: 50px;
                    height: 50px;
                    background-color: red;
                    position: relative;
                    animation-name: example;
                    animation-duration: 4s;
                    animation-iteration-count: infinite;
                  }

                  @keyframes example {
                    0%   {background-color:red; left:800px; top:-250px;}
                    25%  {background-color:yellow; left:1000px; top:-250px;}
                    50%  {background-color:blue; left:1000px; top:150px;}
                    75%  {background-color:green; left:800px; top:150px;}
                    100% {background-color:red; left:800px; top:-250px;}
                  }
                     </style>
   <body>


     <h1>Ashley Monterroso's Website</h1>

       <p>Hello world, my name is Ashley Monterroso and this is my first Website. I am a College Student majoring in Computer Science at <a href = "http://www.uhd.edu">University of Houston-Downtown</a>.</p>
       <p> I am a first generation college student.I was always interested in technology since I was little. I enjoyed learning how to build computers, paly video games with my dad, and I enjoy seeing what technology can do.</p>
       <p>This experience is my major motivation to follow programming and software engineering careers. I want to help others using technology. Being a Computer Science student, it has improved my understanding of the dedication programmers have and how complex and fascinating their career is. </p>

       <li>I'm really excited to learn:
          <ul><li>HTML</li>
             <li>PHP </li>
             <li>Javascript</li>
             <li>CSS</li>
             <li>Apache</li>
           </ul>

           <table border = "2">

              <!-- the <caption> tag summarizes the table's -->
              <!-- contents (this helps visually impaired people) -->
              <caption><strong>Programming Languages That I know </strong></caption>

              <!-- the <thead> section appears first in the table -->
              <!-- it formats the table header area -->
              <thead>
                 <tr> <!-- <tr> inserts a table row -->
                    <th>Programming Language</th> <!-- insert a heading cell -->
                    <th>Year Created</th>
                 </tr>
              </thead>

              <!-- all table content is enclosed -->
              <!-- within the <tbody> -->
              <tbody>
                 <tr>
                    <td>C++</td>
                    <td>1983</td>
                 </tr>
                 <tr>
                    <td>Python</td>
                    <td>1991</td>
                 </tr>
                 <tr>
                    <td>Java</td>
                    <td>1995</td>
                 </tr>
              </tbody>
           </table>
           <p><a href = "http://www.google.com">Google</a> is a great company with inovating tools that help people from all around the world.</p>
             <div> </div>
        <img src = "/img/tennis-snoopy.gif" width "300" height = "200" style= "position:relative; left:1200px; top:-300px;">
   </body>
</html>