Index page done

2025-10-13 00:42:53 +00:00 · 2022-04-15 23:33:57 -03:00
parent 38f97e1acc
commit d5f6c5aee0
15 changed files with 250 additions and 9 deletions
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -0,0 +1,58 @@
+import icon from './icon.png'
+import styled from 'styled-components'
+
+function Header() {
+
+    const HeaderStyles = styled.header`
+        
+        height: 15vh;
+
+        display: flex;
+        align-items: center;
+
+        padding: 0px 2vw;
+
+        border-bottom: 1px solid #eee;
+
+        .logotype {
+            display: flex;
+            align-items: center;
+            
+            img {
+                width: 80px;
+                height: 80px;
+
+                margin-right: 1vw;
+                
+                &:hover {
+                    animation: rotate-image 0.5s cubic-bezier(1.000, 0.000, 0.000, 1.000) both;
+                }
+            }
+
+            @keyframes rotate-image {
+                0% {
+                    transform: rotate(0deg)
+                }
+
+                100% {
+                    transform: rotate(360deg)
+                }
+            }
+        }
+
+    `
+    
+    return (
+        <HeaderStyles>
+            <div className='logotype'>
+                <img src={icon} alt="Page icon"></img>
+                <h1>Telegram to Notion Bot</h1>
+            </div>
+            <div>
+
+            </div>
+        </HeaderStyles>
+    )
+}
+
+export default Header