Develop

Gemfile

@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby '2.6.4'
+ruby '2.6.6'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 5.2.3'

Gemfile.lock

@@ -85,6 +85,7 @@ GEM
     faraday (1.0.1)
       multipart-post (>= 1.2, < 3)
     ffi (1.13.1)
+    ffi (1.13.1-x64-mingw32)
     figaro (1.2.0)
       thor (>= 0.14.0, < 2)
     font-awesome-rails (4.7.0.5)
@@ -118,12 +119,15 @@ GEM
     mini_portile2 (2.4.0)
     minitest (5.14.1)
     msgpack (1.3.3)
+    msgpack (1.3.3-x64-mingw32)
     multi_json (1.14.1)
     multi_xml (0.6.0)
     multipart-post (2.1.1)
     nio4r (2.5.2)
     nokogiri (1.10.9)
       mini_portile2 (~> 2.4.0)
+    nokogiri (1.10.9-x64-mingw32)
+      mini_portile2 (~> 2.4.0)
     oauth (0.5.4)
     oauth2 (1.4.4)
       faraday (>= 0.8, < 2.0)
@@ -132,6 +136,7 @@ GEM
       multi_xml (~> 0.5)
       rack (>= 1.2, < 3)
     pg (1.2.3)
+    pg (1.2.3-x64-mingw32)
     popper_js (1.16.0)
     public_suffix (4.0.5)
     puma (3.12.6)
@@ -182,6 +187,8 @@ GEM
       tilt (>= 1.1, < 3)
     sassc (2.4.0)
       ffi (~> 1.9)
+    sassc (2.4.0-x64-mingw32)
+      ffi (~> 1.9)
     sassc-rails (2.1.2)
       railties (>= 4.0.0)
       sassc (>= 2.0)
@@ -214,6 +221,8 @@ GEM
     turbolinks-source (5.2.0)
     tzinfo (1.2.7)
       thread_safe (~> 0.1)
+    tzinfo-data (1.2020.1)
+      tzinfo (>= 1.0.0)
     uglifier (4.2.0)
       execjs (>= 0.3.0, < 3)
     web-console (3.7.0)
@@ -229,6 +238,7 @@ GEM
 
 PLATFORMS
   ruby
+  x64-mingw32
 
 DEPENDENCIES
   bootsnap (>= 1.1.0)
@@ -256,7 +266,7 @@ DEPENDENCIES
   web-console (>= 3.3.0)
 
 RUBY VERSION
-   ruby 2.6.4p104
+   ruby 2.6.6p146
 
 BUNDLED WITH
    2.1.4

app/assets/stylesheets/albums.scss

@@ -69,7 +69,7 @@
     font-size: 20px;
 }
 .botao:hover {
-    background-color: rgba(62, 64, 204, 0.671); /* Green */
+    background-color: blueviolet; /* Green */
     color: whitesmoke;
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 }

app/assets/stylesheets/cards.scss

@@ -0,0 +1,186 @@
+.card-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .post {
+    width: 350px;
+    height: 700px;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    position: relative;
+
+    }
+
+    .header_post {
+      width: 100%;
+      height: 350px;
+      background: transparent;
+      position: absolute;
+      top: 0;
+
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+    }
+
+    .body_post {
+      width: 100%;
+      height: 50%;
+      background: #fff;
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+
+      .post_content {
+        width: 80%;
+        height: 80%;
+        background: #fff;
+        position: relative;
+        }
+
+        h1 {
+          font-size: 20px;
+          font-weight: bold;
+          margin-bottom: 3px;
+        }
+
+        p {
+          font-size: 14px;
+          font-weight: normal;
+        }
+
+        .container_infos {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          position: absolute;
+          bottom: 0;
+          border-top: 1px solid rgba(0, 0, 0, .2);
+          padding-top: 25px;
+
+          .postedBy {
+            display: flex;
+            flex-direction: column;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-size: 12px;
+
+
+            span {
+              font-size: 12px;
+              text-transform: uppercase;
+              opacity: 1;
+              letter-spacing: 1px;
+            }
+
+            p {
+              font-weight: bold;
+            }
+
+          }
+
+          .container_tags {
+            display: flex;
+            flex-direction: column;
+
+            span {
+              font-size: 12px;
+              text-transform: uppercase;
+              opacity: 1;
+              letter-spacing: 1px;
+            }
+
+            .tags {
+              ul {
+                display: flex;
+                li {
+                  font-size: 12px;
+                  font-weight: bold;
+                  letter-spacing: 2px;
+                  list-style: none;
+                  margin-left: 8px;
+                  text-transform: uppercase;
+                  position: relative;
+                  z-index: 1;
+                  display: flex;
+                  justify-content: center;
+                  cursor: pointer;
+
+                  &:first-child {
+                    margin-left: 0px;
+                  }
+
+                  &:before {
+                    content: '';
+                    text-align: center;
+                    width: 100%;
+                    height: 5px;
+                    background: rgb(62, 65, 204);
+                    opacity: 0.7;
+                    position: absolute;
+                    bottom: 0;
+                    z-index: -1;
+                    padding: 0px 1px;
+                    -webkit-transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 320ms;
+                    -moz-transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 320ms;
+                    -ms-transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 320ms;
+                    -o-transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 320ms;
+                    transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 320ms;
+                  }
+
+                  &:hover:before {
+                    height: 18px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+.card-img-top {
+  width: 100%;
+  height: 15vw;
+  object-fit: cover;
+}
+
+
+/*KEYFRAMES ANIMAÇÃO DAS TAGS*/
+
+@keyframes top {
+  0% {
+    opacity: 0;
+    bottom: -80px
+  }
+  100% {
+    opacity: 1;
+    bottom: 0px
+
+  }
+}
+
+@keyframes icon {
+  0% {
+    opacity: 0;
+    transform: scale(0.0);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.3) rotate(-02deg);
+
+  }
+  100% {
+    opacity: 1;
+    bottom: 0px;
+  }
+}

app/assets/stylesheets/fixed.scss

@@ -0,0 +1,43 @@
+/*--- Bootstrap Mobile Gutter Fix --*/
+.row, .container-fluid {
+margin-left: 0px !important;
+margin-right: 0px !important;
+}
+
+/*--- Fixed Video Background iOS/Mobile Style--*/
+.video-wrap {
+  clip: rect(0, auto, auto, 0);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+#video {
+  position: relative;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center center;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  will-change: transform;
+  z-index: -1000;
+}
+video { 
+  position: relative;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  z-index: -100;
+  transform: translateX(-50%) translateY(-50%);
+  background: url('') no-repeat;
+  background-size: cover;
+  transition: 1s opacity;
+}