marquee

federicopozzi · Jan 8, 2021 · 9f2b5b8 · 9f2b5b8
1 parent 679898b
commit 9f2b5b8
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 1 deletion.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -130,7 +130,51 @@ header{
   background-color: #C55445;
   transition:0.3s;
 }
+/* ########## MARQUEE ########## */
+/* .marquee {
+  overflow: hidden;
+  --offset: 0vw;
+  --move-initial: calc(-5% + var(--offset));
+  --move-final: calc(-20% + var(--offset));
+}
+
+.marquee__inner {
+  width: fit-content;
+  display: flex;
+  transform: translate3d(var(--move-initial), 0, 0);
+  animation: marquee 5s linear infinite;
+  animation-play-state: paused;
+}
+
+.marquee span {
+  font-size: 5vw;
+  padding: 0 2vw;
+  font-family: 'Manrope', sans-serif;
+  cursor:pointer;
+}
+.t-proj:hover {
+  color:white;
+}
 
+.country span {
+  color: black;
+}
+
+.marquee__inner:hover {
+  animation-play-state: running;
+  cursor:context-menu;
+
+}
+
+@keyframes marquee {
+  0% {
+    transform: translate3d(var(--move-initial), 0, 0);
+  }
+
+  100% {
+    transform: translate3d(var(--move-final), 0, 0);
+  }
+} */
 /* iphone */
 @media only screen and (max-width: 414px) {
   .margin-mob-t{

diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="robots" content="all">
   <!-- favicon -->
-  <link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon">  
+  <link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon">
   <!-- bootstrap -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
@@ -145,6 +145,32 @@
           </a>
         </div>
       </div>
+      <!-- <div class="marquee">
+          <div class="marquee__inner country " aria-hidden="true">
+          <span class="t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+            <span class=" t-proj">TOURISM</span>
+
+
+          </div>
+        </div> -->
     </section>
   </main>