코딩/실습

AWD 콘텐츠 리뉴얼

haehaee 2026. 4. 17. 17:44 

<!doctype html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
  <title>jinuk</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css"></style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <script type="text/javascript"></script>
</head>




<body>

  <main>

    <header>
      <div>MUTE</div>
      <nav>≡</nav>
    </header>

    <div>
      <h1>Silent but Powerful</h1>
      <p>고요하지만 강력한 흔적</p>
      <button>자세히 보기</button>
    </div>

  </main>


  <article class="get-text">
    <h2>THE ULTIMATE MANLINESS</h2>
    <p>단 하나의 향으로 완성되는 압도적 존재감<br />
     향수는 당신이 입는 가장 마지막 수트입니다.<br />
     보이지 않는 가치로 당신의 첫인상을 지배하세요.
    </p>
  </article>

  <article class="get">
    <div>
      <h2>Get the storm</h2>
      <p>
        MUTE는 단순히 향기를 파는 것이 아니라, 당신의 존재감을 증명하는 보이지 않는 수트를 제안합니다.<br>&nbsp;</br> </p>
      <p>
        고요함 속에 잠재된 폭발적인 에너지를 경험하세요.한 번의 분사로 세상을 당신의 향기로 채우세요.<br>
      </p>
      <button>브랜드 가이드</button>
    </div>
  </article>



  <article class="bespoke-text">
    <h2>CURATED FRAGRANCE HOUSE</h2>
    <p>
    당신을 위한 프리미엄 향기 큐레이션<br />
    전 세계에서 엄선된 니치 향수부터 트렌디한 브랜드까지, 당신의 분위기에 맞는 최적의 향을 제안합니다.
    </p>
  </article>


  <article class="bespoke">

    <section onclick="window.location.href='https://www.google.com/'">
      <div>
        <h3>YVES SAINT LAURENT</h3>
        <button>보러가기</button>
      </div>
    </section>

    <section onclick="window.location.href='https://www.google.com/'">
      <div>
        <h3>JO MALONE LONDON</h3>
        <button>보러가기</button>
      </div>
    </section>

    <section onclick="window.location.href='https://www.google.com/'">
      <div>
        <h3>VERSACE</h3>
        <button>보러가기</button>
      </div>
    </section>

  </article>


  <article class="design-text">
    <h2>OUR SIGNATURE SERVICES</h2>
    <p>오직 뮤트에서만 경험할 수 있는 특별함<br>단순한 향수 구매를 넘어, 당신의 삶에 깊게 스며들 수 있는 특별한 가치를 제안합니다. <br>전문가의 섬세한 터치로 완성되는 퍼스널 조향부터 전 세계 유수의 니치 향수를 직접 경험할 수 있는 오프라인 스토어까지, 오직 뮤트(MUTE)에서만 허락된 감도 높은 프리미엄 서비스를 지금 바로 확인해 보세요.
    </p>
  </article>


  <article class="design">

    <section>
      <div>
        <button>테마별 큐레이션</button>
      </div>
    </section>

    <section>
      <div>
        <button>퍼스널 향수</button>
      </div>
    </section>

    <section>
      <div>
        <button>향의 깊이 가이드</button>
      </div>
    </section>

    <section>
      <div>
        <button>매장 안내</button>
      </div>
    </section>

  </article>


  <article class="greetings">

    <div>⥢</div>

    <div>⥤</div>

    <h2>PARTNER BRANDS</h2>

    <div>
      <img src="https://blog.kakaocdn.net/dna/muR4Y/dJMcag6gQAG/AAAAAAAAAAAAAAAAAAAAAKUv1rlzBVFxk1B9MNyox2yoysfkHjGSHYQFimT920nE/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=XGnSuaPu8IzMZ8Z87lFR7aqMfA4%3D">
      <img src="https://blog.kakaocdn.net/dna/b2LDxX/dJMcaf7laGB/AAAAAAAAAAAAAAAAAAAAAMu_sGOOM0yJmartaUSAB_gjW2MjF3AcU1zVFkXo3DPp/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=pdfLYJANSEeksb3lwHjXnerbVOI%3D">
      <img src="https://blog.kakaocdn.net/dna/1dJLR/dJMcagd8Hb7/AAAAAAAAAAAAAAAAAAAAAO7MyQz38pSIghTCFDNYg7-VzTRQBssSfUGYDyiN8H4U/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=%2B1DZTLCC%2FWcFePb7DfYUS7n4QeE%3D">
      <img src="https://blog.kakaocdn.net/dna/0yOsK/dJMcag6gQAF/AAAAAAAAAAAAAAAAAAAAAFE9p8ZUn3jI5B7eDH85UdP29i01RKHvYfdDEqCieFUJ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=krVbBxIA1WY8rkqfAHldj%2B8dK3M%3D">
      <img src="https://blog.kakaocdn.net/dna/Dm79S/dJMb990pdX4/AAAAAAAAAAAAAAAAAAAAAN_Dqx6vAOZrdgqBHIqPSWDPxXeyhHnLPUx0jnC0W7mJ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=cgm9KP5Zcudxhj53c3gvNeejCVI%3D">
      <img src="https://blog.kakaocdn.net/dna/eoOpic/dJMcag6gQAE/AAAAAAAAAAAAAAAAAAAAAIzGO2PjG8LdAEnjKtOGFaysT8TvgsHF0RkWhdpWovkT/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=xAQCcahiQbi9D6hyOMQFgTBIpv4%3D">
    </div>

    <div>
      <p>
        함께하는 프리미엄 파트너
      </p>
    </div>

  </article>


  <article class="event">

    <h2>향의 깊이 가이드</h2>
