index.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>이거머지</title>
  7. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  8. <link rel="stylesheet" href="./css/main.css" />
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  10. <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  11. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  12. <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
  13. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  14. <script src="./js/common.js"></script>
  15. </head>
  16. <body>
  17. <header>
  18. <div class="header--line--banner--wrap">
  19. <div class="inner--contents">
  20. <button type="button" class="close--btn">
  21. <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
  22. <g clip-path="url(#clip0_200_98)">
  23. <path d="M15 29C22.732 29 29 22.732 29 15C29 7.26801 22.732 1 15 1C7.26801 1 1 7.26801 1 15C1 22.732 7.26801 29 15 29Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  24. <path d="M19.1998 10.8L10.7998 19.2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  25. <path d="M10.7998 10.8L19.1998 19.2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  26. </g>
  27. <defs>
  28. <clipPath id="clip0_200_98">
  29. <rect width="30" height="30" fill="white"/>
  30. </clipPath>
  31. </defs>
  32. </svg>
  33. </button>
  34. <h3>우리 회사도 M&A 가능할까요? 예, 궁합으로 겉과 속을 맞춰드립니다</h3>
  35. <p>“M&A궁합”은 M&A를 극비로 진행하고 있어 매우 안전합니다.</p>
  36. </div>
  37. </div>
  38. <div class="header--contents--wrap">
  39. <div class="header--contents">
  40. <div class="header--logo--wrap">
  41. <div class="logo--wrap">
  42. <div class="logo"><a href="/"><img src="./img/header_logo.svg" alt="M&A 궁합"></a></div>
  43. <div class="txt">
  44. <p>M&A궁합이 M&A진행을 방해하고 있는 <span>허들을 없앴습니다.</span></p>
  45. <p>이제부터 편한 마음으로 <span>나와 궁합이 잘 맞는 상대방</span>을 만나보세요!</p>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="header--gnb--wrap">
  50. <div class="gnb--wrap">
  51. <div class="header--dim"></div>
  52. <ul>
  53. <li>
  54. <a href="#">M&A 상담신청</a>
  55. <ul>
  56. <li><a href="#">서브메뉴</a></li>
  57. <li><a href="#">서브메뉴</a></li>
  58. </ul>
  59. </li>
  60. <li>
  61. <a href="#">매도자님께 ★꿈 실현</a>
  62. </li>
  63. <li>
  64. <a href="#">매수자님께 ★꿈 실현</a>
  65. </li>
  66. <li><a href="#">주요 내용</a></li>
  67. <li><a href="#">문의 사항</a></li>
  68. </ul>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </header>
  74. <main>
  75. <article>
  76. <!-- 메인 비쥬얼 -->
  77. <section class="main--visual--section">
  78. <div class="main--visual--wrap main--visual">
  79. <div class="swiper-wrapper">
  80. <div class="swiper-slide">
  81. <div class="main--visual--img">
  82. <picture>
  83. <source srcset="./img/main_vs01.png" media="(max-width: 768px)">
  84. <img src="./img/main_vs01.png" alt="메인 비주얼 이미지 1">
  85. </picture>
  86. <div class="main--visual--txt">
  87. <h3>M&A 궁합으로</h3>
  88. <p>서로 잘 맞는 매수자♡매도자 찾기</p>
  89. </div>
  90. </div>
  91. </div>
  92. <div class="swiper-slide">
  93. <div class="main--visual--img">
  94. <picture>
  95. <source srcset="./img/main_vs01.png" media="(max-width: 768px)">
  96. <img src="./img/main_vs01.png" alt="메인 비주얼 이미지 1">
  97. </picture>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="main--visual--pager">
  103. <div class="main--visual--fraction"></div>
  104. <div class="main--visual--pagination"></div>
  105. <div class="main--visual--progress">
  106. <div class="progress-bar"></div>
  107. <span class="progress-text">01</span>
  108. </div>
  109. <div class="prev--next--wrap">
  110. <button type="button" class="prev--btn"></button>
  111. <button type="button" class="next--btn"></button>
  112. </div>
  113. </div>
  114. </section>
  115. </article>
  116. </main>
  117. </body>
  118. </html>