added about us page and removed twitter button

Cr-Zay · Nov 19, 2023 · a15b93f · a15b93f
1 parent f3c056a
commit a15b93f
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 33 deletions.
diff --git a/site/about.html b/site/about.html
@@ -5,7 +5,46 @@
         <link rel="stylesheet" href="stylesheets/index.css">
     </head>
     <body>
-        <h1>About Us</h1>
-        <a href="index.html">Back to Home</a>
+        <header>
+            <div id="clouds">
+                <img class="cloud" src="images/cloud 2.png">
+                <img class="cloud" src="images/cloud.png">
+                <img class="cloud" src="images/cloud.png">
+                <img class="cloud" src="images/cloud 2.png">
+                <img class="cloud" src="images/cloud.png">
+                <img class="cloud" src="images/cloud.png">
+                <img class="cloud" src="images/cloud 2.png">
+                <img class="cloud" src="images/cloud 2.png">
+                <img class="cloud" src="images/cloud 2.png">
+                <img class="cloud" src="images/cloud.png">
+                <img class="cloud" src="images/cloud 2.png">
+                <img class="cloud" src="images/cloud.png">
+                <img class="cloud" src="images/cloud 2.png">
+            </div>
+        </header>
+        <nav>
+            <hr>
+            <ul>
+                <li>
+                    <a href="index.html" title="Home Page">Home</a>
+                </li>
+                <li>
+                    <a href="https://www.instagram.com/kian.mehta/" target="_blank" title="Instagram">Instagram</a>
+                </li>
+                <!-- <li>
+                    <a href="https://twitter.com/kianmehta" target="_blank" title="Twitter">Twitter</a>
+                </li> -->
+                <li>
+                    <a href="about.html" title="About">About Us</a>
+                </li>
+                <li>
+                    <a href="https://apps.microsoft.com/detail/Stranded%20Penguin/9NM5TJ92ZPT9?launch=true&mode=mini" target="_blank">Get!</a>
+                </li>
+
+            </ul>
+            <hr>
+        </nav>
+        <h2>About Us</h2>
+        <p id="aboutUsText">Hi there! This is Cr.Zay, an indie dev who adores game development. Stranded Penguin is one of my Unity projects I am more proud of, and so I decided to put it up on the Microsoft Store to get your opinions. If you're reading this, I strongly suggest that you hit that Get button and try out Stranded Penguin. Also, it would really be great if you could lemme know what you think of the game either by writing a review on the store, or by mailing me at <a href="mailto:kianmehta0508@gmail.com" title="email">kianmehta0508@gmail.com</a></p>
     </body>
 </html>
diff --git a/site/images/penguin.png b/site/images/penguin.png
diff --git a/site/index.html b/site/index.html
@@ -31,14 +31,14 @@
                 <li>
                     <a href="https://www.instagram.com/kian.mehta/" target="_blank" title="Instagram">Instagram</a>
                 </li>
-                <li>
+                <!-- <li>
                     <a href="https://twitter.com/kianmehta" target="_blank" title="Twitter">Twitter</a>
-                </li>
+                </li> -->
                 <li>
                     <a href="about.html" title="About">About Us</a>
                 </li>
                 <li>
-                    <a href="about.html" title="Get">Get!</a>
+                    <a href="https://apps.microsoft.com/detail/Stranded%20Penguin/9NM5TJ92ZPT9?launch=true&mode=mini" target="_blank">Get!</a>
                 </li>
 
             </ul>
@@ -50,19 +50,19 @@ <h1>Stranded Penguin</h1>
         </div>
         <div id="boxes">
             <div class="descbox">
-                <h2>Penguinsss</h2>
+                <h3>Penguinsss</h3>
                 <p>
                     Need I say more? This game brings to life only the cutest most adorable bird on the planet 🐧🐧. And we've done more. We've given these flightless birds the best ability on the planet. JUMPINGGG!! Seriously, a game with jumping penguins. What else do you want?
                 </p>
             </div>
             <div class="descbox">
-                <h2>Sparkly Stuf</h2>
+                <h3>Sparkly Stuf</h3>
                 <p>
-                    Gold Nuggies, Diamonds, Rubies and Stars. SHINY STUFF!! It looks pretty and makes penguins happy. Forget the Antarctic, penguins will scour even tropical forests if there's a chance they'll get 'em shiny stufff. So go right now and get yourself a hungry penguin. 🪙💎⭐'
+                    Gold Nuggies, Diamonds, Rubies and Stars. SHINY STUFF!! It looks pretty and makes penguins happy. Forget the Antarctic, penguins will scour even tropical forests if there's a chance they'll get 'em shiny stufff. So go right now and get yourself a hungry penguin. 🪙💎⭐
                 </p>
             </div>
             <div class="descbox">
