Merge pull request #34 from ProjectInTheClass/refactor-front-mainview

html initial setting
ProjectInTheClass · Dec 15, 2024 · 86a5146 · 86a5146
2 parents 3a8f1fc + 065c675
commit 86a5146
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 13 deletions.
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -1,10 +1,10 @@
 @import url(fontawesome-all.min.css);
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i");
 
-/*
-	Ethereal by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+/*
+	Ethereal by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
 
 html, body, div, span, applet, object,
@@ -3686,4 +3686,4 @@ input, select, textarea {
 				transform: none;
 			}
 
-	}
+	}
diff --git a/docs/index.html b/docs/index.html
@@ -22,18 +22,61 @@
 
 						<!-- Panel (Banner) -->
 							<section class="panel banner right">
-								<div class="content color0 span-3-75">
-									<h1 class="major">Hello, my name<br />
-									is Ethereal</h1>
-									<p>This is <strong>Ethereal</strong>, a free site template by AJ for <a href="https://html5up.net">HTML5 UP</a>. It’s fully responsive, built on HTML5 and CSS3, and released entirely for free under the Creative Commons license. Hope you dig it :)</p>
-									<ul class="actions">
-										<li><a href="#first" class="button primary color1 circle icon solid fa-angle-right">Next</a></li>
-									</ul>
+								<div class="content color0 span-2-75">
+									<h1 class="major">Recordiary</h1>
+									<p>소리로 기록하는 나의 하루</p>
 								</div>
 								<div class="image filtered span-1-75" data-position="25% 25%">
 									<img src="images/pic01.jpg" alt="" />
 								</div>
 							</section>
+
+                            <section class="panel">
+                                <div class="image filtered span-1-75">
+                                   <video width="100%", height="100%" controls>
+                                   <source src="images/DemoVideo.mp4" type="video/mp4">
+                                      데모 영상
+                                   </video>
+                                </div>
+                                <div class="intro color2 span-2-75">
+                                   <h2 class="major">DemoVideo</h2>
+                                   <p>데모 영상</p>
+                                </div>
+                             </section>
+
+                            <section class="panel banner right">
+                                <div class="intro color2 span-2-75">
+                                    <h2 class="major">음성 일기 남기기</h2>
+                                    <p><b>나의 하루를 간편하게 음성으로 남겨보세요!</b></p>
+                                    <P>AI가 자동으로 분석한 오늘의 키워드와 함께라면, 음성을 남기는 것 만으로도 오늘 하루를 기억하기에 충분합니다.</p>
+                                </div>
+                                <div class="image filtered span-1-75" data-position="25% 25%">
+                                    <img src="images/pic01.jpg" alt="" />
+                                </div>
+                            </section>
+
+                            <section class="panel banner right">
+                                <div class="intro color2 span-2-75">
+                                    <h2 class="major">나만의 방 꾸미기</h2>
+                                    <p><b>"나"의 하루와 "나"의 취향이 모두 담긴 "나"만의 방을 완성해보세요!</b></p>
+                                    <P>일기가 담긴 가구를 방에 배치하여 나만의 방을 꾸며나갈 수 있습니다.</p>
+                                </div>
+                                <div class="image filtered span-1-75" data-position="25% 25%">
+                                    <img src="images/pic01.jpg" alt="" />
+                                </div>
+                            </section>
+
+                            <section class="panel banner right">
+                                <div class="intro color2 span-2-75">
+                                    <h2 class="major">캘린더</h2>
+                                    <p><b>나의 감정이 완성하는 나의 하루, 나의 한 달</b></p>
+                                    <P>AI 감정 분석을 기반으로 한 색상들이 캘린더에 표시되며, 한 달 동안의 감정에 관한 통계도 확인할 수 있습니다.</p>
+                                </div>
+                                <div class="image filtered span-1-75" data-position="25% 25%">
+                                    <img src="images/pic01.jpg" alt="" />
+                                </div>
+                            </section>
+
 
 						<!-- Panel (Spotlight) -->
 							<section class="panel spotlight medium right" id="first">
@@ -421,4 +464,4 @@ <h3 class="major">Form</h3>
 			<script src="assets/js/main.js"></script>
 
 	</body>
-</html>
+</html>