made some sorta page with css

Cr-Zay · Nov 16, 2023 · 2b4fec9 · 2b4fec9
1 parent 9d4bf41
commit 2b4fec9
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/site/images/home.png b/site/images/home.png
diff --git a/site/index.html b/site/index.html
@@ -6,8 +6,22 @@
     </head>
     <body>
         <h1>HELLO WORLD</h1>
-        <p>
-            hello bro how are you
-        </p>
+        <hr>
+        <nav>
+            <ul>
+                <li>
+                    <a href="index.html" title="Home Page">Home</a>
+                </li>
+                <li>
+                    <a href="https://www.instagram.com/" title="Instagram">Instagram</a>
+                </li>
+                <li>
+                    <a href="https://www.x.com/" title="Twitter">Twitter</a>
+                </li>
+            </ul>
+        </nav>
+        <hr>
+        <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/7KBa1OVzyuA?si=HeBJnuG43VYReKCD&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> -->
+        <img src="images/home.png">
     </body>
 </html>
diff --git a/site/stylesheets/index.css b/site/stylesheets/index.css
@@ -1,3 +1,6 @@
+body{
+    background-color: antiquewhite;
+}
 h1{
     font-family: 'Franklin Gothic Medium';
     opacity: 0.75;
@@ -12,4 +15,49 @@ h1{
 h1:hover{
     translate: 0 5px;
     transition: 200ms ease-in-out all;
+}
+hr{
+    border: 5px solid burlywood;
+    border-radius: 20px;
+}
+
+nav a:link, a:visited{
+    color: black;
+    text-decoration: none;
+}
+nav li{
+    list-style: none;
+    border: 2px solid black;
+    width: 200px;
+    padding: 4px;
+    margin: 2px;
+    border-radius: 10px;
+    transition: 200ms ease-in-out all;
+    background-color: blanchedalmond;
+}
+nav li:hover{
+    padding: 8px;
+    transition: 200ms ease-in-out all;
+}
+nav li:nth-child(2):hover{
+    background: linear-gradient(45deg, #e838ff, #5656cb);
+    transition: 200ms ease-in-out all;
+}
+nav li:nth-child(3):hover{
+    background: linear-gradient(45deg, rgb(196, 234, 255), #00c3ff);
+    transition: 200ms ease-in-out all;
+}
+img{
+    width: 200px;
+    height: 200px;
+    /* transform: scale(50%, 50%); */
+    transition: 200ms ease-in-out all;
+}
+/* img:hover{
+    transform: scale(100%, 100%);
+    transition: 200ms ease-in all;
+} */
+img:active{
+    translate: 0 -1000%;
+    transition: translate 1s ease-in;
 }