Skip to content

Commit

Permalink
updated homepage header and main video
Browse files Browse the repository at this point in the history
  • Loading branch information
enjiawu committed Nov 18, 2023
1 parent ce198bc commit a67f0be
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 19 deletions.
120 changes: 117 additions & 3 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,126 @@
body{
margin: 0px;
padding: 0px;
font-family: Roboto Mono;
}


ul{
list-style-type: none;
margin: 0;
padding: 0;
}

header{
background-color: bisque;
background-color: rgb(153, 176, 241);
color: black;
margin: 0 auto;
position: fixed;
line-height: 75px;
width: 100%;
z-index: 1000;
}

nav{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 0 50px 0 50px;
}

.logo{
font-family: Kristi;
text-align: center;
justify-content: center;
flex: 1 1 0;
}

a.logo{
text-decoration: none;
color: black;
font-size: 50px;
}

.navigation-buttons{
font-family: Roboto Mono;
font-size: 16px;
display: flex;
justify-content: flex-start;
flex: 1 1 0;
}

.navigation-buttons li{
transition: 0.15s;
}

.navigation-buttons li a{
text-decoration: none;
color: black;
padding: 0px 15px;
transition: 0.15s;
}

.navigation-buttons li:hover{
border-top: 3px solid black;
}

.navigation-buttons li:active{
border-top: 3px solid white;
}

.navigation-buttons li a:active{
color:white;
font-weight: bolder;
}

.socialmedia-buttons{
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0;
flex: 1 1 0;
}

.socialmedia-buttons img {
display: flex;
width: 35px;
height: 35px;
margin: 0 7px;
align-items: center;
}

main{
position: relative;
width: 100%;
height: 550px;
margin-top: 75px;
}

.featured-video{
position: absolute;
}

.featured-video iframe{
width:100%;
height: 100%;
}

.listen-now-button{
margin: 15px 0;
display: block;
text-align: center;
width: 90%;
height: 45px;
background-color: white;
border: 3px solid rgb(66, 66, 66);
border-radius: 5px;
}

.listen-now-button a{
text-decoration: none;
color: black;
font-family: Roboto Mono;
font-size: 28px;
letter-spacing: 30px;
}
42 changes: 26 additions & 16 deletions html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,42 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kristi&family=Radio+Canada:wght@700&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
<title>Home | Laufey</title>
</head>

<body>
<header>
<nav>
<div class = "navigation-buttons">
<a href="tour.html">Tour</a>
<a href="music.html">Music</a>
<a href="merch.html">Merch</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
<ul class = "navigation-buttons">
<li><a href="tour.html">Tour</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="merch.html">Merch</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<a class = "logo" href="index.html">LAUFEY</a>
<div class = "socialmedia-buttons">
<a href="https://www.tiktok.com/@laufey?lang=en" target="_blank"><img src="../images/socialmedia/tiktok.png" alt="TikTok"></a>
<a href="https://www.facebook.com/laufeymusic/" target="_blank"><img src="../images/socialmedia/facebook.png" alt="Facebook"></a>
<a href="https://twitter.com/laufey?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><img src="../images/socialmedia/twitter.png" alt="Twitter"></a>
<a href="https://www.instagram.com/laufey/?hl=en" target="_blank"><img src="../images/socialmedia/instagram.png" alt="Instagram"></a>
<a href="https://www.youtube.com/channel/UChpKl3waLmccNeYH9LGYjUQ" target="_blank"><img src="../images/socialmedia/youtube.png" alt="Youtube"></a>
<a href="https://open.spotify.com/artist/7gW0r5CkdEUMm42w9XpyZO" target="_blank"><img src="../images/socialmedia/spotify.png" alt="Spotify"></a>
<a href="https://music.apple.com/us/artist/laufey/1504424880" target="_blank"><img src="../images/socialmedia/applemusick.png" alt="Apple Music"></a>
</div>
<ul class = "socialmedia-buttons">
<li><a href="https://www.tiktok.com/@laufey?lang=en" target="_blank"><img src="../images/socialmedia/tiktok.png" alt="TikTok"></a></li>
<li><a href="https://www.facebook.com/laufeymusic/" target="_blank"><img src="../images/socialmedia/facebook.png" alt="Facebook"></a></li>
<li><a href="https://twitter.com/laufey?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><img src="../images/socialmedia/twitter.png" alt="Twitter"></a></li>
<li><a href="https://www.instagram.com/laufey/?hl=en" target="_blank"><img src="../images/socialmedia/instagram.png" alt="Instagram"></a></li>
<li><a href="https://www.youtube.com/channel/UChpKl3waLmccNeYH9LGYjUQ" target="_blank"><img src="../images/socialmedia/youtube.png" alt="Youtube"></a></li>
<li><a href="https://open.spotify.com/artist/7gW0r5CkdEUMm42w9XpyZO" target="_blank"><img src="../images/socialmedia/spotify.png" alt="Spotify"></a></li>
<li><a href="https://music.apple.com/us/artist/laufey/1504424880" target="_blank"><img src="../images/socialmedia/applemusic.png" alt="Apple Music"></a></li>
</ul>
</nav>
</header>

<main class = "featured-video">
<iframe src="https://www.youtube.com/embed/lSD_L-xic9o?si=baWnsLjwTF1PQ3Kx&amp;autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<button class = "listen-now-button">
<a href = "https://laufey.ffm.to/bewitched" target="_blank">LISTEN NOW
</button>
</main>


</body>

Expand Down

0 comments on commit a67f0be

Please sign in to comment.