Clique nos botões abaixo para navegar na página ou acessar o repositório de códigos e assets no Github
Embedded Files
Este projeto para portfólio demonstra a homepage de uma site fictício de música "Mixzer", baseada na homepage do Spotify. A estrutura foi criada com HTML5 e a aparência com CSS. Todos os elementos clicáveis possuem interações de hover ou clique criadas com CSS.
Caixa de pesquisa com imput de caracteres
Interação de elementos com hover
Favicon personalizado
Notificações / informações em campo de sobrepor
Veja o código abaixo:
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