<!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">
<title>My Photo G3ll3ry</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="upgradeST.css">
<style>
body {
background: url("https://images2.alphacoders.com/928/thumb-1920-928321.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<!--하단탭 네비게이션(상단으로 올렸음)-->
<div class="bottom-container">
<div class = bottom-tab>
<ul class="bot-navi">
<li><a href="#">Home</a></li>
<li><a href="#">고양이용품</a></li>
<li><a href="#">게시판</a></li>
<li><a href="#">프로필</a></li>
</div>
</div>
<div class="container">
<!--상단탭 네비게이션(우측으로 이동)-->
<div class="top-container">
<div class = top-tab>
<ul class="top-navi">
<li><a href="#">로그인</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">뭐라고적지</a></li>
<div class="top-search-box">
<input type = "text" class = "top-search-control" placeholder="상단탭" id = "top-search-input">
<button type="submit" class = "top-search-btn btn" id="search-btn">
<i class = "fas fa-search"></i>
</button>
</div>
</div>
</div>
<div class="cat-wrapper">
<div class="cat-search">
<h2 class="title">고양이 사진들</h2>
<h2 class="ssubtitle">
집에 가고싶다 집에 가고싶다 집에 가고싶다 집에 가고싶다 집에 가고싶다 집에 가고싶다 집에 가고싶다 집에 가고싶다<br>-공도형-
</h2>
<div class="cat-search-box">
<input type = "text" class = "search-control" placeholder="Enter an kinds" id = "search-input">
<button type="submit" class = "search-btn btn" id="search-btn">
<i class = "fas fa-search"></i>
</button>
</div>
</div>
<div class = "cat-result">
<h2 class="subtitle">YourSearch Result</h2>
<div id="cat">
<!--고양이 요소1-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/237F724D58CFF7B216" alt="" title="눈짱큰고양이">
</div>
<div class="cat-name">
<h3>눈짱큰고양이</h3>
<a href="http://www.naver.com" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소2-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/26711C345701FADB1E" alt="" title="리본고양이">
</div>
<div class="cat-name">
<h3>리본고양이</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소3-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/260630345701FADE0A" alt="" title="고양이두마리">
</div>
<div class="cat-name">
<h3>고양이두마리</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소4-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/220A5E3A58CFF7B421" alt="" title="갈색고양이">
</div>
<div class="cat-name">
<h3>갈색고양이</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소5-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/270A594958CFF7B51B" alt="" title="고등어고양이">
</div>
<div class="cat-name">
<h3>고등어고양이</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소6-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/263C623558CFF7B62E" alt="" title="파란눈고양이">
</div>
<div class="cat-name">
<h3>파란눈고양이</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소7-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/236CD7345701FADF23" alt="" title="찹쌀떡">
</div>
<div class="cat-name">
<h3>찹쌀떡</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소8-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/2307925058CFF7B938" alt="" title="근엄한고양이">
</div>
<div class="cat-name">
<h3>근엄한고양이</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소9-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/256A43345701FAE125" alt="" title="파란리본">
</div>
<div class="cat-name">
<h3>파란리본</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소10-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/253A583558CFF7BB16" alt="" title="예쁜고양이">
</div>
<div class="cat-name">
<h3>예쁜고양이</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소11-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/222F4E3C5701FAE643" alt="" title="폴드">
</div>
<div class="cat-name">
<h3>폴드</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
<!--고양이 요소12-->
<div class = "cat-item">
<div class="cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/27568B4058CFF7BF05" alt="" title="곱슬고양이">
</div>
<div class="cat-name">
<h3>곱슬고양이</h3>
<a href="#" class ="catrecipe-btn">Get kind</a>
</div>
</div>
<!--고양이 요소 마지막-->
</ul>
</div>
</div>
<div class = "cat-details">
<!--recipe close btn-->
<button type = "button" class = "recipe-close-btn"
id = "recipe-close-btn">
<i class="fas fa-times"></i>
</button>
<!--고양이 컨텐츠-->
<div class="cat-details-content">
<h2 class="cat-title">고양이 소개</h2>
<p class = "cat-category">Category Name</p>
<div class = "recipe-instruct">
<h3>지침:</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam delectus sed enim suscipit, excepturi ex minus eveniet sint ab? Hic fuga recusandae quibusdam delectus doloremque dolore nulla? Distinctio, itaque qui</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita excepturi voluptas sint debitis, aliquid iure ex commodi fugit! Dolorem, quae.</p>
</div>
<div class="recipe-cat-img">
<img src="https://t1.daumcdn.net/cfile/tistory/237F724D58CFF7B216" alt="">
</div>
<div class="recipe-link">
<a href="#" target="_blank">자바스크립트 어케 연결해요</a>
</div>
</div>
</div>
</div>
</div>
<!--좌측 컨텐츠-->
<div class = "left-container">
<!--시계구현-->
<div class = "clock"></div>
<div class = "clock-Line">
<hr style="border: solid 1.5px rgb(242, 184, 224)">
</div>
<!--날씨 위젯 소환-->
<div class = "weather">
<iframe width="100%" height="245" src="https://forecast.io/embed/#lat=37.5662&lon=126.9785&name=서울&color=#F6A8A6&font=arial&units=si" font=Arial frameborder="0"></iframe>
</div>
<!--음악 자동재생-->
<div class = "backgound-music">
<audio controls controlslist="nodownload" preload="none" autoplay loop>
<source src="https://drive.google.com/uc?export=download&id=1Il4aEI7ux-RsxOLqzGib-QFPxyVRnxUQ">
</audio>
</div>
<!--음악 2 교수님 도와주세요-->
<div class = "music">
<audio controls controlslist="nodownload" preload="none" autoplay loop></audio>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
안녕하새우