Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@suneets1ngh
suneets1ngh authored Jan 15, 2021
1 parent 11ca96d commit f0d735a
Show file tree
Hide file tree
Showing 7 changed files with 145 additions and 46 deletions.
64 changes: 64 additions & 0 deletions footer.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
footer
{
background-image: linear-gradient(rgba(255, 255, 255, 0) , rgba(0, 0, 0, 0.507) );
backdrop-filter: blur(30px);
display: flex;
justify-content: space-around;
position: absolute;
text-align: center;
bottom: 0;
width: 100vw;
height: 70px;
padding: 10px;
}

@media only screen and (min-width: 720px) {

.github_card:hover::before{
content: '';
width: 250px;
height: 150px;
background-image: url(/images/githubcard.png);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
bottom: 15vh;
left: 22vw;
animation: card 0.29s forwards;
}

.linkedin_card:hover::before{
content: '';
width: 250px;
height: 150px;
background-image: url(/images/linkedincard.png);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
bottom: 15vh;
right: 35vw;
animation: card 0.29s forwards;
}


.medium_card:hover::before{
content: '';
width: 250px;
height: 150px;
background-image: url(/images/mediumcard.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
bottom: 15vh;
right: 8vw;
animation: card 0.29s forwards;
}

@keyframes card{
0% {opacity: 0.5; }
25% {transform: skewX(4deg);}
50% {transform: skewX(2deg);}
75% {transform: skewX(5deg);}
100% {opacity: 1; transform: skewX(6deg); }
}
}
Binary file added images/githubcard.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/linkedincard.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/mediumcard.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 11 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@
<html>
<head>
<title>V A P O R s</title>
<link rel="icon" href="/images/logo.png">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Vaporwave website design by Suneet Singh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-----------------------------------CSS-------------------------------------------->
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/footer.css">
<!---------------------------------------------------------------------------------->


Expand All @@ -28,6 +30,10 @@
</head>

<body>
<video autoplay muted loop id="myVideo" ">
<source src="/background/bg.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

<header>
<div id="logo">
Expand All @@ -42,16 +48,16 @@ <h1 id="neon" title="ネオン">NEON
</header>


<div id="wiv">
<p> <a href="https://en.m.wikipedia.org/wiki/Vaporwave#" style="color:#ff0000; font-family: 'Nikkyou Sans'; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: black;" >ヴェイパーウェイヴ </a>（またはベイパーウェーブ、英：英:<span style="font-family: 'Montserrat', sans-serif;">v a p o r w a v e</span>）は、2010年代初頭にWeb上の音楽コミュニティから生まれた音楽のジャンルである。<br>過去に大量生産されて忘れ去られた人工物や技術への郷愁、消費資本主義や大衆文化、1980年代のヤッピー文化、ニューエイジへの批評や風刺として特徴づけられる。基本的にパソコンとDAWを用いて、素材の加工と切り貼りだけで制作される。</p>
<div id="wiv" >
<p> <a class="first_word" href="https://en.m.wikipedia.org/wiki/Vaporwave#" style="color:#ff0000; font-family: 'Nikkyou Sans'; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: black;" >ヴェイパーウェイヴ </a>（またはベイパーウェーブ、英：英:<span style="font-family: 'Montserrat', sans-serif;">v a p o r w a v e</span>）は、2010年代初頭にWeb上の音楽コミュニティから生まれた音楽のジャンルである。<br>過去に大量生産されて忘れ去られた人工物や技術への郷愁、消費資本主義や大衆文化、1980年代のヤッピー文化、ニューエイジへの批評や風刺として特徴づけられる。基本的にパソコンとDAWを用いて、素材の加工と切り貼りだけで制作される。</p>
</div>


<footer>
<a href="mailto:[email protected]"><img src="/images/email.png" title="Email" alt="email" width="50px" height="50px" style="filter:drop-shadow(2px 2px 2px black)";></a>
<a href="https://github.com/singh-suneet"><img src="/images/githhub.png" title="Github" alt="github" width="40px" height="40px" style="filter:drop-shadow(2px 2px 2px black);"></a>
<a href="https://www.linkedin.com/in/suneet-singh-918491153" target="_blank"><img src='/images/linkedin.png' title="Linkedin" alt="linkedin" width="40px" height="40px" style="filter:drop-shadow(2px 2px 2px black) ;"></a>
<a href="https://suneets1ngh.medium.com/" target="_blank"><img src="/images/medium.png" title="Medium" alt="medium" width="40px" height="40px"style="filter:drop-shadow(2px 2px 2px black) ;></a>
<a href="https://github.com/singh-suneet"class="github_card"><img src="/images/githhub.png" title="Github" alt="github" width="40px" height="40px" style="filter:drop-shadow(2px 2px 2px black);"></a>
<a href="https://www.linkedin.com/in/suneet-singh-918491153" target="_blank" class="linkedin_card"><img src='/images/linkedin.png' title="Linkedin" alt="linkedin" width="40px" height="40px" style="filter:drop-shadow(2px 2px 2px black) ;"></a>
<a href="https://suneets1ngh.medium.com/" target="_blank" class="medium_card"><img src="/images/medium.png" title="Medium" alt="medium" width="40px" height="40px"style="filter:drop-shadow(2px 2px 2px black) ;></a>
</footer>
<script src="" async defer></script>
Expand Down
111 changes: 70 additions & 41 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,39 @@ body
background-attachment:fixed;
background-repeat:no-repeat ;
background-size:cover;


}

