Skip to content

Commit

Permalink
recommit: changed layout and added desscription boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cr-Zay
Cr-Zay committed Nov 19, 2023
1 parent 17e149d commit f3c056a
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 37 deletions.
54 changes: 43 additions & 11 deletions site/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,23 @@
<link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>
<h1>Stranded Penguin</h1>
<h2>
<a href="about.html">by Cr.Zay</a>
</h2>
<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>
Expand All @@ -24,20 +37,39 @@ <h2>
<li>
<a href="about.html" title="About">About Us</a>
</li>
<li>
<a href="about.html" title="Get">Get!</a>
</li>

</ul>
<hr>
</nav>
<div id="clouds">
<div class="cloud">
<img src="images/cloud 2.png">

<div id="title">
<h1>Stranded Penguin</h1>
</div>
<div id="boxes">
<div class="descbox">
<h2>Penguinsss</h2>
<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="cloud">
<img src="images/cloud.png">
<div class="descbox">
<h2>Sparkly Stuf</h2>
<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. 🪙💎⭐'
</p>
</div>
<div class="cloud">
<img src="images/cloud 2.png">
<div class="descbox">
<h2>Bunnies</h2>
<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>
</div>
</div>
<a id="GetButton" href="https://apps.microsoft.com/detail/Stranded%20Penguin/9NM5TJ92ZPT9?launch=true&mode=mini" target="_blank">
Get Stranded Penguin!
</a>
</body>
</html>
106 changes: 80 additions & 26 deletions site/stylesheets/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,29 @@
body{
height: 12000px;
background: linear-gradient(180deg, #0096f2 0%, #137929 40%, #a36105 60%, #8f3e00 70%, #999999 80%, #5e5e5e 90%);
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%
/* , #a36105 60%, #8f3e00 70%, #999999 80%, #5e5e5e 90% */

);

font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
min-width: 600px;
/* min-width: 600px; */
font-size: 120%;
}

h1{
/* font-size: clamp(10vw, 10vw, 10vw); */
font-size: 10vw;
margin: auto;
width: fit-content;
opacity: 0.75;
background-color: #137929;
width: fit-content;
padding: 5px;
padding: 5px 10px;
border-radius: 15px;
transition: 200ms ease-in-out all;

text-wrap: wrap;
text-align: center;
}

a:link, a:visited{
color: black;
text-decoration-style: wavy;
Expand All @@ -29,10 +40,6 @@ a:active{
color: #8f3e00;
}

h1:hover{
translate: 0 5px;
transition: 200ms ease-in-out all;
}
hr{
border: 5px solid burlywood;
border-radius: 20px;
Expand All @@ -54,16 +61,15 @@ nav li{
font-variant: small-caps;
list-style: none;
border: 2px solid black;
width: 200px;
padding: 4px;
margin: 2px;
padding: 8px;
margin: 4px;
border-radius: 10px;
transition: 200ms ease-in-out all;
background-color: blanchedalmond;
display: inline;
display: inline-block;
}
nav li:hover{
padding: 8px;
scale: 120%;
transition: 200ms ease-in-out all;
}
nav li:nth-child(2):hover{
Expand All @@ -78,18 +84,66 @@ nav li:nth-child(4):hover{
background: linear-gradient(45deg, rgb(255, 230, 149), rgb(204, 156, 0));
transition: 200ms ease-in-out all;
}
#clouds{
text-align: center;
nav li:nth-child(5){
padding-left: 50px;
padding-right: 50px;
}
nav li:nth-child(5):hover{
background: linear-gradient(45deg, rgb(149, 255, 200), rgb(0, 204, 48));
transition: 200ms ease-in-out all;
}
img, .cloud{
img.cloud{
display: inline;
margin-left: 2%;
margin-right: 2%;
width: 25%;
transition: 100ms ease-in-out all;
margin-left: 1%;
margin-right: 1%;
padding: none;
width: 5%;
float: center;
}
#GetButton
{
display: block;
background-color: #de6101;
border-radius: 10px;
width: fit-content;
padding: 2% 20%;
margin: auto;
margin-top: 7.5%;
font-size: 150%;
text-decoration: none;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
transition: 200ms ease-in-out all;
}
img:hover{
#GetButton:hover{
translate: 0 -10px;
transform: scale(110%, 110%);
transition: 100ms ease-in-out all;
transition: 200ms ease-in-out all;
}
#boxes
{
width: fit-content;
margin: auto;
margin-top: 60px;
overflow: hidden;
}
.descbox{
width: 350px;
min-height: 400px;
text-align: justify;
border: 5px solid burlywood;
padding: 0 6px;
border-radius: 10px;
margin: 20px;
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;
}

0 comments on commit f3c056a

Please sign in to comment.