diff --git a/README.md b/README.md index bbf146f..09f3cfa 100644 --- 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 index 37ac8c3..81d9a19 100644 --- a/index.html +++ b/index.html @@ -1,28 +1,71 @@ - + + - - CS4241 Assignment 1 + + + + Welcome to My website + -

Information about [Your name here]

-

- [Self introduction] -

-

- [Major and other information] -

-

- [Other things] + +

+ HW Assignment 1 +

+ +

+ Check out this cool link to see: + raccoon memes +

-

Experience

-

- Working experience +

+ ^^ this raccoon is dripped out

- + + + My name is Ananya Gopalan and im a senior (class of 2023) + + +
+ Wondering about my major? + I'm a double major in RBE and CS +
+ +
+ Previous CS courses + racket, object oriented program design, intro to AI, machine learning, discrete math, software engineering, algorithms, databases, assembly language programming +
+ +
+ experience with the following technologies and methods + +
+ + + Plutois isn’t a planet. + + + +
+
+

"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..."

+
+
--Teddy Roosevelt, Citizenship in a Republic Speach
+
+ +
+ Thanks for checking out my website! ;) +
+ + diff --git a/server.js b/server.js index 9490f71..f77ba71 100644 --- 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 new file mode 100644 index 0000000..e9b3d34 --- /dev/null +++ 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; +} \ No newline at end of file