farmhouse cafe

met18001 · Mar 21, 2020 · 6788c4d · 6788c4d
1 parent bc29294
commit 6788c4d
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 8 deletions.
diff --git a/css/nutmeg.css b/css/nutmeg.css
@@ -75,6 +75,7 @@ display: flex;
 .gif{
     max-width: 500px;
     max-height: 400px;
+    margin-left: 30px;
 }
 .box{
     display: -webkit-box;
@@ -107,7 +108,7 @@ display: flex;
 }
 @media(max-width:400px){
     .gif{
-        max-width: 500px;
+        max-width: 300px;
         max-height: 300px;
     }
     a{

diff --git a/css/style.css b/css/style.css
@@ -191,6 +191,20 @@ a.fab:hover{
       typing 3.5s steps(30, end),
       blink-caret .5s step-end infinite;
   }
+  .typewriter .type {
+    color: black;
+    overflow: hidden; /* Ensures the content is not revealed until the animation */
+    white-space: nowrap; /* Keeps the content on a single line */
+    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
+    letter-spacing: .15em; /* Adjust as needed */
+    -webkit-animation: 
+      typing 3.5s steps(30, end),
+      blink-caret .5s step-end infinite;
+            animation: 
+      typing 3.5s steps(30, end),
+      blink-caret .5s step-end infinite;
+  }
+
 
   /* The typing effect */
   @-webkit-keyframes typing {

diff --git a/farmhouse.html b/farmhouse.html
@@ -4,11 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Farmhouse Cafe</title>
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/animation.css">
     <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Julius+Sans+One|Raleway:300,400&display=swap" rel="stylesheet">
     <link rel="shortcut icon" href="img/logo16.png">
 </head>
 <body>
+    <div class="flex">
+        <div class="buttonwrapper">
+            <a href= "index.html" class="leftbutton">Home</a>
+            <a href= "https://github.uconn.edu/pages/met18001/web-design-II/final_project/final.html#home" class="leftbutton">Website</a>
+        </div>
+        <div class="right">
+            <h1>Farmhouse Cafe Project</h1>
+            <p>The farmhouse cafe project was the final project for my Web II course where we redesigned a website that had an old or outdated design. This website is fully responsive and features an elegant and modern design.</p>
+        </div>
+    </div>
+    <div class="box">
+        <img src="img/The Farmhouse Cafe.gif" class="gif" alt="Nutmeg Magazine">
+        <img src="img/responsive.gif" class="gif" alt="Nutmeg Magazine">
+    </div>
 
 </body>
 </html>
diff --git a/img/The Farmhouse Cafe.gif b/img/The Farmhouse Cafe.gif
diff --git a/img/magspread.png b/img/magspread.png
diff --git a/img/responsive.gif b/img/responsive.gif
diff --git a/index.html b/index.html
@@ -46,13 +46,14 @@
       <div class="box1">
         <div class="typewriter">
           <h1 class="h1">Meira Tompkins</h1>
+          <p class="type"> Designer // Coder // Artist </p>
       </div>
-      <p> Designer // Coder // Artist </p>
-      <div class="box2">
+
+      <!-- <div class="box2">
         <a class="download" href="img/Resume.pdf" download="Resume">Resume</a>
         <a class="glyphicon glyphicon-envelope" href="mailto:meira.tompkins@uconn.edu" role="button"></a>
         <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> -->
       <div class="bounce">
         <a href="#about" class="fas fa-angle-down"></a>
       </div>

diff --git a/nutmeg.html b/nutmeg.html
@@ -17,14 +17,16 @@
         <div class="right">
             <h1>Nutmeg Magazine</h1>
             <p class="bold">Personal Role: Magazine Managing Editor</p>
-            <p>For the Fall 2019 semester, I had the opprotunity to create a magazine for UConn Nutmeg Publishing. I was in charge of everything from the content to the final designs and proofs. This health and wellness piece included a collaboration with UConn Project Fashion, our feature piece, as well as pieces on the topic of food insecurity and renovations to Whitney dining hall. sleek and simple design was chosen to attract the readers attention and highlight photographs chosen.</p>
+            <p>For the Fall 2019 semester, I had the opprotunity to create a magazine for UConn Nutmeg Publishing. I was in charge of everything from the content to the final designs and proofs. This health and wellness piece included a collaboration with UConn Project Fashion, our feature piece, as well as pieces on the topic of food insecurity and renovations to Whitney dining hall. A sleek and simple design was used to attract the readers attention and highlight photographs chosen.</p>
         </div>
     </div>
     <div class="box">
         <img src="img/mag.jpg" class="gif" alt="Nutmeg Magazine">
-        <div class="contain">
+        <img src="img/magspread.png" class="gif" alt="Nutmeg Magazine">
+
+        <!-- <div class="contain">
             <embed src="img/Fall 2019 Health and Wellness Magazine.pdf" type="application/pdf">
-        </div>
+        </div> -->
     </div>
 
 </body>