changes

met18001 · Mar 22, 2020 · 0753d7d · 0753d7d
1 parent 7c3a836
commit 0753d7d
Show file tree

Hide file tree

Showing 16 changed files with 6,519 additions and 3 deletions.
diff --git a/animation.html b/animation.html
@@ -15,7 +15,7 @@
             <a href= "https://github.uconn.edu/pages/met18001/web-design-II/css_showcase/" class="leftbutton">Website</a>
         </div>
         <div class="right">
-            <h1>CSS Animation Project</h1>
+            <h1>CSS Animation</h1>
             <p>This project was a midterm for my Web II course where we were instructed to study a part of CSS that we did not know much about. I chose CSS animations and transitions. This project page is fully responsive and highlights CSS keyframe animations and CSS transitions.</p>
         </div>
     </div>

diff --git a/animation_editing.html b/animation_editing.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Animation</title>
+    <link rel="stylesheet" href="css/animation.css">
+    <link rel="shortcut icon" href="img/logo16.png">
+    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Julius+Sans+One|Raleway:300,400&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="flex">
+        <div class="buttonwrapper">
+            <a href= "index.html" class="leftbutton">Home</a>
+            <a href= "https://www.youtube.com/watch?v=NxK7vT3AwEM&loop=0" class="leftbutton">Link</a>
+        </div>
+        <div class="right">
+            <h1>Animation and Editing</h1>
+            <p></p>
+        </div>
+    </div>
+    <div class="box">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/NxK7vT3AwEM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+
+</body>
+</html>
diff --git a/css/misc.css b/css/misc.css
@@ -0,0 +1,140 @@
+.flex{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: flex-start;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+                    flex-direction: column;
+                    flex-wrap: row wrap;
+
+}
+@media(min-width:700px){
+.flex{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-orient: horizontal;
+            -webkit-box-direction: normal;
+                    flex-direction: row;
+            margin-top: 90px;
+            margin-bottom: 50px;
+
+}
+}
+@media(min-width:1024px){
+    .flex{
+        margin-left: 175px;
+        margin-right: 175px;
+    }
+}
+p{
+    font-family: 'Raleway', sans-serif;
+    font-weight: 300;
+    font-size: 20px;
+    margin: 0%;
+
+}
+a.leftbutton{
+    font-size: 25px;
+    color: black;
+    font-family: 'Raleway', sans-serif;
+    font-weight: 300;
+    border: black 2px solid;
+    padding: 10px;
+    text-decoration: none;
+
+}
+a.leftbutton:hover{
+    text-decoration: none;
+    color: white;
+    border: #1d9c9f 2px solid;
+    background-color: #1d9c9f;
+    -webkit-transition: ease-in .75s;
+    transition: ease-in .75s;
+}
+h1{
+    margin:0%;
+    font-family: 'Abril Fatface', cursive;
+
+}
+.right{
+display: -webkit-box;
+display: flex;
+-webkit-box-orient: vertical;
+-webkit-box-direction: normal;
+        flex-direction: column;
+        margin: 30px;
+
+
+}
+.gif{
+    max-width: 500px;
+    max-height: 400px;
+    padding:10px;
+}
+.box{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+                    flex-direction: column; 
+}
+
+@media(min-width:700px){
+    .box{
+        display: -webkit-box;
+        display: flex;
+        -webkit-box-pack: center;
+                justify-content: center;
+        -webkit-box-align: center;
+                align-items: center;
+                -webkit-box-orient: horizontal;
+                -webkit-box-direction: normal;
+                        flex-direction: row; 
+                        flex-flow: row wrap;
+    }
+    .right{
+       margin-left: 4em;
+
+    }
+}
+@media(max-width:425px){
+    .gif{
+        max-width: 250px;
+        max-height: 150px;
+    }
+    a{
+        font-size: 15px !important;
+    }
+    h1{
+        font-size: 20px;
+    }
+    p{
+        font-size: 15px;
+    }
+    iframe{
+       width: 250px;
+       height: 150px;
+    }
+}
+
+.buttonwrapper{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: start;
+            justify-content: flex-start;
+}
+
+.leftbutton{
+    margin-left: 20px;
+}
diff --git a/css/style.css b/css/style.css
@@ -445,7 +445,7 @@ transition: ease-in .5s;
     display: none;
   }
   .page3{
-      background-image: url(../img/pinkmarble.jpg);
+      background-image: url(../img/rainbow.jpg);
       background-position: center top;
       -webkit-box-pack: center;
               justify-content: center;

diff --git a/img/J-Hope.jpg b/img/J-Hope.jpg
diff --git a/img/LOGO_NO_BACKGROUND.png b/img/LOGO_NO_BACKGROUND.png
diff --git a/img/SeventeenMagazineParody2.jpg b/img/SeventeenMagazineParody2.jpg
diff --git a/img/Yearbook Spirit Spread.JPG b/img/Yearbook Spirit Spread.JPG
diff --git a/img/dumps.png b/img/dumps.png
diff --git a/img/flag.pdf b/img/flag.pdf
diff --git a/img/flag2.png b/img/flag2.png