Merge pull request #68 from Tekken-Supporter/feature/newjinlee

Feature/newjinlee
Tekken-Supporter · Nov 29, 2023 · 896b71c · 896b71c
2 parents 83f6849 + 60a0020
commit 896b71c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 52 deletions.
diff --git a/charinfo.css b/charinfo.css
@@ -39,6 +39,8 @@
 
 body {
   display: flex;
+  align-items: center;
+  background-position: center;
   padding: 10px;
 }
 
@@ -105,14 +107,11 @@ header {
 
 .reviews-container {
   position: static;
-  width: 25%;
-  top:50px;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  width: calc(100%/4 - 20px);
+  top: 50px;
+  padding: 20px;
+  margin: 20px;
   height: flex;
-  text-align: center;
-  font-family: 'Inter';
-  font-style: italic;
   font-weight: 170;
   font-size: 15px;
   line-height: 20px;
@@ -121,9 +120,10 @@ header {
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
 }
 
-
 .reviews-container>div {
   margin-bottom: 15px;
+  color: #333;
+  font-size: 14px;
   width: 100%;
   height: 50px;
 }
@@ -141,18 +141,8 @@ header {
   height: 80px;
 }
 
-.reviews-container .submit_btn {
-  width: 100px;
-  height: 40px;
-  background: transparent;
-  border: 2px solid #fff;
-  outline: none;
-  border-radius: 6px;
-  cursor: pointer;
-  color: #fff;
-  font-weight: 500;
-  margin-right: 40px;
-  transition: .5s;
+button {
+  padding: 5px;
 }
 
 .pagination-container {
@@ -162,6 +152,19 @@ header {
   padding: 20px;
 }
 
+.pagination-container .review-list {
+  width: 100%;
+}
+
+
+.review-list .review {
+  width: 100%;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 20px;
+  background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
+}
+
 .content {
   position: static;
   width: calc(100%/4 - 20px);
@@ -174,14 +177,12 @@ header {
   font-weight: 170;
   font-size: 20px;
   line-height: 30px;
-
   text-transform: uppercase;
   color: black;
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
 }
 
 .characterlist {
-  position: static;
   width: 100%;
   text-align: center;
 }
@@ -200,12 +201,10 @@ header {
   line-height: 30px;
   text-transform: uppercase;
   color: black;
-
 }
 
 .character-container {
   display: none;
-  width: 100%;
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
   border: 1px solid #ccc;
   padding: 10px;
@@ -271,13 +270,6 @@ h3 {
   transition: all.35s;
 }
 
-.review {
-  border: 1px solid #ccc;
-  padding: 10px;
-  margin-bottom: 20px;
-  background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
-}
-
 .page-link {
   cursor: pointer;
   padding: 5px;

diff --git a/charinfo.html b/charinfo.html
@@ -37,8 +37,6 @@
 </head>
 
 <body>
-
-    <!-- character information -->
     <div class="container">
         <video autoplay loop muted plays-inline class="background-clip">
             <source src="tekken.mp4" type="video/mp4">
@@ -58,10 +56,10 @@ <h2 class="logo">Tekken Supporter</h2>
             </nav>
         </header>
 
+        <!-- review input -->
         <div class="reviews-container">
             <h2>캐릭터 리뷰</h2><br><br>
             <form onsubmit="return submitReview()" action="#">
-                <div>
                 <label>캐릭터 이름:</label>
                 <select class="input_champion" id="cName" name="c_name">
                     <option value="" disabled selected hidden>캐릭터를 선택하세요</option>
@@ -103,26 +101,26 @@ <h2>캐릭터 리뷰</h2><br><br>
                     <option value="XIAOYU">XIAOYU</option>
                     <option value="YOSHIMITSU">YOSHIMITSU</option>
                 </select><br>
-                </div>
-                <div>
+
                 <label>사용자 ID:</label>
                 <input type="text" id="userId" name="id"></input><br>
-                </div>
-                <div>
+
                 <label>리뷰 내용:</label>
                 <textarea id="reviewContent" name="reviewData" required></textarea><br>
-                </div>
+
                 <button id="submit" class="submit_btn">리뷰 제출</button>
             </form>
         </div>
-    
-        <!--- review -->
+
+        <!--- review output-->
         <div id="pagination-container" class="pagination-container">
             <form onsubmit="return updateReview()" action="#">
                 <div id="reviewList" class="review-list"></div>
             </form>
         </div>
-
+
+
+        <!-- character information -->
         <div class="content">
             <div class="characterlist">
                 <p class="character-link" data-character="character1">AKUMA</p>
@@ -134,7 +132,6 @@ <h2>캐릭터 리뷰</h2><br><br>
                 <p class="character-link" data-character="character7">CLAUDIO</p>
                 <p class="character-link" data-character="character8">DEVIL JIN</p>
                 <p class="character-link" data-character="character9">EDDY</p>
-
             </div>
             <button id="btn-all-close">Close Information</button>
             <ul type="none"></ul>
@@ -148,41 +145,51 @@ <h2>캐릭터 리뷰</h2><br><br>
             </div>
         </div>
 
+        <!-- character popup -->
         <div class="infoandpic_char">
             <div class="character-container" id="character1">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
             <div class="character-container" id="character2">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
             <div class="character-container" id="character3">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
             <div class="character-container" id="character4">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
             <div class="character-container" id="character5">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
             <div class="character-container" id="character6">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
             <div class="character-container" id="character7">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
             <div class="character-container" id="character8">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
             <div class="character-container" id="character9">
-                <p>DIFFICULTY</p><p class="character-info"></p>
+                <p>DIFFICULTY</p>
+                <p class="character-info"></p>
             </div>
 
         </div>