mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2024-11-07 08:05:54 -05:00
643 lines
11 KiB
CSS
643 lines
11 KiB
CSS
/*==================================================
|
|
Main
|
|
==================================================*/
|
|
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
//overflow: hidden;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/*==================================================
|
|
Common Classes
|
|
==================================================*/
|
|
|
|
.block {
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.next {
|
|
height: 80px;
|
|
width: 80px;
|
|
background-color: #fff;
|
|
color: aquamarine;
|
|
position: fixed;
|
|
bottom: 50px;
|
|
right: 50px;
|
|
box-shadow: 0 0 8px #262626;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 250%;
|
|
border-radius: 50%;
|
|
transition: 0.8s;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.last {
|
|
height: 80px;
|
|
width: 80px;
|
|
background-color: #fff;
|
|
color: aquamarine;
|
|
position: fixed;
|
|
bottom: 50px;
|
|
left: 50px;
|
|
box-shadow: 0 0 8px #262626;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 250%;
|
|
border-radius: 50%;
|
|
transition: 0.8s;
|
|
font-weight: 900;
|
|
opacity: 0;
|
|
}
|
|
|
|
.next:hover {
|
|
transform: rotate(720deg);
|
|
}
|
|
|
|
.last:hover {
|
|
transform: rotate(720deg);
|
|
}
|
|
|
|
.arrow {
|
|
animation: nudge 3s linear infinite;
|
|
transition: .2s;
|
|
transform: scale(1);
|
|
}
|
|
|
|
@keyframes nudge {
|
|
0% {
|
|
margin-right: 0px;
|
|
}
|
|
20% {
|
|
margin-right: -8px;
|
|
}
|
|
40% {
|
|
margin-right: -2px;
|
|
}
|
|
60% {
|
|
margin-right: -8px;
|
|
}
|
|
80% {
|
|
margin-right: 0px;
|
|
}
|
|
100% {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
|
|
/* Progress */
|
|
|
|
.progress {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 75px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 0px;
|
|
}
|
|
|
|
.progress li {
|
|
position: relative;
|
|
height: 25px;
|
|
width: 25px;
|
|
border-radius: 50%;
|
|
background-color: #d6d6d6;
|
|
color: #f9f9f9;
|
|
margin: 0 15px;
|
|
transition: 0.2s;
|
|
box-shadow: inset 2px 2px 10px #fff,
|
|
0 0 2.5px #262626;
|
|
}
|
|
|
|
.progress li:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
#meetIndicator {
|
|
background-color: #262626;
|
|
}
|
|
|
|
/*==================================================
|
|
Landing
|
|
==================================================*/
|
|
|
|
.landing {
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.text {
|
|
text-align: center;
|
|
font-family: Nunito;
|
|
}
|
|
|
|
/* Hi Animation */
|
|
|
|
.hi {
|
|
padding: 50px;
|
|
font-size: 250%;
|
|
display: inline-block;
|
|
transition: all .3s;
|
|
transition-delay: .3s;
|
|
}
|
|
|
|
.landing:hover .hi {
|
|
color: #f9f9f9;
|
|
font-size: 280%;
|
|
background-color: #262626;
|
|
border-radius: 2%;
|
|
}
|
|
|
|
.hi:before, .hi:after {
|
|
content: "";
|
|
position: absolute;
|
|
height: 50px;
|
|
width: 50px;
|
|
background-color: #262626;
|
|
border-radius: 50%;
|
|
transition: all 0.3s;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hi:before {
|
|
left: -50px;
|
|
}
|
|
|
|
.hi:after {
|
|
right: -50px;
|
|
}
|
|
|
|
.landing:hover .hi:before {
|
|
left: 50%;
|
|
transform: scale(1.5);
|
|
animation: hi-opacity .6s 1 forwards;
|
|
}
|
|
|
|
.landing:hover .hi:after {
|
|
right: 50%;
|
|
transform: scale(1.5);
|
|
animation: hi-opacity .6s 1 forwards;
|
|
}
|
|
|
|
@keyframes hi-opacity {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* About Me */
|
|
|
|
.about-me {
|
|
margin: 0 80px;
|
|
font-size: 120%;
|
|
transform: translateY(-50px);
|
|
opacity: 0;
|
|
transition: all 1.5s;
|
|
transition-delay: .6s;
|
|
}
|
|
|
|
.landing:hover .about-me {
|
|
transform: translateY(2px);
|
|
opacity: 1;
|
|
}
|
|
|
|
/*==================================================
|
|
Vegetable Dash
|
|
==================================================*/
|
|
|
|
/* General Information */
|
|
|
|
.meet-vegetable {
|
|
|
|
}
|
|
|
|
.about-vegetable {
|
|
margin: 50px;
|
|
font-size: 120%;
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transition: all 1s;
|
|
transition-delay: 2s;
|
|
}
|
|
|
|
/* Opening Animation */
|
|
|
|
#vegetable-dash:hover .about-vegetable {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.space {
|
|
width: 10px;
|
|
}
|
|
|
|
.smokey {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.smokey li {
|
|
list-style: none;
|
|
transition: 1.5s;
|
|
transform: rotate(45deg) translateY(-200px);
|
|
opacity: 0;
|
|
filter: blur(50px);
|
|
}
|
|
|
|
#vegetable-dash:hover li {
|
|
transform: rotate(0) translateY(0);
|
|
opacity: 1;
|
|
filter: blur(0);
|
|
}
|
|
|
|
.smokey li:nth-child(2) {
|
|
transition-delay: .1s;
|
|
}
|
|
|
|
.smokey li:nth-child(3) {
|
|
transition-delay: .2s;
|
|
}
|
|
|
|
.smokey li:nth-child(4) {
|
|
transition-delay: .3s;
|
|
}
|
|
|
|
.smokey li:nth-child(5) {
|
|
transition-delay: .4s;
|
|
}
|
|
|
|
.smokey li:nth-child(6) {
|
|
transition-delay: .5s;
|
|
}
|
|
|
|
.smokey li:nth-child(7) {
|
|
transition-delay: .6s;
|
|
}
|
|
|
|
.smokey li:nth-child(8) {
|
|
transition-delay: .7s;
|
|
}
|
|
|
|
.smokey li:nth-child(9) {
|
|
transition-delay: .8s;
|
|
}
|
|
|
|
.smokey li:nth-child(10) {
|
|
transition-delay: .9s;
|
|
}
|
|
|
|
.smokey li:nth-child(11) {
|
|
transition-delay: 1s;
|
|
}
|
|
|
|
.smokey li:nth-child(12) {
|
|
transition-delay: 1.1s;
|
|
}
|
|
|
|
.smokey li:nth-child(13) {
|
|
transition-delay: 1.2s;
|
|
}
|
|
|
|
.smokey li:nth-child(14) {
|
|
transition-delay: 1.3s;
|
|
}
|
|
|
|
.smokey li:nth-child(15) {
|
|
transition-delay: 1.4s;
|
|
}
|
|
|
|
/*==================================================
|
|
Gold Rush
|
|
==================================================*/
|
|
|
|
/* General */
|
|
|
|
#gold-rush h1 {
|
|
margin: 25px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.about-gold {
|
|
margin: 50px;
|
|
font-size: 120%;
|
|
}
|
|
|
|
/* Animation */
|
|
|
|
#gold-rush h1 {
|
|
background: linear-gradient(90deg, #000, #fff, #000);
|
|
background-size: 80%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
#gold-rush:hover h1 {
|
|
animation: show-text 1.2s 3 forwards;
|
|
}
|
|
|
|
@keyframes show-text {
|
|
0% {
|
|
background-position: -100%;
|
|
}
|
|
100% {
|
|
background-position: 250%;
|
|
}
|
|
}
|
|
|
|
.gold-text {
|
|
animation: bounce-out 3s ease-in forwards;
|
|
transform: translate(1000px, 500px);
|
|
margin: auto;
|
|
transition: 0.8s;
|
|
}
|
|
|
|
#gold-rush:hover .gold-text {
|
|
animation: bounce-in 3s ease-in forwards;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
transform: translateX(500px) translateY(-80px) scale(0);
|
|
width: 500px;
|
|
opacity: 0.2;
|
|
}
|
|
75% {
|
|
transform: translateX(200px) translateY(80px) scale(0.8);
|
|
width: 500px;
|
|
opacity: .8;
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
width: 500px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes bounce-out {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
width: 500px;
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
transform: translateX(200px) translateY(80px) scale(0.8);
|
|
width: 500px;
|
|
opacity: .8;
|
|
}
|
|
100% {
|
|
transform: translateX(500px) translateY(-80px) scale(0);
|
|
width: 500px;
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
/*==================================================
|
|
Coming Soon!
|
|
==================================================*/
|
|
|
|
.coming {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.coming li {
|
|
transition: 0.2s;
|
|
margin: 0 3px;
|
|
}
|
|
|
|
.coming:hover li {
|
|
animation: shake 1s infinite alternate;
|
|
margin: 0 4px;
|
|
text-shadow: 0 25px 2px #262626;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
transform: rotate(10deg) scaleY(1.2);
|
|
}
|
|
20% {
|
|
transform: rotate(-10deg) scaleY(1);
|
|
}
|
|
40% {
|
|
transform: rotate(10deg) scaleY(1.2);
|
|
}
|
|
60% {
|
|
transform: rotate(-10deg) scaleY(1);
|
|
}
|
|
80% {
|
|
transform: rotate(10deg) scaleY(1.2);
|
|
}
|
|
100% {
|
|
transform: rotate(-10deg) scaleY(1);
|
|
}
|
|
}
|
|
|
|
.coming:hover li:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.coming:hover li:nth-child(4) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.coming:hover li:nth-child(6) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.coming:hover li:nth-child(8) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.coming:hover li:nth-child(10) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.coming:hover li:nth-child(12) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
/*==================================================
|
|
Main Sectors
|
|
==================================================
|
|
|
|
#personal {
|
|
height: auto;
|
|
width: 100%;
|
|
background-color: #f5f5f5;
|
|
position: relative;
|
|
overflow: scroll;
|
|
scroll-snap-align: start;
|
|
text-align: center;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/*==================================================
|
|
Animations
|
|
==================================================
|
|
|
|
@keyframes heavenly-glow {
|
|
0% {
|
|
box-shadow: none;
|
|
}
|
|
50% {
|
|
box-shadow: 5px 5px 5px whitesmoke,
|
|
5px -5px 5px whitesmoke,
|
|
-5px 5px 5px whitesmoke,
|
|
-5px -5px 5px whitesmoke;
|
|
}
|
|
100% {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@keyframes darkness-grows {
|
|
0% {
|
|
box-shadow: none;
|
|
}
|
|
50% {
|
|
box-shadow: 5px 5px 5px #262626,
|
|
5px -5px 5px #262626,
|
|
-5px 5px 5px #262626,
|
|
-5px -5px 5px #262626;
|
|
}
|
|
100% {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@keyframes rainbow-glow {
|
|
0% {
|
|
box-shadow: none;
|
|
}
|
|
50% {
|
|
box-shadow: 2px 2px 1px red,
|
|
4px 4px 1px orange,
|
|
6px 6px 1px yellow,
|
|
8px 8px 1px lightgreen,
|
|
10px 10px 1px lightblue,
|
|
12px 12px 1px purple,
|
|
|
|
2px -2px 1px red,
|
|
4px -4px 1px orange,
|
|
6px -6px 1px yellow,
|
|
8px -8px 1px lightgreen,
|
|
10px -10px 1px lightblue,
|
|
12px -12px 1px purple,
|
|
|
|
-2px 2px 1px red,
|
|
-4px 4px 1px orange,
|
|
-6px 6px 1px yellow,
|
|
-8px 8px 1px lightgreen,
|
|
-10px 10px 1px lightblue,
|
|
-12px 12px 1px purple,
|
|
|
|
-2px -2px 1px red,
|
|
-4px -4px 1px orange,
|
|
-6px -6px 1px yellow,
|
|
-8px -8px 1px lightgreen,
|
|
-10px -10px 1px lightblue,
|
|
-12px -12px 1px purple;
|
|
}
|
|
100% {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/*==================================================
|
|
Personal
|
|
==================================================
|
|
|
|
.will-not-find-me-at {
|
|
font-family: Nunito;
|
|
}
|
|
|
|
.find-me {
|
|
margin: 50px 50px 0 50px;;
|
|
}
|
|
|
|
.will-not-find-me-at {
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
flex-wrap: wrap;
|
|
margin: auto;
|
|
}
|
|
|
|
.will-not-find-me-at 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%;
|
|
}
|
|
|
|
.will-not-find-me-at a:hover i {
|
|
transform: scale(1.5) rotate(360deg);
|
|
color: whitesmoke;
|
|
}
|
|
|
|
.will-not-find-me-at a:hover {
|
|
background-color: #262626;
|
|
}
|
|
|
|
#linux-rainbow {
|
|
size: auto;
|
|
max-width: 60%;
|
|
max-height: 60%;
|
|
border-radius: 50px;
|
|
animation: rainbow-glow 5s infinite;
|
|
margin-bottom: 75px;
|
|
}
|
|
|
|
.hr {
|
|
display: block;
|
|
width: 100%;
|
|
background-color: #262626;
|
|
opacity: .2;
|
|
margin: 25px 75px;
|
|
}
|
|
|
|
hr {
|
|
display: block;
|
|
width: 100%;
|
|
background-color: #262626;
|
|
opacity: 0;
|
|
margin: 0 25px;
|
|
}
|