cs4241-22a · ananya112 · Aug 25, 2022 · Aug 27, 2022 · Aug 27, 2022 · Aug 29, 2022
diff --git a/README.md b/README.md
@@ -1,8 +1,13 @@
 Assignment 1 - Hello World: Basic Deployment w/ Git, GitHub, Glitch
 ===
 
+https://a1-ananya112.glitch.me
+
+
 *DUE: Monday, August 30th by 11:59 AM (before the start of class!)*  
 
+//edited readme
+
 This assignment is a "warm-up" exercise. 
 You will simply deploy the starting Web site that you will use this term to [Glitch](http://www.glitch.com/). 
 
@@ -71,12 +76,67 @@ Below are some suggested technical and design achievements. You can use these to
 
 *Technical*
 1. (max 5 points) Style your page using CSS. Each style rule you apply will get you 1 extra point for a maximum of 5 points. Be sure to describe your style rules in your README.
-2. (5 points) Add a simple JavaScript animation to the page.
-3. (max 5 points) Experiment with other HTML tags (links, images, tables etc.) Each extra tag you use will get you 1 extra point for a maximum of 5 points. Be sure to describe the links you use in your README.
+
+The 5 style rules :
+
+h1 {
+    color: #4130F2;
+    text-shadow: 500px;
+    font-size: 50px;
+    font-family: 'Alumni Sans Pinstripe', sans-serif;
+    font-family: 'Rubik Maze', cursive;
+  }
+  p {
+    color: #2154DB;
+  }
+
+  .wavy {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: #D926FF;
+  }
+
+  .white-text-with-blue-shadow {
+    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+    color: white;
+    font: 1.5em Georgia, serif;
+  }
+
+  .verticalText {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    text-decoration-color: #7521DB;
+  }
+
+
+
+3. (5 points) Add a simple JavaScript animation to the page.
+
+> I added an animated color-changing box at the bottom of my website
+
+
+
+5. (max 5 points) Experiment with other HTML tags (links, images, tables etc.) Each extra tag you use will get you 1 extra point for a maximum of 5 points. Be sure to describe the links you use in your README.
+
+I used 5 tags including:
+   >link
+   >img
+   >details
+   >meta
+   >a
+   >del
+   >ins
+
 
 *Design*
 1. (10 points) Create a color palette using [color.adobe.com](https://color.adobe.com). Use all the colors in the palette in your webpage by implementing the appropriate CSS. Add a small screenshot of the color wheel for your color palette to your repo.
-2. (5 points) Use a font from [Goolge Fonts](https://fonts.google.com) in your website.
+
+>
+![screenshot of the color wheel for my color palette](https://user-images.githubusercontent.com/30932390/187049995-cb8909de-3749-4eef-b97f-65224db6f8f8.png)
+
+
+3. (5 points) Use a font from [Goolge Fonts](https://fonts.google.com) in your website.
+> used the font Rubik Maze from google fonts
 
 Resources
 ---

diff --git a/index.html b/index.html
@@ -1,28 +1,71 @@
-<!doctype html>
+<!DOCTYPE html>
+
 <html lang="en">
-  <head>
-    <title>CS4241 Assignment 1</title>
+  <head> 
     <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe&family=Rubik+Maze&display=swap" rel="stylesheet">
   </head>
+  <title> Welcome to My website</title>
+
   <body>
-    <h1>Information about [Your name here]</h1>
-    <p>
-      [Self introduction]
-    </p>
-    <p>
-      [Major and other information]
-    </p>
-    <p>
-      [Other things]
+
+    <h1>
+      HW Assignment 1
+    </h1>
+
+    <p class="verticalText">
+      Check out this cool link to see: 
+      <a href="https://www.boredpanda.com/nocturnal-trash-posts-raccoon-memes-instagram/?utm_source=google&utm_medium=organic&utm_campaign=organic"> raccoon memes</a>
+      <img src="https://sadanduseless.b-cdn.net/wp-content/uploads/2022/04/raccoon-memes4a.jpg">
     </p>
 
-    <h2>Experience</h2>
-    <p>
-      Working experience
+    <p class="wavy">
+      ^^ this raccoon is dripped out 
     </p>
-    <ul>
-      <li>IBM/Rational</li>
-      <li>WPI</li>
-    </ul>
+
+    <name class="white-text-with-blue-shadow">
+      My name is Ananya Gopalan and im a senior (class of 2023)
+    </name>
+
+    <details>
+      <summary>Wondering about my major?</summary>
+      I'm a double major in RBE and CS
+    </details>
+
+    <details open>
+    <summary>Previous CS courses</summary>
+      racket, object oriented program design, intro to AI, machine learning, discrete math, software engineering, algorithms, databases, assembly language programming
+    </details>
+
+    <details open>
+      <summary> experience with the following technologies and methods</summary>
+      <ul>
+        <li> HTML (none)</li>
+        <li> CSS (none)</li>
+        <li> Java (a lot)</li>
+        <li> Ruby (none)</li>
+        <li> Python (some)</li>
+        <li> unit testing (some)</li>
+      </ul>      
+    </details>
+
+    <extraText>
+      Pluto<del>is</del> <ins>isn’t</ins> a planet.
+    </extraText>
+
+    <! here is an html comment>
+    <figure>
+      <blockquote cite="https://en.wikipedia.org/wiki/Citizenship_in_a_Republic">
+          <p>"It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better..."</p>
+      </blockquote>
+      <figcaption>--Teddy Roosevelt, <cite>Citizenship in a Republic Speach</cite></figcaption>
+  </figure>
+
+    <div>
+      Thanks for checking out my website! ;)
+    </div>
+
   </body>
+
 </html>
diff --git a/server.js b/server.js
@@ -10,6 +10,9 @@ const server = http.createServer( function( request,response ) {
     case '/index.html':
       sendFile( response, 'index.html' )
       break
+    case '/styles.css':
+      sendFile( response, 'styles.css' )
+      break
     default:
       response.end( '404 Error: File Not Found' )
   }

diff --git a/styles.css b/styles.css
@@ -0,0 +1,55 @@
+body {
+    background-color: #2DB0FA;
+  }
+  h1 {
+    color: #4130F2;
+    text-shadow: 500px;
+    font-size: 50px;
+    font-family: 'Alumni Sans Pinstripe', sans-serif;
+    font-family: 'Rubik Maze', cursive;
+  }
+  p {
+    color: #2154DB;
+  }
+
+  .wavy {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: #D926FF;
+  }
+
+  .white-text-with-blue-shadow {
+    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+    color: white;
+    font: 1.5em Georgia, serif;
+  }
+
+  .verticalText {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    text-decoration-color: #7521DB;
+  }
+
+ /* The animation code */
+@keyframes example {
+  0%   {background-color:#4130F2; left:0px; top:0px;}
+  25%  {background-color:#2154DB; left:200px; top:0px;}
+  50%  {background-color:#D926FF; left:200px; top:200px;}
+  75%  {background-color:#7521DB; left:0px; top:200px;}
+  100% {background-color:#4130F2; left:0px; top:0px;}
+}
+
+/* The element to apply the animation to */
+div {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  background-color: #4130F2;
+  animation-name: example;
+  animation-iteration-count: infinite;
+  animation-duration: 10s;
+}
+
+details {
+  color: #7521DB;
+}