Starbucks Landing Page

HTML _CSS

Starbucks Landing Page

HiroDaegu 2023. 1. 2. 08:36

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">

<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">
    <title>STARBUCKS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section>
        <div class="circle"></div>
        <header>
            <a href="#"><img src="./images/logo.png" class="logo" alt="logo"></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">What's New</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <div class="content">
            <div class="textBox">
                <h2>It's not just Coffee<br>It's <span>Starbucks</span></h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, alias ex eligendi quaerat itaque facere
                    sint aliquid, unde, aut temporibus libero amet minus ipsam maxime laborum officia magni rerum vel
                    ratione fugiat adipisci veritatis.</p>
                <a href="#">Learn More</a>
            </div>
            <div class="imgBox">
                <img src="./images/img1.png" alt="Starbucks" class="starbucks">
            </div>
        </div>
        <ul class="thumb">
            <li><img src="./images/thumb1.png" alt="thumb1" onclick="imgSlider('./images/img1.png', '#017143')"></li>
            <li><img src="./images/thumb2.png" alt="thumb2" onclick="imgSlider('./images/img2.png', '#EB7495')"></li>
            <li><img src="./images/thumb3.png" alt="thumb3" onclick="imgSlider('./images/img3.png', '#D752B1')"></li>
        </ul>
        <ul class="sci">
            <li><a href="#"><img src="./images/facebook.png" alt="facebook"></a></li>
            <li><a href="#"><img src="./images/twitter.png" alt="twitter"></a></li>
            <li><a href="#"><img src="./images/instagram.png" alt="instagram"></a></li>
        </ul>
    </section>
    <script>
        function imgSlider(anything, anything2) {
            document.querySelector(".starbucks").src = anything;

            const circle = document.querySelector(".circle");
            circle.style.backgroundColor = anything2

        }
    </script>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

section {
    width: 100%;
    min-height: 100vh;
    padding: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF;
}

section .circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #017143;
    clip-path: circle(600px at right 800px);
}

section header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section header .logo {
    max-width: 80px;
}

section header ul {
    display: flex;
}

section header ul li {
    list-style: none;
}

section header ul li a {
    display: inline-block;
    color: #333;
    font-weight: 400;
    margin-left: 40px;
    text-decoration: none;
}

.content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content .textBox {
    max-width: 600px;
}

.content .textBox h2 {
    color: #333;
    font-size: 4em;
    font-weight: 500;
    line-height: 1.4em;
}

.content .textBox h2 span {
    color: #017143;
    font-size: 1.2em;
    font-weight: 900;
}

.content .textBox p {
    color: #333;
}

.content .textBox a {
    display: inline-block;
    margin-top: 20px;
    padding: 8px 20px;
    background-color: #017143;
    color: #FFF;
    border-radius: 40px;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none;
}

.content .imgBox {
    width: 600px;
    display: flex;
    justify-content: flex-end;
    padding-right: 50px;
    margin-top: 50px;
}

.content .imgBox img {
    max-width: 340px;
}

.thumb {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.thumb li {
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    cursor: pointer;
    transition: .5s;
}

.thumb li:hover {
    transform: translateY(-15px);
}

.thumb li img {
    max-width: 60px;
}

.sci {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sci li {
    list-style: none;
}

.sci li a {
    display: inline-block;
    margin: 5px 0;
    transform: scale(0.6);
    filter: invert(1);
}

728x90

LIST