-                <h2>Bunnies</h2>
+                <h3>Bunnies</h3>
                 <p>
                     Everyone agrees that calling bunnies cute 🐰🐰 is a direct hit on the cuteness of penguins and is a sin as clearly you're not being loyal to your penguins. So, we have portrayed bunnies in the true way they are to be portrayed. Evil. And penguin killers.
                 </p>

diff --git a/site/stylesheets/index.css b/site/stylesheets/index.css
@@ -1,18 +1,17 @@
 body{
-    height: 3000px;
+    /* height: 3000px; */
     /* background: linear-gradient(180deg, #0096f2 0%, #137929 40%, #a36105 60%, #8f3e00 70%, #999999 80%, #5e5e5e 90%); */
-    background: linear-gradient(180deg, #0096f2 0%, #ffffff 90%
+    background: linear-gradient(180deg, #0096f2 0%, #0096f2 50%, #ffffff 90%
     /* , #a36105 60%, #8f3e00 70%, #999999 80%, #5e5e5e 90% */
-
     );
+    background-repeat: no-repeat;
 
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     /* min-width: 600px; */
     font-size: 120%;
 }
 
 h1{
-    /* font-size: clamp(10vw, 10vw, 10vw); */
     font-size: 10vw;
     margin: auto;
     width: fit-content;
@@ -23,7 +22,32 @@ h1{
     text-wrap: wrap;
     text-align: center;
 }
+h2{
+    font-size: 5vw;
+    width: fit-content;
+    opacity: 0.75;
+    background-color: #da2e2e;
+    padding: 5px 10px;
+    border-radius: 15px;
+    text-wrap: wrap;
+}
+
+h3{
+    width: fit-content;
+    opacity: 0.75;
+    background-color: #de6101;
+    padding: 5px 10px;
+    border-radius: 10px;
+    font-size: 150%;
+}
 
+p{
+    text-align: justify;
+    border: 5px solid burlywood;
+    padding: 6px 6px;
+    border-radius: 10px;
+    font-size: 120%;
+}
 a:link, a:visited{
     color: black;
     text-decoration-style: wavy;
@@ -77,26 +101,33 @@ nav li:nth-child(2):hover{
     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;
-}
-nav li:nth-child(4):hover{
     background: linear-gradient(45deg, rgb(255, 230, 149), rgb(204, 156, 0));
     transition: 200ms ease-in-out all;
 }
-nav li:nth-child(5){
+nav li:nth-child(4){
     padding-left: 50px;
     padding-right: 50px;
 }
-nav li:nth-child(5):hover{
+nav li:nth-child(4):hover{
     background: linear-gradient(45deg, rgb(149, 255, 200), rgb(0, 204, 48));
     transition: 200ms ease-in-out all;
 }
+header{
+    text-wrap: nowrap;
+    margin-left: 4%;
+}
+#clouds{
+    width: fit-content;
+    margin: auto;
+    overflow: hidden;
+    display: inline-block;
+}
 img.cloud{
+    /* border: 0.1px solid red; */
     display: inline;
     margin-left: 1%;
     margin-right: 1%;
-    padding: none;
+    padding: 0;
     width: 5%;
     float: center;
 }
@@ -108,7 +139,8 @@ img.cloud{
     width: fit-content;
     padding: 2% 20%;
     margin: auto;
-    margin-top: 7.5%;
+    margin-top: 5%;
+    margin-bottom: 10%;
     font-size: 150%;
     text-decoration: none;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
@@ -127,23 +159,17 @@ img.cloud{
 }
 .descbox{
     width: 350px;
-    min-height: 400px;
-    text-align: justify;
-    border: 5px solid burlywood;
     padding: 0 6px;
-    border-radius: 10px;
-    margin: 20px;
+    margin-right: 30px;
     float: left;
     transition: 200ms ease-in-out all;
-    font-size: 120%;
 }
 .descbox:hover{
     translate: 0 -5px;
 }
-.descbox h2{
-    width: fit-content;
-    opacity: 0.75;
-    background-color: #de6101;
-    padding: 5px 10px;
-    border-radius: 10px;
+.descbox p{
+    min-height: 300px;
+}
+#aboutUsText{
+    padding: 30px;
 }