๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
html, css

์ฝ”๋ˆ„๋‚˜๋‹˜ - HTML, CSS / chapter 6 - Spotify ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ

ใ…Žใ…‡๐Ÿ–๐Ÿป 2022. 5. 15. 01:16

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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.2.0/css/all.min.css" integrity="sha512-6c4nX2tn5KbzeBJo9Ywpa0Gkt+mzCzJBrE1RB6fmpcsoN+b/w/euwIMuQKNyUoU/nToKN3a8SgNOtPrbW12fug==" crossorigin="anonymous" />
    <link href="6-1style.css" rel="stylesheet" type="text/css" />
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <img src="https://noona-spotify.netlify.app/image/logo.png" width = "132px">
        <div>
            <a href="#" class="nav-item">Premium</a>
            <a href="#" class="nav-item">Support</a>
            <a href="#" class="nav-item">Download</a>
            <span class="nav-item">|</span>
            <a href="#" class="nav-item">Sign up</a>
            <a href="#" class="nav-item">Log in</a>
        </div>
    </div>
    <div class="main">
        <div class="headline">
            <div>Listening is</div>
            <div>everything</div>
        </div>
        <div class="sub-headline">
            Millions of songs and podcasts. No credit card needed.
        </div>
        <button class="main-btn">Get Spotify free</button>
    </div>
    <div class="footer">
        <div class="footer-container">
            <div class="footer-menu">
                <img src="https://noona-spotify.netlify.app/image/logo.png" width = "132px">
                <div class="first-box">
                    <div class="footer-ul">
                        <div class="footer-head">COMPANY</div>
                        <a href="#" class="footer-content">About</a>
                        <a href="#" class="footer-content">Jobs</a>
                        <a href="#" class="footer-content">For the Record</a>
                    </div>
                    <div class="footer-ul">
                        <div class="footer-head">COMMUNITIES</div>
                        <a href="#" class="footer-content">For Artists</a>
                        <a href="#" class="footer-content">Developers</a>
                        <a href="#" class="footer-content">Advertising</a>
                        <a href="#" class="footer-content">Investors</a>
                        <a href="#" class="footer-content">Vendors</a>
                    </div>
                    <div class="footer-ul">
                        <div class="footer-head">USEFUL LINKS</div>
                        <a href="#" class="footer-content">Support</a>
                        <a href="#" class="footer-content">Web Player</a>
                        <a href="#" class="footer-content">Free Mobile App</a>
                    </div>
                </div>
                <div class="second-box">
                    <div class="sns-icon">
                        <i class="fab fa-instagram icon" aria-hidden="true"></i>
                    </div>
                    <div class="sns-icon">
                        <i class="fab fa-twitter icon" aria-hidden="true"></i>
                    </div>
                    <div class="sns-icon">
                        <i class="fab fa-facebook-f icon" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            <div class="third-box">
                <i class="fas fa-globe-africa" aria-hidden="true"></i>
                USA
            </div>
            <div class="fourth-box">
                <div>
                    <a href="#" class="fourth-box-item">Legal</a>
                    <a href="#" class="fourth-box-item">Privacy Center</a>
                    <a href="#" class="fourth-box-item">Privacy Policy</a>
                    <a href="#" class="fourth-box-item">Cookies</a>
                    <a href="#" class="fourth-box-item">About Ads</a>
                    <a href="#" class="fourth-box-item">Additional CA Privacy Disclosures</a>
                </div>
                <div>© 2021 Spotify AB</div>
            </div>
        </div>
    </div>
</body>
</html>

 

css

 

html,body{
    margin : 0;
    width : 100%;
    font-family: spotify-circular, Helvetica, Arial, sans-serif;
    color: white;
    overflow-x : hidden; 
}

ul, li {
    list-style: none;
}

p, a {
    color:#fff;
    text-decoration:none;
}


/* nav */