header{
display: block;
margin: 25px 10px 10px 15px;
margin: 25px 15px 20px 15px;
height: 80px;
}
video{
display: none;

}
@media only screen and ( min-width:720px )
{
video{
display: block;
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
margin: 0;
object-fit: cover;
z-index: -3;
opacity: 0;
animation: backgroundv 3s normal forwards;
animation-delay: 5s;
}
@keyframes backgroundv{
from{ opacity: 0;}
to{ opacity: 1;}
}
}
/*----------------Logo-------------------*/
#logo
{ /* background-color:black;*/
/* position:absolute ;*/
Expand All @@ -66,35 +90,24 @@ header{
}
#neon
{
color:#ff6ec7;
color:#ff2faf;
font-family: '851Gkktt';

-webkit-animation: glow 2.5s ease-in-out 2 alternate;
-moz-animation: glow 2.5s ease-in-out 2 alternate;
animation: glow 2.5s ease-in-out 2 alternate;

-webkit-animation: flickerAnimation .5s infinite;
-moz-animation: flickerAnimation .5s infinite;
-o-animation: flickerAnimation .5s infinite;
-webkit-animation: flickerAnimation .8s 1;
-moz-animation: flickerAnimation .8s 1;
-o-animation: flickerAnimation .8s 1;
animation: flickerAnimation .8s 1;
animation-delay: 3.5s;
text-shadow: 0 0 2px #fff, 0 0 2.1px #ff4da6, 0 0 2.2px #ff4da6, 0 0 2.3px #ff4da6;

}
@keyframes glow {
from {

}
to {

}
text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(255, 77, 166) 0px 0px 2.1px, rgb(255, 77, 166) 0px 0px 2.2px, rgb(255, 77, 166) 0px 0px 2.3px;
cursor: pointer;
}


@keyframes flickerAnimation {
0% { color:#ff6ec7; text-shadow: 0 0 1x #fff, 0 0 1.1px #fff, 0 0 1.2px #e60073, 0 0 1.3px #e60073, 0 0 1.4px #e60073, 0 0 1.5px #e60073, 0 0 1.6px #e60073;}
25% { color:black; }
30% { color: #ff6ec77e; }
30% { color:#a80469d8; }
40% { color: black; }
100% { color: #ff6ec7; text-shadow: 0 0 2px #fff, 0 0 2.1px #ff4da6, 0 0 2.2px #ff4da6, 0 0 2.3px #ff4da6, 0 0 2.4px #ff4da6, 0 0 2.5px #ff4da6, 0 0 2.6px #ff4da6;}
100% { color:#ff2faf; text-shadow: 0 0 2px #fff, 0 0 2.1px #ff4da6, 0 0 2.2px #ff4da6, 0 0 2.3px #ff4da6, 0 0 2.4px #ff4da6, 0 0 2.5px #ff4da6, 0 0 2.6px #ff4da6;}
}

#city
Expand All @@ -107,27 +120,56 @@ header{
top:20px;
font-family: 'Yellowtail', cursive;
font-weight:2;

cursor: pointer;
}
/*-----------------------------------------------------*/

/*-------------------------Menu------------------------*/
#menu_button
{
font-family: 'Nikkyou Sans';
display: inline-block;
float: right;
margin: 5px 15px;
transition-duration: 0.95s;
writing-mode: vertical-rl;
text-orientation: upright;
}
#menu_button:hover
{

transition: 1s;
color: #e60073;
cursor: pointer;

}

/*----------------------------------------------------*/

/*----------------------Red word--------------------*/
.first_word{
-webkit-animation: flickerAnimation2 .5s infinite;
-moz-animation: flickerAnimation2 .5s infinite;
-o-animation: flickerAnimation2 .5s infinite;
animation: flickerAnimation2 .7s ;
animation-delay: 5s;
}
@keyframes flickerAnimation2 {
0% { color:#ff0000; }
25% { color:black; }
30% { color: #cf06069a; }
40% { color: rgb(29, 0, 0); }
100% { color: #ff0000;}
}
.first_word:hover
{
animation: flickerAnimation3 .7s ;
}
@keyframes flickerAnimation3 {
0% { color:#ff0000; }
25% { color:black; }
30% { color: #cf06069a; }
40% { color: rgb(29, 0, 0); }
100% { color: #ff0000;}
}
/*--------------------------------------------------------*/


#wiv{
Expand All @@ -141,18 +183,5 @@ header{
backdrop-filter:blur(25px);
}

footer
{
background-image: linear-gradient(rgba(255, 255, 255, 0) , rgba(0, 0, 0, 0.507) );
backdrop-filter: blur(30px);
display: flex;
justify-content: space-around;
position: absolute;
text-align: center;
bottom: 0;
width: 100vw;
height: 70px;
padding: 10px;
}



0 comments on commit f0d735a

Please sign in to comment.