chnages

met18001 · Mar 19, 2020 · 9702ff5 · 9702ff5
1 parent 16af627
commit 9702ff5
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 14 deletions.
diff --git a/css/style.css b/css/style.css
@@ -82,6 +82,7 @@ body{
 .meira{
     max-height: 500px;
     max-width: 300px;
+    border-radius: 100%;
 }
 
 @media (min-width: 1000px){
@@ -109,13 +110,17 @@ align-content: center;
     .navbar-brand{
         display: none;
     }
+    .meira{
+        max-height: 200px;
+        max-width: 200px;
+    }
 }
 p{
     font-size: 30px;
     font-family: 'Raleway', sans-serif;
     font-weight: 300;
 }
-.download{
+a.download{
     font-size: 25px;
     color: black;
     font-family: 'Raleway', sans-serif;
@@ -124,7 +129,7 @@ p{
     padding: 10px;
 
 }
-.download:hover{
+a.download:hover{
     text-decoration: none;
     color: white;
     border: #1d9c9f 2px solid;
@@ -147,14 +152,14 @@ a.glyphicon:hover{
     -webkit-transition: ease-in .75s;
     transition: ease-in .75s;
 }
-i.fab {
+a.fab {
     color: black !important;
     font-size: 36px;
     border: black 2px solid;
     padding: 10px;
     margin-left: 10px;
 }
-i.fab:hover{
+a.fab:hover{
     color: white !important;
     text-decoration: none;
     border: #1d9c9f 2px solid;
@@ -233,15 +238,55 @@ i.fab:hover{
       transition: ease-in .75s;
   }
   .section2{
-      display: -webkit-box;
-      display: flex;
-      -webkit-box-pack: center;
-    justify-content: center;
-    padding: 45px; 
+    padding: 45px;
+    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: 800px){
+      .section2{
+        display: -webkit-box;
+        display: flex;
+        -webkit-box-pack: center;
+      justify-content: center; 
+      -webkit-box-orient: horizontal; 
+      -webkit-box-direction: normal; 
+              flex-direction: row;
+      }
+
   }
   .innerBox{
       padding-right: 25px;
   }
   .box1{
-     padding-top: 150px;
-  }
+
+  }
+  .wrapper{
+      max-width: 700px;
+      max-height: 700px;
+  }
+  .animation{
+    padding: 45px;
+
+  }
+  .responsive-video {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 60px; overflow: hidden;
+}
+
+.responsive-video iframe,
+.responsive-video object,
+.responsive-video embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/img/animation.gif b/img/animation.gif
diff --git a/img/animation.mp4 b/img/animation.mp4
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
 <section class="body">
 
 
-    <nav class="navbar navbar-light navbar-fixed-top text-right" role="navigation">
+    <nav class="navbar navbar-light navbar text-right" role="navigation">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
@@ -52,7 +52,7 @@
       <div class="box2">
         <a class="download" href="Resume.pdf" download="Resume">Resume</a>
         <a class="glyphicon glyphicon-envelope" href="mailto:meira.tompkins@uconn.edu" role="button"></a>
-        <i a class="fab fa-linkedin-in" style="font-size:36px"href="https://www.linkedin.com/in/meira-tompkins-11a3961a1/" role="button"></a></i>
+        <a class="fab fa-linkedin-in" style="font-size:36px"href="https://www.linkedin.com/in/meira-tompkins-11a3961a1/" role="button"></i></a>
       </div>
       <div class="bounce">
         <i class="fas fa-angle-down"></i>
@@ -62,11 +62,26 @@
     <div class="section2">
       <div class="innerBox" id="about">
         <h1>Hi! I'm Meira</h1>
-        <p>I am a multifaceted and passionate designer always improving my skills and discovering new things about myself. I love brainstorm sessions and bouncing creative ideas around with others. I love what I do equally as much as dark chocolate.</p>
+        <p>I am a multifaceted and passionate designer always improving my skills and discovering new things about myself. I love sharing my ideas and working together with others to solve complex problems.</p>
       </div>
       <img src="img/IMG_6831-2.jpg" alt="Meira"class="meira">
     </div>
 
+  <section class="webportfolio">
+    <div class="animation">
+      <div class="textbox">
+        <h2>CSS Animation Project</h2>
+        <p>This CSS project was for my advanced web design class was about exploring parts of CSS. I chose CSS animations and animated and created a cat using CSS animations and transitions.</p>
+      <a href="">Learn More</a>
+      <div class="responsive-video">
+        <iframe src="https://giphy.com/embed/hrpi7we2LbGkioL17I" width="480" height="274" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
+      </div>
+      </div>
+    </div>
+  </section>
+
+
+