.nav{
    height:80px;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav img {
    height : auto;
}

.nav-item {
    padding: 28px 17px;
    font-weight: 700;
}


/* main */


.main{
    height:969px;
    background-color: rgb(41, 65, 171);
    background-image: url(https://www-growth.scdn.co/static/home/bursts.svg);
    background-size: 175%;
    background-position: 46% 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.headline {
    font-size: 146px;
    line-height: 166px;
    color: #1ed760;
    font-weight: 900;
    position: relative;
    left: 225px;
    padding-bottom: 40px;
}

.headline div:first-child {
    position: relative;
    left: -2.5em;
}

.sub-headline{
    color: #1ed760;
    padding-bottom:40px;
    font-size:18px;
}

.main-btn{
    color: rgb(41, 65, 171);
    background-color: #1ed760;
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    line-height:100%;
    font-size: 16px;
    font-weight: 700;
}

.main-btn:hover{
    transform: scale(1.07);
    background-color: #2de26d;
}


/* footer */


.footer{
    display:flex;
    align-items: center;
    flex-direction: column;
    height:530px;
    background-color: black;
}

.footer-container {
    max-width: 1170px;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 50px;
}

/* first-box */

.footer-menu {
    height: 346px;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
}

.first-box{
    display:flex;
    width:60%;
}

.footer-ul {
    padding:0 40px;
    display:flex;
    flex-direction: column;
}

.footer-ul:last-child{
    padding-right:0;
}

.footer-head {
    color: #919496;
    font-weight: 900;
    margin-bottom:20px;
}

.footer-content {
    padding:10px 0;
}

/* second-box */

.second-box {
    display:flex;
    width : 40%;
    justify-content: flex-end;
}

.sns-icon {
    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;
}

/* third-box */

.third-box, .fourth-box {
    color: #919496;
    display: flex;
}

.third-box {
    font-size: 12px;
    justify-content: flex-end;
}

/* fourth-box */

.fourth-box {
    margin-top: 12px;
    justify-content: space-between;
}

.fourth-box-item {
    color: #919496;
    margin-right: 24px;
}

/* common */

.sns-icon>.icon:hover, .footer-content:hover, .fourth-box-item:hover {
    color:#1ed760;
}

 

 

 

 

ํ•ญ์ƒ๋Š๋ผ์ง€๋งŒ ํด๋ž˜์Šค ์ด๋ฆ„๋งŒ๋“ค๊ธฐ๊ฐ€ ์ œ์ผ ์–ด๋ ต๋‹น

๊ทธ๋ฆฌ๊ณ  ๋‚˜๋จธ์ง€์ค‘์— footer๋ถ€๋ถ„์ด ์†”์งํžˆ ์ ค ์–ด๋ ต๊ธดํ–ˆ๋Š”๋ฐ(๋•๋ถ„์— f12์—ฐํƒ€ํ•จ)

https://hackmd.io/@oW_dDxdsRoSpl0M64Tfg2g/Hy1WNWpbt

์ด๊ฑฐ ์ฐธ๊ณ ํ•˜๋ผ๊ณ  ์ฃผ์…จ์Œ

์ฐธ๊ณ ํ•ด์•ผ์ฅ... ใ…‡ 

'html, css' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

CSS Grid ์ •๋ฆฌ  (0) 2022.12.08
์ฝ”๋ˆ„๋‚˜๋‹˜ - HTML, CSS / Chapter 7 - ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ Bootstrap  (0) 2022.05.16
์ฝ”๋ˆ„๋‚˜๋‹˜ - HTML, CSS / chapter 5 - HTML์„ ์ข€ ๋” ์‰ฝ๊ฒŒ ์›€์ง์ด๋Š” ๋ฐฉ๋ฒ•  (0) 2022.02.16
์ฝ”๋ˆ„๋‚˜๋‹˜ - HTML, CSS / Chapter 4 - ๊ตฌ๊ธ€ ์›น์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ  (0) 2022.02.07
์ฝ”๋ˆ„๋‚˜๋‹˜ - HTML, CSS / Chapter 3 - CSS ์›น์‚ฌ์ดํŠธ ๊พธ๋ฏธ๊ธฐ  (0) 2022.02.06

'html, css' Related Articles

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”