Skip to content

Commit

Permalink
modify page
Browse files Browse the repository at this point in the history
  • Loading branch information
@PeterPark1221
PeterPark1221 committed Dec 17, 2024
1 parent 3cd9b18 commit 7dfe537
Showing 1 changed file with 65 additions and 41 deletions.
106 changes: 65 additions & 41 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ <h2 class="major">프로토타입 - 매인 뷰</h2>
<p> 맛BTI 기반 식당 및 메뉴를 추천합니다. </p>
<p> 하단부분은 맛BTI, 근처, 가장인기있는 카테고리로 추천해줍니다. </p>
</div>
<img src="images/main.png"/>
<img src="images/main2.png"/>
<div class="gallery">
<a href="images/gallery/fulls/09.jpg" class="image filtered span-2-5" data-position="right"><img src="images/gallery/thumbs/09.jpg" alt="" /></a>
</div>
Expand Down Expand Up @@ -192,32 +192,32 @@ <h2 class="major">프로토타입 - 맛BTI카드 section 1</h2>
</div>

<div style="
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
justify-content: center;
align-items: center;
">
<img src="images/1.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/2.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/6.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/7.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/8.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/9.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/10.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/11.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
</div>
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
justify-content: center;
align-items: center;
">
<img src="images/1.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/2.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/6.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/7.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/8.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/9.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/10.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/11.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
</div>

<div style="text-align: center; margin-top: 20px;">
<a href="#page2" class="button primary color1 circle icon solid fa-angle-right">Next Page</a>
</div>
</section>

<section class="panel" id="page2">
<section class="panel">
<div class="intro color2" style="background: #714A49; background-image: none;">
<h2 class="major">프로토타입 - 맛BTI카드 section 2</h2>
<p> 16개의 맛BTI를 카드섹션으로 만들어 재미요소를 추가했습니다! </p>
Expand All @@ -226,32 +226,56 @@ <h2 class="major">프로토타입 - 맛BTI카드 section 2</h2>
</div>

<div style="
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
justify-content: center;
align-items: center;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
justify-content: center;
align-items: center;
">
<img src="images/12.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/13.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/14.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/15.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/16.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/17.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/18.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/19.png" style="width: 100%; max-height: 250px; object-fit: cover;"/>
<img src="images/12.png" style="width: 100%; max-height: 200px; object-fit: cover;"/>
<img src="images/13.png" style="width: 100%; max-height: 200px; object-fit: cover;"/>
<img src="images/14.png" style="width: 100%; max-height: 200px; object-fit: cover;"/>
<img src="images/15.png" style="width: 100%; max-height: 200px; object-fit: cover;"/>
<img src="images/16.png" style="width: 100%; max-height: 200px; object-fit: cover;"/>
<img src="images/17.png" style="width: 100%; max-height: 200px; object-fit: cover;"/>
<img src="images/18.png" style="width: 100%; max-height: 200px; object-fit: cover;"/>
<img src="images/19.png" style="width: 100%; max-height: 200px; object-fit: cover;"/>
</div>

<div style="text-align: center; margin-top: 20px;">
<!-- <div style="text-align: center; margin-top: 20px;">
<a href="#" class="button primary color1 circle icon solid fa-angle-left">Previous Page</a>
<a href="#demo" class="button primary color1 circle icon solid fa-angle-right">Next Page</a>
</div> -->
</section>



<section class="panel">
<div class="intro color2" style="background: #714A49; background-image: none;">
<h2 class="major">시연영상</h2>
<p> UMAI 어플리케이션의 시연영상입니다. </p>
<p> 맛BTI 테스트부터 맛집 추천까지의 전체 flow를 보여드립니다.</p>
</div>

<div class="content" style="
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
background: #714A49;
">
<!-- <video width="100%" height="auto" controls style="max-width: 800px;"> -->
<!-- <source src="videos/demo.mp4" type="video/mp4">
브라우저가 비디오 태그를 지원하지 않습니다. -->
<!-- </video> -->
</div>
</section>

<!-- Panel -->
Panel
<!-- <section class="panel color4-alt">
<div class="intro color4">
<h2 class="major">Contact</h2>
Expand Down Expand Up @@ -291,7 +315,7 @@ <h2 class="major">Contact</h2>
</div>
</section>
<!-- Panel -->
<Panel -->
<!-- <section class="panel color2-alt">
<div class="intro color2">
<h2 class="major">Elements</h2>
Expand Down

0 comments on commit 7dfe537

Please sign in to comment.