<p>지속시간에 따른 향수의 종류 알아보기</p>
    <table>
      <tr>
        <td width="150px">등급</td>
        <td width="150px">부향률</td>
        <td width="200px">지속 시간</td>
        <td width="400px">특징</td>
      </tr>
      <tr>
        <td>퍼퓸</td>
        <td>15% ~ 30%</td>
        <td>7 ~ 8시간 이상</td>
                <td>가장 깊고 풍부한 향, 특별한 날 추천</td>
      </tr>
      <tr>
        <td>오드 퍼퓸</td>
        <td>10% ~ 15%</td>
        <td>5시간 전후</td>
             <td>대중적이며 선명한 발향, 데일리용</td>
      </tr>
      <tr>
        <td>오드 뚜왈렛</td>
        <td>5% ~ 10%</td>
        <td>3 ~ 4시간 전후</td>
             <td>가볍고 부드러운 느낌, 캐주얼한 사용</td>
      </tr>
    </table>

  </article>


  <footer>

    <div>

      <h2>ORDER</h2>

      <p>
       비회원 주문 조회 및 배송 현황
      </p>

      <form>
        <div>
          <label for="name">Name</label>
          <input type="text" name="name" id="name">
        </div>
        <div>
          <label for="email">Email</label>
          <input type="email" name="email" id="email">
        </div>
        <div>
          <label for="message">Message</label>
          <textarea name="message" id="message"></textarea>
        </div>
        <div>
          <button type="submit" name="submit" id="submit">Submit</button>
        </div>
      </form>

    </div>

  </footer>


  <address>
    <div>
      <h2>Contact us</h2>
      <p>서울특별시 강남구 테헤란로 123, 뮤트 빌딩 15층<br>
TEL: 02-1234-5678<br>
EMAIL: info@mute.com
      </p>
    </div>
  </address>


</body>


</html>
@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    word-break: keep-all;
    outline: 0px solid silver;
}

img {
    width: 100px;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #999;
    letter-spacing: 0.1px;
}

h1,
h2,
h3 {
    font-family: "Oswald", sans-serif;
}

