hnasheralneam/profile-site
1
0
Fork 0
mirror of https://github.com/hnasheralneam/hnasheralneam.github.io.git synced 2024-11-07 16:15:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

hi

Browse source
This commit is contained in:
Squirrel-314 2020-12-02 18:19:16 -05:00
parent 9e760ee6ac
commit 4294a35202
2 changed files with 72 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
index.html
View file

@ -2,6 +2,8 @@
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="main.js" charset="utf-8"></script>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<title>Meet Squirrel</title> <title>Meet Squirrel</title>
</head> </head>
@ -56,9 +58,24 @@
<p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p> <p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p>
</div> </div>
<div id="personal"> <div id="personal">
<p>Email | <a href="mailto:thehillsidetownship@gmail.com?subject=feedback">thehillsidetownship@gmail.com</a></p> <p>You won't find me at</p><br>
<p>Adress | Oak forest, acorn path, that tree.</p> <hr>
<p>Hillside Township | <a href="https://hillside-township.github.io/">https://hillside-township.github.io</a></p> <div class="find-me">
<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>
<hr>
<i class="fab fa-linux"></i>
<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>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> </body>

63
styles.css
View file

@ -97,16 +97,14 @@ Main Sectors
} }
#personal { #personal {
height: 100vh; height: auto;
width: 100%; width: 100%;
background-color: whitesmoke; background-color: whitesmoke;
position: relative; position: relative;
overflow: scroll; overflow: scroll;
scroll-snap-align: start; scroll-snap-align: start;
display: flex; text-align: center;
flex-wrap: wrap; overflow-y: hidden;
align-items: center;
justify-content: center;
} }
/*================================================== /*==================================================
@ -223,20 +221,20 @@ Display Images
} }
#schoolarly-bay img:nth-child(2) { #schoolarly-bay img:nth-child(2) {
bottom: 20%; bottom: 25%;
left: 20%; left: 5%;
width: 175px; width: 175px;
height: 175px; height: 175px;
} }
#schoolarly-bay img:nth-child(3) { #schoolarly-bay img:nth-child(3) {
bottom: 20%; bottom: 20%;
left: 20%; right: 10%;
} }
#schoolarly-bay img:nth-child(4) { #schoolarly-bay img:nth-child(4) {
bottom: 20%; bottom: 10%;
left: 20%; left: 25%;
width: 125px; width: 125px;
height: 125px; height: 125px;
} }
@ -245,10 +243,53 @@ Display Images
End Section End Section
==================================================*/ ==================================================*/
.find-me {
display: flex;
justify-content: center;
text-align: center;
flex-wrap: wrap;
margin: auto;
}
.find-me a {
width: 90px;
height: 90px;
background-color: #f1f1f1;
margin: 10px;
border-radius: 30%;
color: #10ac84;
box-shadow: 0 5px 15px -5px #00000070;
position: relative;
overflow: hidden;
transition: all 0.2s;
}
i {
line-height: 90px;
font-size: 25px;
transition: all 0.2s;
margin-top: 35%;
}
.find-me a:hover i {
transform: scale(1.5);
color: whitesmoke;
}
.find-me a:hover {
background-color: #262626;
}
#linux-rainbow { #linux-rainbow {
size: auto; size: auto;
max-width: 80%; max-width: 60%;
max-height: 60%; max-height: 60%;
border-radius: 50px; border-radius: 50px;
animation: rainbow-glow 5s infinite; animation: rainbow-glow 5s infinite;
margin-bottom: 75px;
}
hr {
display: block;
width: 100%;
} }