styling

assets/css/stylesheet.css

@@ -5,7 +5,7 @@ body {
 }
 
 .header {
-    padding-top: 80px;
+    padding-top: 70px;
     padding-left: 60px;
     text-align: left;
 }
@@ -27,6 +27,8 @@ body {
     box-sizing: border-box;
 }
 
+/* ----- column left ------ */
+
 .column-left {
     width: 50%;
     margin-top: 40px; 
@@ -41,7 +43,7 @@ body {
 
 .command-bar {
     height: 40px;
-    width: 80%;
+    width: 70%;
     font-size: 16px;
     padding-left: 20px;
     border-radius: 30px;
@@ -65,7 +67,6 @@ body {
     outline: none;
 }
 
-
 .command-button {
     display: flex;
     width: 20%;
@@ -115,7 +116,10 @@ body {
     text-align: right;
 }
 
+/* ----- column right ------ */
+
 .flip-card {
+    display: flex;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
@@ -123,26 +127,18 @@ body {
     align-items: center;
     text-align: center;
     margin-left: 30px;
-    margin-top: -90px;
+    margin-top: 40px;
+    height: 50vh;
 }
 
 .flip-card.visible {
+    display: flex;
     opacity: 1;
     visibility: visible;
 }
 
-.tendrils {
-    padding-top: 15px;
-    width: 100%;   
-}
-
-.info_layer {
-    padding-top: 15px;
-    padding-bottom: 20px;
-}
-
 .flip-card-inner {
-  position: relative;
+    display: flex;
     width: 100%;
     height: 160%;
     text-align: center;
@@ -153,6 +149,22 @@ body {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 }
 
+.tendrils {
+    display: flex;
+    padding-top: 15px;
+    padding-left: 10px;
+    padding-right: 10px;
+    width: 100%;   
+}
+
+.tendril-top {
+    align-items: flex-start;
+}
+
+.tendril-bottom {
+    align-items: flex-end;
+}
+
 .flip-card:hover .flip-card-inner {
   transform: rotateY(180deg);
 }
@@ -165,16 +177,15 @@ body {
   backface-visibility: hidden;
 }
 
-.flip-card-front {
-    
-  background-color: #d4d1d0;
-  border-radius: 30px;
-  color: black;
-}
-
 .flip-card-back {
+    display: flex;
+    align-items: center;
     background-color: #d4d1d0;
     color: black;
     border-radius: 30px;
     transform: rotateY(180deg);
 }
+
+.info_layer {
+    padding: 25px;
+}

assets/js/script.js

@@ -22,7 +22,7 @@ var responses = {
     "parent": {
         screen: "Definition: When a process creates a new process it is called a parent. For example, if you were to start a process and then this would divide into two (like a fork), the initial process would be the parent and the subsequent the child.",
         paper: "Formulate an idea and let it spread. Congratulations, you are a parent now.",
-        concept: "They say it takes a village to raise a child, the same goes for an idea. The village can be a community of practice. Your knowledge comes directly from within your own community of practice, that group of people and objects that while engaging in ongoing interactions and rituals influenced you, and I am not talking just about your family, friends, colleagues, yoga classmates, but about computers, boundary objects as well. You need a community of practice to raise an idea that can be freed from any type of hierarchical influence, collateral pain and marginalization.",
+        info_layer: "They say it takes a village to raise a child, the same goes for an idea. The village can be a community of practice. Your knowledge comes directly from within your own community of practice, that group of people and objects that while engaging in ongoing interactions and rituals influenced you, and I am not talking just about your family, friends, colleagues, yoga classmates, but about computers, boundary objects as well. You need a community of practice to raise an idea that can be freed from any type of hierarchical influence, collateral pain and marginalization.",
     },
     "interrupt": {
         screen: "Definition: An event that changes the order in which instructions for a process are executed, altering the flow of a program.",

index.html

@@ -37,12 +37,12 @@
       </div>
       
      <!-- <div class="column column-right"> -->
-      <div class="flip-card">
+      <div class="column flip-card">
         <div class="flip-card-inner">
           <div class="flip-card-front">
-        <img class="tendrils" src="assets/img/tendrils.svg"></img>
+        <img class="tendrils tendril-top" src="assets/img/tendrils.svg"></img>
         <h1></h1>
-        <img class="tendrils" src="assets/img/tendrils.svg"></img>
+        <img class="tendrils tendril-bottom" src="assets/img/tendrils.svg"></img>
     </div>
     <div class="flip-card-back">
       <p class="info_layer"></p>