mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-07 16:15:54 -05:00
While Waiting!
This commit is contained in:
Squirrel-314
parent
6eef5e58c1
commit
1e7a8ed4bf
2 changed files with 105 additions and 174 deletions
148
index.html
148
index.html
|
|
@ -10,6 +10,7 @@
|
||||||
<title>Meet Squirrel</title>
|
<title>Meet Squirrel</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!-- Meet Squirrel -->
|
||||||
<div class="landing" id="meet">
|
<div class="landing" id="meet">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -59,6 +60,7 @@
|
||||||
<p class="about-vegetable">My newest and greatest JavaScript browser game! With all the high quality MS Paint images you could ever wish for, this game is simply fabulous! You can play the game <a href="https://squirrel-314.github.io/vegetable-dash">here</a>, or visit the GitHub repository <a href="https://github.com/squirrel-314/vegetable-dash">here</a>!</p>
|
<p class="about-vegetable">My newest and greatest JavaScript browser game! With all the high quality MS Paint images you could ever wish for, this game is simply fabulous! You can play the game <a href="https://squirrel-314.github.io/vegetable-dash">here</a>, or visit the GitHub repository <a href="https://github.com/squirrel-314/vegetable-dash">here</a>!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Gold Rush -->
|
||||||
<div class="block" id="gold-rush">
|
<div class="block" id="gold-rush">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -66,6 +68,53 @@
|
||||||
<p class="about-gold gold-text">A simple-but-promising incremental game, made with JavaScript. This was my first game, and recently had a complete redo, with many new features which you will have to find out about yourself! You can play it <a href="https://squirrel-314.github.io">here</a>, or check ou the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>, and if you use Linux, you can download the 0.9 version app <a href="download-gold-rush.html">here</a>!</p>
|
<p class="about-gold gold-text">A simple-but-promising incremental game, made with JavaScript. This was my first game, and recently had a complete redo, with many new features which you will have to find out about yourself! You can play it <a href="https://squirrel-314.github.io">here</a>, or check ou the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>, and if you use Linux, you can download the 0.9 version app <a href="download-gold-rush.html">here</a>!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Glish Translator
|
||||||
|
<div class="block" id="glish-translate">
|
||||||
|
<div class="text">
|
||||||
|
<br>
|
||||||
|
<h1>Glish Translate</h1>
|
||||||
|
<p class="about-glish">Have you ever had trouble with all of that slang and inelegible texting abbrevations? I certiantly have, but I feel I may be alone in this. Anyway, this Chrome extension is a dictonary that translates glish, more commonly know as text language. You can find the GitHub repository <a href="https://github.com/Squirrel-314/glish-translate">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- Incremental
|
||||||
|
<div class="block" id="incremental">
|
||||||
|
<div class="text">
|
||||||
|
<br>
|
||||||
|
<h1>Incremental</h1>
|
||||||
|
<p class="incremental-text">A simple incremental game template made with JavaScript, set up as a four lesson class. Please feel free to copy the code, but I'd prefer you changed the theme or link this site. You can find the GitHub repository <a href="https://github.com/Squirrel-314/incremental">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- Style
|
||||||
|
<div class="block" id="style">
|
||||||
|
<div class="text">
|
||||||
|
<br>
|
||||||
|
<h1>Style</h1>
|
||||||
|
<p class="style-text">Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites! You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>, or visit the site <a href="https://squirrel-314.github.io/style/">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- Hillside Township
|
||||||
|
<div class="block" id="hillside-township">
|
||||||
|
<div class="text">
|
||||||
|
<br>
|
||||||
|
<h1>Hillside Township</h1>
|
||||||
|
<p class="hillside-text">Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites! You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>, or visit the site <a href="https://squirrel-314.github.io/style/">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- The Schoolarly Bay
|
||||||
|
<div class="block" id="schoolarly-bay">
|
||||||
|
<div class="text">
|
||||||
|
<br>
|
||||||
|
<h1>The Schoolarly Bay</h1>
|
||||||
|
<p class="schoolarly-text">Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites! You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>, or visit the site <a href="https://squirrel-314.github.io/style/">here</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- Coming Soon -->
|
||||||
<div class="block" id="coming-soon">
|
<div class="block" id="coming-soon">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
@ -85,80 +134,45 @@
|
||||||
<li>!</li>
|
<li>!</li>
|
||||||
</ul>
|
</ul>
|
||||||
</h1>
|
</h1>
|
||||||
|
<br><br>
|
||||||
|
<h2>While you are waiting, check out these sites!</h2>
|
||||||
|
<br><a href="https://github.com/Squirrel-314/glish-translate">Glish Translate on GitHub</a>
|
||||||
|
<br><a href="https://github.com/Squirrel-314/incremental">Incremental on GitHub</a>
|
||||||
|
<br><a href="https://github.com/Squirrel-314/style">Style on GitHub</a> <a href="https://squirrel-314.github.io/style/">Style</a>
|
||||||
|
<br><a href="https://github.com/hillside-township/hillside-township.github.io">Hillside Township on GitHub</a> <a href="https://hillside-township.github.io">Hillside</a>
|
||||||
|
<br><a href="https://github.com/schoolarlybay/schoolarlybay.github.io">The Schoolarly Bay on GitHub</a> <a href="https://schoolarlybay.github.io/">The Schoolarly Bay</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</body>
|
||||||
|
<footer>
|
||||||
|
<div class="will-not-find-me-at">
|
||||||
<!--
|
<h1 class="find-me">You won't find me at</h1>
|
||||||
<div class="project" id="glish-translate">
|
<hr class="hr">
|
||||||
<br>
|
<a href="javascript:void"><i class="fab fa-reddit"></i></a>
|
||||||
<img class="display-image-dark" src="Images/cheese.png" alt="">
|
<a href="javascript:void"><i class="fab fa-twitch"></i></a>
|
||||||
<h2>Glish Translate</h2>
|
<a href="javascript:void"><i class="fab fa-dribbble"></i></a>
|
||||||
<h4>Have you ever had trouble with all of that slang and inelegible texting abbrevations? I certiantly have, but I feel I may be alone in this. Anyway, this Chrome extension is a dictonary that translates glish, more commonly know as text language.</h4>
|
<a href="javascript:void"><i class="fab fa-squarespace"></i></a>
|
||||||
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/glish-translate">here</a>.</p>
|
<a href="javascript:void"><i class="fab fa-linkedin-in"></i></a>
|
||||||
</div>
|
|
||||||
<div class="project" id="incremental">
|
|
||||||
<br>
|
|
||||||
<img class="display-image-dark" src="Images/cheese.png" alt="">
|
|
||||||
<h2>Incremental</h2>
|
|
||||||
<h4>A simple incremental game template made with JavaScript, set up as a four lesson class. Please feel free to copy the code, but I'd rather you changed the theme.</h4>
|
|
||||||
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/incremental">here</a>.</p>
|
|
||||||
</div>
|
|
||||||
<div class="project" id="style">
|
|
||||||
<br>
|
|
||||||
<img class="display-image-light" src="Images/style.png" alt="">
|
|
||||||
<h2>Style</h2>
|
|
||||||
<h4>Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites!</h4>
|
|
||||||
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p>
|
|
||||||
</div>
|
|
||||||
<div class="project" id="hillside">
|
|
||||||
<br>
|
|
||||||
<img class="display-image-dark" src="Images/lamp-post.png" alt="">
|
|
||||||
<h2>Hillside Township</h2>
|
|
||||||
<h4>Ours homes all have a place in our heart-and sometimes on the web! I'D LIKE TO MAKE IT ABSOLUTLY CLEAR THIS IS NOT THE NEW JERSEY HILLSIDE TOWNSHIP THIS ONE IS BETTER AND HAS A BETTER FAVICON. Now that I've made that clear, my <a href="https://github.com/PusheenMaster5">friend</a> and I made a website for our town.</h4>
|
|
||||||
<p>You can find the GitHub repository <a href="https://github.com/hillside-township/hillside-township.github.io">here</a>.</p>
|
|
||||||
</div>
|
|
||||||
<div class="project" id="schoolarly-bay">
|
|
||||||
<br>
|
|
||||||
<img class="display-image-light" src="Images/library-1.png" alt="">
|
|
||||||
<img class="display-image-light" src="Images/library-2.png" alt="">
|
|
||||||
<img class="display-image-light" src="Images/library-3.png" alt="">
|
|
||||||
<h2>The Schoolarly Bay</h2>
|
|
||||||
<h4>Scientific research papers! Publish research papers, read research papers, get paper cuts on research papers! Research papers for all!</h4>
|
|
||||||
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p>
|
|
||||||
</div>
|
|
||||||
<div id="personal">
|
|
||||||
<p>You won't find me at</p><br>
|
|
||||||
<hr>
|
|
||||||
<div class="find-me">
|
|
||||||
<a href="javascript:void"><i class="fab fa-reddit"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-twitch"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-dribbble"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-squarespace"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-linkedin-in"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-facebook-f"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-twitter"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-youtube"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-instagram"></i></a>
|
|
||||||
<a href="javascript:void"><i class="fab fa-medium"></i></a>
|
|
||||||
</div>
|
|
||||||
<p>You will find me at</p><br>
|
|
||||||
<hr>
|
|
||||||
<div class="find-me">
|
|
||||||
<a href="https://github.com/Squirrel-314"><i class="fab fa-github"></i></a>
|
|
||||||
<a href="https://stackoverflow.com/users/14818357/squirrel"><i class="fab fa-stack-overflow"></i></a>
|
|
||||||
<a href="https://codepen.io/squirrel-314"><i class="fab fa-codepen"></i></a>
|
|
||||||
</div>
|
|
||||||
<hr>
|
<hr>
|
||||||
|
<a href="javascript:void"><i class="fab fa-facebook-f"></i></a>
|
||||||
|
<a href="javascript:void"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a href="javascript:void"><i class="fab fa-youtube"></i></a>
|
||||||
|
<a href="javascript:void"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="javascript:void"><i class="fab fa-medium"></i></a>`
|
||||||
|
<hr class="hr">
|
||||||
|
<h1 class="find-me">You will find me at</h1>
|
||||||
|
<hr class="hr">
|
||||||
|
<a href="https://github.com/Squirrel-314"><i class="fab fa-github"></i></a>
|
||||||
|
<a href="https://stackoverflow.com/users/14818357/squirrel"><i class="fab fa-stack-overflow"></i></a>
|
||||||
|
<a href="https://codepen.io/squirrel-314"><i class="fab fa-codepen"></i></a>
|
||||||
|
<hr class="hr">
|
||||||
|
</div>
|
||||||
|
<div class="personal">
|
||||||
<i class="fab fa-linux"></i>
|
<i class="fab fa-linux"></i>
|
||||||
<p>Email | <a href="mailto:thehillsidetownship@gmail.com?subject=feedback">thehillsidetownship@gmail.com</a></p><br>
|
<p>Email | <a href="mailto:thehillsidetownship@gmail.com?subject=feedback">thehillsidetownship@gmail.com</a></p><br>
|
||||||
<p>Adress | Oak forest, acorn path, that tree.</p><br>
|
<p>Adress | Oak forest, acorn path, that tree.</p><br>
|
||||||
<p>Hillside Township | <a href="https://hillside-township.github.io/">https://hillside-township.github.io</a></p><br>
|
<p>Hillside Township | <a href="https://hillside-township.github.io/">https://hillside-township.github.io</a></p><br>
|
||||||
<img title="I like rainbows" id="linux-rainbow" src="Images/linux.png" alt="">
|
<img title="I like rainbows" id="linux-rainbow" src="Images/linux.png" alt="">
|
||||||
</div> -->
|
</div>
|
||||||
</body>
|
|
||||||
<footer>
|
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
131
styles.css
131
styles.css
|
|
@ -10,7 +10,7 @@ Main
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
//overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
|
|
@ -485,56 +485,6 @@ Coming Soon!
|
||||||
Main Sectors
|
Main Sectors
|
||||||
==================================================
|
==================================================
|
||||||
|
|
||||||
#glish-translate {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gold-rush {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #272727;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#incremental {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#style {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #282828;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hillside {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#schoolarly-bay {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #282828;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#squirrel {
|
|
||||||
height: 100vh;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
position: relative;
|
|
||||||
scroll-snap-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
#personal {
|
#personal {
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -547,7 +497,7 @@ Main Sectors
|
||||||
}
|
}
|
||||||
|
|
||||||
/*==================================================
|
/*==================================================
|
||||||
Other
|
Animations
|
||||||
==================================================
|
==================================================
|
||||||
|
|
||||||
@keyframes heavenly-glow {
|
@keyframes heavenly-glow {
|
||||||
|
|
@ -619,62 +569,18 @@ Other
|
||||||
}
|
}
|
||||||
|
|
||||||
/*==================================================
|
/*==================================================
|
||||||
Display Images
|
Personal
|
||||||
==================================================
|
==================================================
|
||||||
|
|
||||||
.display-image-dark {
|
.will-not-find-me-at {
|
||||||
width: 150px;
|
font-family: Nunito;
|
||||||
position: absolute;
|
|
||||||
bottom: 30px;
|
|
||||||
right: 60px;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: all .8s;
|
|
||||||
animation: darkness-grows 3s infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.display-image-dark:hover {
|
|
||||||
transform: rotateX(360deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-image-light {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 30px;
|
|
||||||
right: 60px;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: all .8s;
|
|
||||||
animation: heavenly-glow 3s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-image-light:hover {
|
|
||||||
transform: rotateY(360deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#schoolarly-bay img:nth-child(2) {
|
|
||||||
bottom: 25%;
|
|
||||||
left: 5%;
|
|
||||||
width: 175px;
|
|
||||||
height: 175px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#schoolarly-bay img:nth-child(3) {
|
|
||||||
bottom: 20%;
|
|
||||||
right: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#schoolarly-bay img:nth-child(4) {
|
|
||||||
bottom: 10%;
|
|
||||||
left: 25%;
|
|
||||||
width: 125px;
|
|
||||||
height: 125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*==================================================
|
|
||||||
End Section
|
|
||||||
==================================================
|
|
||||||
|
|
||||||
.find-me {
|
.find-me {
|
||||||
|
margin: 50px 50px 0 50px;;
|
||||||
|
}
|
||||||
|
|
||||||
|
.will-not-find-me-at {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -682,7 +588,7 @@ End Section
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.find-me a {
|
.will-not-find-me-at a {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
background-color: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
|
|
@ -702,12 +608,12 @@ i {
|
||||||
margin-top: 35%;
|
margin-top: 35%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.find-me a:hover i {
|
.will-not-find-me-at a:hover i {
|
||||||
transform: scale(1.5);
|
transform: scale(1.5) rotate(360deg);
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
.find-me a:hover {
|
.will-not-find-me-at a:hover {
|
||||||
background-color: #262626;
|
background-color: #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -720,7 +626,18 @@ i {
|
||||||
margin-bottom: 75px;
|
margin-bottom: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #262626;
|
||||||
|
opacity: .2;
|
||||||
|
margin: 25px 75px;
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background-color: #262626;
|
||||||
|
opacity: 0;
|
||||||
|
margin: 0 25px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue