Add animated display to top ten pages

Victoria-Rhine · Dec 31, 2019 · b78008e · b78008e
1 parent ec13eb0
commit b78008e
Show file tree

Hide file tree

Showing 5 changed files with 316 additions and 35 deletions.
diff --git a/TheCatProject/Content/Site.css b/TheCatProject/Content/Site.css
@@ -362,6 +362,7 @@ table#output th {
 /**
  * ----------------------------------------
  * animation tilt-in-fwd-tr
+ * about page cat photo
  * ----------------------------------------
  */
 
@@ -401,6 +402,7 @@ table#output th {
 /**
  * ----------------------------------------
  * animation slide-in-left
+ * guide page header
  * ----------------------------------------
  */
 
@@ -436,3 +438,80 @@ table#output th {
         opacity: 1;
     }
 }
+
+/**
+ * ----------------------------------------
+ * animation text-focus-in 
+ * ----------------------------------------
+ */
+
+.text-focus-in-4 {
+    -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.5s both;
+    animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.5s both;
+}
+
+.text-focus-in-3 {
+    -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1.5s both;
+    animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1.5s both;
+}
+
+.text-focus-in-2 {
+    -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2.5s both;
+    animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 2.5s both;
+}
+
+.text-focus-in-1 {
+    -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3.5s both;
+    animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 3.5s both;
+}
+
+.text-focus-in-0 {
+    -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 4.5s both;
+    animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 4.5s both;
+}
+
+@-webkit-keyframes text-focus-in {
+    0% {
+        -webkit-filter: blur(12px);
+        filter: blur(12px);
+        opacity: 0;
+    }
+
+    100% {
+        -webkit-filter: blur(0px);
+        filter: blur(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes text-focus-in {
+    0% {
+        -webkit-filter: blur(12px);
+        filter: blur(12px);
+        opacity: 0;
+    }
+
+    100% {
+        -webkit-filter: blur(0px);
+        filter: blur(0px);
+        opacity: 1;
+    }
+}
+
+
+
+
+
+.circleBase {
+    border-radius: 50%;
+    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
+}
+
+.type1 {
+    width: 150px;
+    height: 150px;
+    background-color: teal;
+    border: 5px;
+    border-color: #3b312b;
+    border-style: solid;
+}
diff --git a/TheCatProject/Views/Information/Breeds.cshtml b/TheCatProject/Views/Information/Breeds.cshtml
@@ -1,11 +1,62 @@
-<h1 id="pageheaders">Most Common Breeds</h1>
-<hr />
+@model List<System.String>
 
-@foreach (var item in ((List<System.String>)ViewBag.TopBreeds))
-{
+<h1 id="pageheaders">Most Common Breeds</h1>
 
-    <div class="text-focus-in">
-        @item
-    </div>
+@{ 
+    ViewBag.Fifth = "5th - " + ViewBag.TopBreeds[4];
+    ViewBag.Fourth = "4th - " + ViewBag.TopBreeds[3];
+    ViewBag.Third = "3rd - " + ViewBag.TopBreeds[2];
+    ViewBag.Second = "2nd - " + ViewBag.TopBreeds[1];
+    ViewBag.First = "1st - " + ViewBag.TopBreeds[0];
 }
 
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">    
+        <div class="text-focus-in-4" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Fifth</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-3" style="background-color: teal; border: 3px; border-style: solid;
+        border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Fourth</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-2" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Third</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-1" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Second</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-0" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.First</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
diff --git a/TheCatProject/Views/Information/Colors.cshtml b/TheCatProject/Views/Information/Colors.cshtml
@@ -1,12 +1,63 @@
-<h1 id="pageheaders">Most Common Colors</h1>
-<hr />
-
-@foreach (var item in ((List<System.String>)ViewBag.TopColors))
-{
-    <tr>
-        <td>
-            @item
-        </td>
-    </tr>
+@model List<System.String>
+
+<h1 id="pageheaders">Most Common Colors</h1>
+
+@{
+    ViewBag.Fifth = "5th - " + ViewBag.TopColors[4];
+    ViewBag.Fourth = "4th - " + ViewBag.TopColors[3];
+    ViewBag.Third = "3rd - " + ViewBag.TopColors[2];
+    ViewBag.Second = "2nd - " + ViewBag.TopColors[1];
+    ViewBag.First = "1st - " + ViewBag.TopColors[0];
 }
 
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-4" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Fifth</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-3" style="background-color: teal; border: 3px; border-style: solid;
+        border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Fourth</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-2" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Third</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-1" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Second</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-0" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.First</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+
diff --git a/TheCatProject/Views/Information/Names.cshtml b/TheCatProject/Views/Information/Names.cshtml
@@ -1,12 +1,62 @@
-<h1 id="pageheaders">Most Common Names</h1>
-<hr />
+@model List<System.String>
 
-@foreach (var item in ((List<System.String>)ViewBag.TopNames))
-{
-    <tr>
-        <td>
-            @item
-        </td>
-    </tr>
+<h1 id="pageheaders">Most Common Names</h1>
+
+@{
+    ViewBag.Fifth = "5th - " + ViewBag.TopNames[4];
+    ViewBag.Fourth = "4th - " + ViewBag.TopNames[3];
+    ViewBag.Third = "3rd - " + ViewBag.TopNames[2];
+    ViewBag.Second = "2nd - " + ViewBag.TopNames[1];
+    ViewBag.First = "1st - " + ViewBag.TopNames[0];
 }
 
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-4" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Fifth</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-3" style="background-color: teal; border: 3px; border-style: solid;
+        border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Fourth</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-2" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Third</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-1" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Second</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-0" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.First</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
diff --git a/TheCatProject/Views/Information/Personalities.cshtml b/TheCatProject/Views/Information/Personalities.cshtml
@@ -1,12 +1,62 @@
-<h1 id="pageheaders">Most Common Personalities</h1>
-<hr />
+@model List<System.String>
 
-@foreach (var item in ((List<System.String>)ViewBag.TopPersonalities))
-{
-    <tr>
-        <td>
-            @item
-        </td>
-    </tr>
+<h1 id="pageheaders">Most Common Personalities</h1>
+
+@{
+    ViewBag.Fifth = "5th - " + ViewBag.TopPersonalities[4];
+    ViewBag.Fourth = "4th - " + ViewBag.TopPersonalities[3];
+    ViewBag.Third = "3rd - " + ViewBag.TopPersonalities[2];
+    ViewBag.Second = "2nd - " + ViewBag.TopPersonalities[1];
+    ViewBag.First = "1st - " + ViewBag.TopPersonalities[0];
 }
 
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-4" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Fifth</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-3" style="background-color: teal; border: 3px; border-style: solid;
+        border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Fourth</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-2" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Third</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-1" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.Second</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>
+<div class="row">
+    <div class="col-md-4"></div>
+    <div class="col-md-4">
+        <div class="text-focus-in-0" style="background-color: teal; border: 3px; border-style: solid;
+            border-color: #3b312b; margin-top: 4px; margin-bottom: 4px;">
+            <p style="margin-top: 3px; margin-bottom: 3px; font-size: 23px;">@ViewBag.First</p>
+        </div>
+    </div>
+    <div class="col-md-4"></div>
+</div>