웹 사이트를 뜯어 보면서, 직접 Spotify Site를 구현 해봤다.
footer, main, header 나누는 개념을 확실히 알게 되었고, 아직은 어렵지만 재미를 느끼게 되었다
개인적으로 아직 초반이지만 자바스크립트보다, CSS 구현이 더 어려운 것 같다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Spotify.css" >
<title>Spotify</title>
</head>
<body>
<nav>
<div>
<img src="logo.jpg" width="131px;">
</div>
<div>
<a href="#" class="nav-item">Premium</a>
<a href="#" class="nav-item">Support</a>
<a href="#" class="nav-item">Download</a>
<span>|</span>
<a href="#" class="nav-item">Sign up</a>
<a href="#" class="nav-item">Log in</a>
</div>
</div>
</nav>
<main>
<div class="main-container">
<div class="headline">
<div class="headline-first">Listening is</div>
<div>everything</div>
</div>
<div class="sub-headline">Millions of songs and podcasts. No credit card needed.</div>
<div class="button-area">
<button class="button-style">GET SPOTIFY FREE</button>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-menu">
<div class="first-box">
<div>
<img src="logo.jpg" width=132>
</div>
<div class="column">
<div class="sub-title">COMPANY</div>
<a href="#" class="footer-menu-item">About</a>
<a href="#" class="footer-menu-item">Jobs</a>
<a href="#" class="footer-menu-item">For the Record</a>
</div>
<div class="column">
<div class="sub-title">COMMUNITIES</div>
<a href="#" class="footer-menu-item">For Artists</a>
<a href="#" class="footer-menu-item">Developers</a>
<a href="#" class="footer-menu-item">Advertising</a>
<a href="#" class="footer-menu-item">Investors</a>
<a href="#" class="footer-menu-item">Vendors</a>
</div>
<div class="column">
<div class="sub-title">USEFUL LINKS</div>
<a href="#" class="footer-menu-item">Support</a>
<a href="#" class="footer-menu-item">Web Player</a>
<a href="#" class="footer-menu-item">Free Mobile App</a>
</div>
</div>
<div class="second-box">
<div class="icon-box">
<i class="fab fa-instagram icon"></i>
</div>
<div class="icon-box">
<i class="fab fa-twitter icon"></i>
</div>
<div class="icon-box">
<i class="fab fa-facebook-f icon"></i>
</div>
</div>
</div>
<div class="first-line">
<i class="fas fa-globe-africa"></i>
USA
</div>
<div class="second-line">
<div>
<a href="#" class="second-line-item">Legal</a>
<a href="#" class="second-line-item">Privacy Center</a>
<a href="#" class="second-line-item">Privacy Policy</a>
<a href="#" class="second-line-item">Cookies</a>
<a href="#" class="second-line-item">About Ads</a>
<a href="#" class="second-line-item">Additional CA Privacy Disclosures</a>
</div>
<div>
© 2021 Spotify AB
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
a{
color: white;
text-decoration: none;
}
a:hover{
color:#1ed760;
}
body{
margin:0px;
font-family: Circular,spotify-circular,Helvetica,Arial,sans-serif;
color: white;
}
nav{
height:79px;
background-color: black;
display: flex;
justify-content: space-around;
align-items: center;
}
main{
height:969px;
background-color:rgb(41, 65, 171) ;
background-image: url("https://www-growth.scdn.co/static/home/bursts-tablet.svg");
background-size: 175%;
background-position: 46% 4%;
background-size: 153%;
background-position: right 40% center;
display: flex;
align-items: center;
justify-content: center;
}
footer{
height:530px;
background-color: black;
display: flex;
justify-content: center;
}
.nav-item{
padding: 28px 17px;
font-weight: 700;
}
.headline{
font-size:156px;
font-weight: 900;
color:#1ed760;
position: relative;
left:400px;
padding-bottom: 40px;
}
.headline-first{
position: relative;
left:-2.5em;
}
.sub-headline{
color:#1ed760;
font: 25px;
padding-top:40px;
padding-bottom: 40px;
text-align: center;
}
.button-area{
text-align: center;
}
.button-style{
background-color: var(--background-base,#1ed760);
color: var(--text-base,#000000);
font-size: inherit;
padding:14px 32px;
border-radius: 500px;
--text-base: #2941AB !important;
font-weight: 700;
border:none;
--background-highlight:#1ED760 !important;
--background-press:#2ED26D !important;
}
.button-style:hover{
transform: scale(1.1);
background-color: #2de26d;
}
.container{
max-width: 1170px;
width:100%;
padding-top: 80px;
padding-bottom: 50px;
}
.footer-menu{
display:flex;
justify-content: space-between;
height: 346px;
}
.first-box{
width: 60%;
display: flex;
justify-content: space-between;
}
.second-box{
width: 40%;
display: flex;
justify-content: flex-end;
}
.footer-menu-item{
padding-bottom: 15px;
padding-top: 3px;
font-size:16px;
}
.column{
display:flex;
flex-direction: column;
padding: 0 15px;
}
.sub-title {
color: #919496;
font-weight: 900;
margin: 20px 0px;
}
.icon-box {
width: 54px;
height: 54px;
background-color: #222322;
border-radius: 50%;
margin-right: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.icon {
font-size: 24px;
}
.icon:hover {
color: #2de26d;
}
.first-line {
color: #919496;
display: flex;
justify-content: flex-end;
font-size: 12px;
}
.second-line {
color: #919496;
display: flex;
justify-content: space-between;
margin-top: 12px;
}
.second-line-item {
margin-right: 24px;
color: #919496;
}
Github Code
'Frontend' 카테고리의 다른 글
| [HTML.CSS] GooGle Site (0) | 2022.05.02 |
|---|