Click the buttons below to navigate the page or access the code and assets repository on GitHub.
Embedded Files
This portfolio project showcases the homepage of a fictional music website called “Mixzer”, inspired by Spotify’s homepage. The structure was built with HTML5, while the visual design was created with CSS. All clickable elements feature hover or click interactions implemented with CSS.
Character input search box
Hover interactions
Custom favicon
Notifications / information displayed in overlay panels
Check the code below:
index.HTML
index.HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mixzer</title>
<link rel="shortcut icon" type="imagex/png" href="assets/icons/weblogo.png">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="vars.css">
<link rel="stylesheet" href="sidebar-footer.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="sidebar">
<nav class="sidebar_navigation">
<div class="logo">
<a href="">
<img src="./assets/icons/Frame 6.png" alt="logo spotify">
</a>
</div>
<ul>
<li class="alinhamento1">
<a href="">
<img class="pngbt" src="assets/icons/house-chimney-solid 1.png" alt="home icon" />
<span>Início</span>
</a>
</li>
<li class="alinhamento2">
<a href="">
<img class="pngbt" src="assets/icons/magnifying-glass-solid 1.png" alt="search icon" />
<span>Buscar</span>
</a>
</li>
</ul>
</nav>
<div class="library">
<div class="library__content">
<button class="library__button">
<img class="bigicon" src="assets/icons/lucide_library-big.png" alt="library icon">
<span class="bigtext" >Sua Biblioteca</span>
</button>
<img class="add-icon" src="assets/icons/AddOutlined.png" alt="add icon">
</div>
<section class="section-playlist">
<div class="section-playlist__content">
<span class="text__title">
Crie sua playlist
</span>
<span class="text__subtitle">
É fácil, vamos te ajudar
</span>
<button class="section-playlist__button">
<span>Criar playlist</span>
</button>
</div>
</section>
<div class="cookies">
<a href="">cookies</a>
</div>
<div class="languages">
<button class="languages__button">
<img class="pngbt" src="assets/icons/world.png" alt="icon world">
<span class="languages__text">Português do Brasil</span>
</button>
</div>
</div>
</div>
<div class="footer">
<div class="footer__text">
<span class="footer__title">TESTAR O PREMIUM DE GRAÇA</span>
<span class="footer__subtitle">Increva-se para ouvir músicas ilimitadas e podcasts só com alguns anúncios. Não precisa de cartão de crédito.</span>
</div>
<button class="footer__bt">Inscreva-se grátis</button>
</div>
<main>
<div class="main-container">
<nav class="header__navigation">
<div class="left-navigation">
<div class="navigation">
<button class="arrow-left">
<img src="assets/icons/small-left.png" alt="seta esquerda">
</button>
<button class="arrow-left">
<img src="assets/icons/small-right.png" alt="seta direita">
</button>
</div>
<div class="header__search">
<img src="assets/icons/search.png" alt="">
<input id="search-input" type="text" maxlength="800" placeholder="O que você quer ouvir?">
</div>
</div>
<div class="header__login">
<button class="subscribe">Inscreva-se</button>
<button class="login">Entrar</button>
</div>
</nav>
<div class="main-card">
<div class="greeting">
<span class="greeting__title">Boa tarde</span>
<span class="greeting__subtitle">Navegar por todas as seções</span>
</div>
<div class="genre-cards">
<div class="card card-1">
<span class="card-title">Feito para você</span>
<img class="albumcover" src="assets/img/3.jpeg" alt="capa album">
</div>
<div class="card card-2">
<span class="card-title">Pop music</span>
<img class="albumcover" src="assets/img/2.png" alt="capa album">
</div>
<div class="card card-3">
<span class="card-title">Pagode</span>
<img class="albumcover" src="assets/img/8.jpeg" alt="capa album">
</div>
<div class="card card-4">
<span class="card-title">Funk</span>
<img class="albumcover" src="assets/img/9.jpeg" alt="capa album">
</div>
<div class="card card-5">
<span class="card-title">Rock</span>
<img class="albumcover" src="assets/img/11.jpeg" alt="capa album">
</div>
<div class="card card-6">
<span class="card-title">Indie</span>
<img class="albumcover" src="assets/img/13.jpeg" alt="capa album">
</div>
<div class="card card-7">
<span class="card-title">Lo-fi</span>
<img class="albumcover" src="assets/img/14.jpeg" alt="capa album">
</div>
<div class="card card-8">
<span class="card-title">Hip-hop</span>
<img class="albumcover" src="assets/img/12.jpeg" alt="capa album">
</div>
<div class="card card-9">
<span class="card-title">Sertanejo</span>
<img class="albumcover" src="assets/img/7.jpeg" alt="capa album">
</div>
</div>
</div>
<div class="all-artists">
<div>
<span class="artist-title">Artistas populares</span>
</div>
<div class="artistroll">
<div class="artist">
<img class="artistimg" src="assets/img/artists/taylor.png">
<span class="artistname">Taylor Swift</span>
<div class="escutarbt">
<span class="escutar-text" >Escutar</span>
<img class="pngbt" src="assets/icons/clarity_play-solid.png">
</div>
</div>
<div class="artist">
<img class="artistimg" src="assets/img/artists/nivs.png">
<span class="artistname">Gusttavo Lima</span>
<div class="escutarbt">
<span class="escutar-text" >Escutar</span>
<img class="pngbt" src="assets/icons/clarity_play-solid.png">
</div>
</div>
<div class="artist">
<img class="artistimg" src="assets/img/artists/cintage.png">
<span class="artistname">Vintage Culture</span>
<div class="escutarbt">
<span class="escutar-text" >Escutar</span>
<img class="pngbt" src="assets/icons/clarity_play-solid.png">
</div>
</div>
<div class="artist">
<img class="artistimg" src="assets/img/artists/adele.png">
<span class="artistname">Adele</span>
<div class="escutarbt">
<span class="escutar-text" >Escutar</span>
<img class="pngbt" src="assets/icons/clarity_play-solid.png">
</div>
</div>
<div class="artist">
<img class="artistimg" src="assets/img/artists/billie.png">
<span class="artistname">Billie Eilish</span>
<div class="escutarbt">
<span class="escutar-text" >Escutar</span>
<img class="pngbt" src="assets/icons/clarity_play-solid.png">
</div>
</div>
<div class="artist">
<img class="artistimg" src="assets/img/artists/tai.png">
<span class="artistname">Tai Verdes</span>
<div class="escutarbt">
<span class="escutar-text" >Escutar</span>
<img class="pngbt" src="assets/icons/clarity_play-solid.png">
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
sidebar-footer.css
sidebar-footer.css
body {
background-color: #000;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 12px;
width: 300px;
}
.sidebar_navigation {
background-color: #121212;
border-radius: 8px;
padding: 16px 0 0 16px;
}
.sidebar_navigation .logo {
background: #121212;
display: flex;
border-radius: 8px;
padding: 16px 0 0 8px;
}
.sidebar_navigation .logo img {
width: 96px;
}
.sidebar nav ul {
margin-top: 16px;
padding: 0 20px 10px 10px;
}
.sidebar ul li {
padding: 10px 0;
}
.sidebar nav ul li a {
color: #b3b3b3;
text-decoration: none;
font-weight: 600;
font-size: 14px;
font-family: "DM Sans", sans-serif;
}
.alinhamento1 {
display: flex;
align-content: center;
}
.alinhamento2 {
display: flex;
align-content: center;
align-items: center;
align-self: center;
text-align: center;
}
.pngbt {
width: 16px;
color: #b3b3b3;
}
.bigicon {
width: 24px;
height: 24px;
}
.library {
background-color: #121212;
border-radius: 8px;
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 4px 8px;
color: #b3b3b3;
font-weight: 600;
font-size: 14px;
margin-top: 12px;
}
.library .library__content {
display: flex;
justify-content: space-between;
padding-left: 10px;
}
.library .library__button {
display: flex;
margin-right: 10px;
color: #b3b3b3;
background-color: transparent;
border: 0px;
font-size: 14px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
text-align: center;
text-decoration: none;
text-transform: none;
padding: 20px 10px;
}
.library .bigtext {
margin-top: 4px;
padding-left: 4px;
}
.library .library__content .add-icon {
width: 24px;
height: 24px;
margin: 20px 10px;
cursor: pointer;
}
.section-playlist {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
background-color: #242424;
color: #fff;
font-weight: 600;
font-size: 14px;
padding: 16px 16px;
font-family: "DM Sans", sans-serif;
border-radius: 8px;
}
.section-playlist .section-playlist__content {
display: flex;
flex-direction: column;
}
.section-playlist__content .text__title {
font-weight: 700;
padding-bottom: 14px;
}
.section-playlist__content .text__subtitle {
font-weight: 500;
font-size: 12px;
padding-bottom: 14px;
}
.section-playlist__content .section-playlist__button {
display: flex;
justify-content: center;
background-color: white;
color: black;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
text-decoration: none;
text-transform: none;
padding: 10px;
border: 0px;
width: 113px;
margin-top: 12px;
cursor: pointer;
}
.section-playlist__content .section-playlist__button:hover {
background-color: rgb(254, 242, 255);
}
.cookies {
margin: 25px 20px;
}
.cookies a{
color: #b3b3b3;
font-weight: 500;
font-size: 12px;
text-decoration: none;
}
.cookies a:hover{
text-decoration: underline;
}
.languages .languages__button {
background-color: transparent;
border: 1px solid #878787;
border-radius: 20px;
color: #b3b3b3;
cursor: pointer;
align-items: center;
font-weight: bold;
width: 180px;
margin: 8px 8px 16px 8px;
padding: 8px;
}
.languages .languages__button:hover {
background-color: #1b1b1b;
}
.languages .languages__text {
margin-left: 8px;
}
.footer {
background-image: linear-gradient(to right, rgb(169, 27, 212), rgb(87, 207, 255));
position: fixed;
display: flex;
justify-content: space-between;
width: 100%;
bottom: 0;
height: 64px;
align-items: center;
padding: 0px 24px 0px 24px;
z-index: 1000;
}
.footer__text {
display: flex;
flex-direction: column;
}
.footer__title {
color: #fff;
font-family: "DM Sans", sans-serif;
font-weight: 600;
font-size: 14px;
margin-bottom: 8px;
}
.footer__subtitle {
color: #fff;
font-family: "DM Sans", sans-serif;
font-weight: 500;
font-size: 14px;
}
.footer .footer__bt {
color: #000;
background-color: white;
font-size: 14px;
font-weight: 700;
font-family: "DM Sans", sans-serif;
text-align: center;
text-decoration: none;
text-transform: none;
border-radius: 20px;
padding: 10px 16px 10px 16px;
border: 0px;
cursor: pointer;
margin-right: 48px;
}
.footer .footer__bt:hover {
background-color: azure;
}
main.css
main.css
/* HEADER */
.main-container {
max-width: 100vw;
height: 100vh;
margin-left: 324px;
margin-right: 12px;
margin-top: 12px;
margin-bottom: 200px;
}
.header__navigation {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
border-radius: 8px;
background-color: #121212;
}
.left-navigation {
display: flex;
}
.header__navigation .navigation {
display: flex;
justify-content: space-around;
align-items: center;
}
.header__navigation .navigation .arrow-left {
margin-right: 1.25rem;
}
.arrow-left, .arrow-right {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--bg-icon);
background-color: var(--bg-arrow-color);
border-radius: 50%;
border: none;
cursor: pointer;
}
.header__login {
display: flex;
align-items: center;
}
.header__search {
display: flex;
align-items: center;
width: 400px;
height: 48px;
margin-left: 8px;
background-color: #242424;
border-radius: 500px;
border: 1px solid transparent;
}
.header__search img{
width: 16px;
height: 16px;
margin-left: 16px;
}
.header__search input {
background: transparent;
border: none;
padding: 0 100px 0 12px;
color: #fff;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: none;
}
.header__login .subscribe {
color: #a7a7a7;
font-size: 16px;
font-weight: 600;
background-color: transparent;
margin-right: 32px;
border: none;
cursor: pointer;
}
.header__login .subscribe:hover {
color: #fff;
}
.header__login .login {
padding: 10px 16px;
color: #000;
font-size: 16px;
font-weight: 700;
border-radius: 20px;
border: transparent;
cursor: pointer;
}
.header__login .login:hover {
background-color: rgb(254, 242, 255);
}
.main-card {
margin-top: 12px;
background-color: #121212;
border-radius: 8px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.main-card .greeting {
display: flex;
flex-direction: column;
font-family: var(--font-dm-sans);
color: #fff;
}
.greeting .greeting__title {
font-weight: 700;
font-size: 24px;
margin-bottom: 40px;
}
.greeting .greeting__subtitle {
font-weight: 600;
font-size: 20px;
}
.genre-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Configurando a grid com colunas automáticas de pelo menos 200px */
gap: 16px;
}
.card {
display: flex;
flex-direction: column;
padding: 16px;
max-width: 100%;
border-radius: 8px;
position: relative;
height: 180px;
overflow: hidden;
cursor: pointer;
}
.card:hover {
background-color: #666666;
}
.card-1 {
background-color: #9828c5;
}
.card-2 {
background-color: #34d4c7;
}
.card-3 {
background-color: #ca942f;
}
.card-4 {
background-color: #3149d1;
}
.card-5 {
background-color: #d13939;
}
.card-6 {
background-color: #797979;
}
.card-7 {
background-color: #32853d;
}
.card-8 {
background-color: #993288;
}
.card-9 {
background-color: #58bdca;
}
.card-title {
font-family: var(--font-dm-sans);
font-size: 24px;
font-weight: 800;
text-decoration: none;
text-transform: none;
color: #fff;
}
.albumcover {
position: absolute;
max-width: 144px;
right: 0;
bottom: 0;
transform: rotate(45deg);
}
.all-artists {
margin-top: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
background-color: #121212;
border-radius: 8px;
}
.artist-title {
color: #fff;
font-weight: 600;
font-size: 20px;
font-family: var(--font-dm-sans);
}
.artistroll {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 24px;
}
.artist {
display: flex;
flex-direction: column;
gap: 8px;
align-items:center;
width: 200px;
height: 240px;
background-color: #1f1f1f;
padding: 16px;
border-radius: 8px;
}
.artistimg {
max-width: 144px;
cursor: pointer;
}
.artistname {
color: #fff;
font-family: var(--font-dm-sans);
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.escutarbt {
margin-top: 16px;
display: flex;
flex-direction: row;
gap: 8px;
background-color: #555555;
border-radius: 8px;
padding: 16px;
cursor: pointer;
}
.escutar-text {
color: #b3b3b3;
font-family: var(--font-dm-sans);
font-weight: 600;
font-size: 16px;
}
.escutarbt:hover {
background-color: #121212
}
Page updated
Google Sites
Report abuse