Thiết kế website giá rẻ

Question

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>웹사이트 만들기</title>

    <link rel="stylesheet" href="web.css?after" />
  </head>
  <body>
    <div id="layout">
      <header>
        <!-- 로고 -->
        <div id="logo">
          <img src="/0712 웹사이트/images/logo.jpg" alt="로고" />
        </div>
        <!-- 네비게이션 메뉴 (메인 메뉴 및 서브 메뉴) -->
        <ul>
          <li>
            <a href="#" class="main-menu">펜션소개</a>
          </li>
          <li>
            <a href="#" class="main-menu">룸 미리보기</a>
            <nav class="sub-menu">
              <li>사랑 하나<span>(최대2인)</span></li>
              <li>설렘 둘<span>(최대 4인)</span></li>
              <li>아침 한스푼<span>(최대2인)</span></li>
              <li>고요 두스푼<span>(최대4인)</span></li>
            </nav>
          </li>
          <li class="community">
            <a href="#" class="main-menu">커뮤니티</a>
            <nav class="sub-menu">
              <li>예약하기</li>
              <li>문의하기</li>
              <li>갤러리</li>
            </nav>
          </li>
        </ul>
      </header>

      <!-- 메인 헤딩 -->
      <h1 id="center-text">
        당신을 위한 힐링타임<br />아침고요펜션과 함께 하세요.
      </h1>
      <!-- 슬라이드 이미지 -->

      <section id="slide">
        <div id="imgs">
          <img src="images/slide-1.jpg" alt="슬라이드1" />
          <img src="images/slide-2.jpg" alt="슬라이드2" />
          <img src="images/slide-3.jpg" alt="슬라이드3" />
        </div>
      </section>

      <main>
        <section id="notice">
          <!-- 공지사항 목록 -->
          <h2>공지사항</h2>
          <a href="#"
            >-진짜 아기랑 남편이랑 잘 쉬다 왓어요!!<span>2018-03-25</span></a
          >
          <a href="#">-엄청 만족합니다.<span>2018-02-13</span></a>
          <a href="#">-감사합니다.<span>2017-12-09</span></a>
          <a href="#">-잘 쉬고 왔습니다.<span>2017-08-19</span></a>
          <a href="#">-3일간 머물고 왔습니다.<span>2017-05-26</span></a>
          <a href="#">-가을에 한번 더 가려고 합니다.<span>2017-03-07</span></a>
        </section>

        <section id="partner">
          <div>
            <img
              src="/0712 웹사이트/images/partner.jpg"
              alt="협력사"
              id="partners_logo"
            />
            <button id="close">닫기</button>
          </div>
          <p>사계절 바베큐장<br />쿡TV & 와이파이</p>
          <p>-남이섬 집 라인</p>
          <p>-쁘띠 프랑스</p>
          <p>-자라섬 재즈페스티벌</p>
          <p>-가평 사계절 썰매장</p>
          <!-- 협력사 콘텐츠 -->
        </section>

        <section id="banner">
          <!-- 아이콘형 배너 버튼들 -->
          <div>
            <img src="images/icon_01.png" alt="펜션 알림판" />
            <img src="images/icon_02.png" alt="펜션 행사일정" />
            <img src="images/icon_03.png" alt="사용자 이용규칙" />
          </div>
        </section>
      </main>

      <footer>
        <div id="rules">
          <a href="#">법적고지</a>
          <a href="#">개인정보보호방침</a>
          <a href="#">개인정보처리방침</a>
        </div>
        <div id="info">
          <p>입금: 농협 302-1051-7449-71 최주희</p>
          <p>문의전화 : <a href="tel:010-0000-0000">010-8949-1927</a></p>
          <p>이메일 : <a href="email">[email protected]</a></p>
          <p>주소 : 경기 가평군 상면 수목원로 380</p>
        </div>
        <div id="brand">
          <p>상호명: 주식회사 비즈온네트웍스</p>
          <p>사업자등록번호: 244-87-00033</p>
          <p>대표자: 이희민</p>
          <p>사이트제작: 비즈온네트웍스</p>
        </div>
        <!-- 푸터 정보 (링크, 연락처 등) -->
      </footer>
    </div>
  </body>
</html>

/* 전역 스타일 및 리셋 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* 레이아웃 구조 */
#layout {
  max-width: 1200px;
  margin: auto;
  height: 80vh;
}

/* 헤더 스타일 */
header {
  display: flex;
}
img {
  display: block;
}
/* 로고 스타일 */

header #logo {
  top: 0;
  left: 0;
  display: block;
}
header ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
header ul li {
  flex-direction: column;
  position: relative;
  margin: auto;
  list-style-type: none;
}
/* 메인 메뉴 스타일 */
ul li .main-menu {
  /* position: relative; */
  text-decoration: none;
  color: powderblue;
  font-size: 1.5rem;
  display: block;
  height: 40px;
}

/* 서브 메뉴 스타일 */
.sub-menu {
  cursor: pointer;
  text-align: center;
  top: 100%;
  left: 0;
  width: 100%;
  position: absolute;
  height: 0;
  transition: 1.5s;
  overflow: hidden;
}

/* 메뉴 호버 효과 */
.main-menu:hover {
  animation: main-menu-hover 3s both ease;
  border-radius: 10%;
}

@keyframes main-menu-hover {
  0% {
    background-color: green;
  }
  50% {
    background-color: gray;
  }
  100% {
    background-color: green;
  }
}
header li:hover .sub-menu {
  height: 200px;
  background-color: azure;
  line-height: 1.8;
  border-radius: 20%;
}
.sub-menu li:hover {
  animation: menu-to-scale 0.5s both ease;
}
@keyframes menu-to-scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
header li.community:hover .sub-menu {
  height: 80px;
}
.sub-menu li:hover {
  background-color: bisque;
  transition: 0.5s;
}
.sub-menu li {
  border-radius: 20%;
}
/* 메인 슬라이드 섹션 스타일 */

#imgs {
  display: flex;
  height: 40vh;
  border: 3px solid red;
  overflow: hidden;
  animation: slide_img 10s linear alternate-reverse infinite ease;
  width: 100%;
  position: absolute;
  /* flex-direction: column; */
}
@keyframes slide_img {
  0%,
  100% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
}

#slide > #img {
  flex: 1;
}

Hello!
Please help me.
Even though the 3 images in the middle implemented the animation, it does not work.
I’m a student who just started studying for development.
It’s the same even if you look at ai or the page you’re referring to, but it doesn’t work.
I know you’re busy, but please help!
Photos should automatically slide and move when refreshing or accessing the page, but they are not.

Thiết kế website giá rẻ

Danh mục

#fe #html #css Photos should automatically slide and move when refreshing or accessing the page, but they are not