h1 {
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.4rem;
    line-height: 2.4rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-align: center;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

h4,
h5 {
    font-family: "Playfair Display", serif;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.1rem;
}

h5 {
    font-size: 0.7rem;
    line-height: 0.7rem;
}

a:link {
    color: #666;
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

button {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 10px 30px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background: crimson;
    color: white;
}

/* mobile start */

/* 메인헤더부분 색 변경
버튼 호버색 변경
폰트 색 변경
글씨 위치도 수정
사진 호버 알파값 조정
 */

main {
    position: relative;
    background: url("https://images.unsplash.com/photo-1598634222670-87c5f558119c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: bottom center;
    height: 600px;
    color: white;
}

main header {
    padding: 0 10%;
    text-transform: uppercase;
    line-height: 5rem;
    display: flex;
    justify-content: space-between;
}

main header div {
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.8s;

}

main header div:hover {
    color: yellow;
}

main header nav {
    font-size: 3rem;
    cursor: pointer;
    transition: 0.8s;
}

main header nav:hover {
   color: blue;
}

main>div {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

main div p {
    padding: 16px;
}

.get-text {
    padding: 80px 10%;
    text-align: center;
}

.get-text div {
    padding: 20px;
}

/* .get-text div img {
    width: 80px;
    margin: 2px 2%;
    opacity: 0.4;
    cursor: pointer;
    transition: 0.8s;
} */

.get-text div img:hover {
    opacity: 1;
}

.get {
    background: url("https://cdn.pixabay.com/photo/2016/07/13/11/55/spray-1514264_1280.jpg") no-repeat;
    background-size: cover;
    background-position: center right;
    height: 500px;
    color: white;
    display: flex;
    flex-direction: row-reverse;
}

.get div {
    background: rgba(0, 0, 0, 0.5);
    width: 50%;
    height: 100%;
    padding: 80px 5%;
}

.get div :nth-child(1) {
    text-align: left;
}

.get div :nth-child(3) {
    display: none;
}

.get div :nth-child(4) {
    margin: 32px 0 0;
}

.bespoke-text {
    padding: 80px 10%;
    text-align: center;
}

.bespoke section {
    height: 500px;
    color: white;
    text-align: center;
}

.bespoke> :nth-child(1) {
    background: url("https://images.unsplash.com/photo-1700473209752-395910c89003?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: center center;
}

.bespoke> :nth-child(2) {
    background: url("https://images.unsplash.com/photo-1519669011783-4eaa95fa1b7d?q=80&w=1958&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: center center;
}

.bespoke> :nth-child(3) {
    background: url("https://images.unsplash.com/photo-1519761192872-d8496d4ccaaf?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: center center;
}

.bespoke section div {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 25%;
    cursor: pointer;
    transition: 0.8s;
}

.bespoke section div:hover {
    background: rgba(0, 0, 0, 0.7);
}

.bespoke section div button {
    background: none;
    color: white;
}

.design-text {
    padding: 80px 10%;
    text-align: center;
}

.design section {
    height: 140PX;
}
.design> :nth-child(1) {
    background: url(https://images.unsplash.com/photo-1602070945737-067cfd04174c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
    background-size: cover;
    background-position: center center;
}


.design> :nth-child(2) {
    background: url("https://plus.unsplash.com/premium_photo-1670574873484-bf0923c33a24?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: center center;
}


.design> :nth-child(3) {
    background: url(https://plus.unsplash.com/premium_photo-1739831741008-6213d7f8c17e?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
    background-size: cover;
    background-position: center center;
}


.design> :nth-child(4) {
    background: url(https://images.unsplash.com/photo-1629881604792-7313167e39f9?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
    background-size: cover;
    background-position: top center;
}

.design section div {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.8s;
}

.design section div:hover {
    background: rgba(0, 0, 0, 0.7);
}

.design section div button {
    width: 150px;
    background: none;
    color: white;
}

.greetings {
    position: relative;
    padding: 80px 10%;
    text-align: center;
}

.greetings> :nth-child(1),
.greetings> :nth-child(2) {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    padding: 16px 20px;
    top: 50%;
    cursor: pointer;
    transition: 0.8s;
}

.greetings> :nth-child(1):hover,
.greetings> :nth-child(2):hover {
    color: white;
    background: crimson;
}

.greetings> :nth-child(1) {
    left: 10%;
}

.greetings> :nth-child(2) {
    right: 10%;
}

.greetings :nth-child(4) img {
    width: 80px;
    margin: 2px 2%;
    opacity: 0.4;
    cursor: pointer;
    transition: 0.8s;
}

.greetings :nth-child(4) img:hover {
    opacity: 1;
}

.event {
    display: none;
}

.event p {
    text-align: center;
}

footer {
    background: #222;
    padding: 80px 10%;
}

footer h2 {
    color: #aaa;
    text-align: left;
}

footer div form div {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

footer div form div label {
    line-height: 2.4rem;
}

footer div form div input {
    width: 240px;
    padding: 10px;
}

footer div form div textarea {
    width: 240px;
    height: 90px;
    padding: 10px;
}

footer div form div button {
    width: 240px;
}

address {
    background: #333;
    padding: 80px 10%;
}

address h2 {
    color: #aaa;
    text-align: left;
}

/* laptop start */

@media screen and (min-width: 600px) {

    main {
        height: 800px;
    }

    .get div :nth-child(3) {
        display: block;
    }

    .bespoke {
        display: flex;
        background: yellow;
    }

    .bespoke section {
        height: 600px;
        width: 100%;
    }

    .design {
        display: flex;
        flex-wrap: wrap;
    }

    .design section {
        width: 50%;
        height: 400px;
    }

    .greetings {
        width: 1000px;
        margin: 0 auto;
    }

    .event {
        display: block;
        background: #eee;
        padding: 80px 0;
    }

    .event table {
        width: 1000px;
        margin: 0 auto;
        border-collapse: collapse;
    }

    .event table tr {
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        transition: 0.8s;
    }

    .event table tr:hover {
        background: white;
    }

    .event table td {
        padding: 16px;
    }

    footer div {
        width: 1000px;
        margin: 0 auto;
    }

    address div {
        width: 1000px;
        margin: 0 auto;
    }

}
    /* end */

'코딩 > 실습' 카테고리의 다른 글

ui-kit  (0) 2026.04.23
AWD 디자인 리뉴얼  (1) 2026.04.21
RWD 디자인 리뉴얼  (0) 2026.04.16
RWD 콘텐츠 리뉴얼  (0) 2026.04.16
Active and fixed 디자인 리뉴얼  (1) 2026.04.16

'코딩/실습'의 다른글

  • 현재글AWD 콘텐츠 리뉴얼

관련글

티스토리툴바