Merge branch 'feature/newjinlee' into develop

Tekken-Supporter · Nov 29, 2023 · 83f6849 · 83f6849
2 parents cef81a4 + 855743c
commit 83f6849
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 121 deletions.
diff --git a/charinfo.css b/charinfo.css
@@ -8,9 +8,8 @@
 }
 
 .container {
-  display: static;
-  width: 50%;
-  height: flex;
+  width: 100%;
+  height: 100vh;
   background-color: rgba(0, 0, 0, 0);
   display: flex;
   align-items: center;
@@ -24,29 +23,22 @@
   z-index: -1;
 }
 
-@media (min-aspect-ratio:16/9){
-  .background-clip{
-      width: 100%;
-      height: auto;
+@media (min-aspect-ratio:16/9) {
+  .background-clip {
+    width: 100%;
+    height: auto;
   }
 }
 
-@media (max-aspect-ratio:16/9){
-  .background-clip{
-      width: auto;
-      height: 100%;
+@media (max-aspect-ratio:16/9) {
+  .background-clip {
+    width: auto;
+    height: 100%;
   }
 }
 
 body {
   display: flex;
-  align-items: center;
-  min-height: 108vh;
-  font-size: medium;
-  justify-content: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
   padding: 10px;
 }
 
@@ -111,7 +103,7 @@ header {
   transition: .5s;
 }
 
-.reviews-container{
+.reviews-container {
   position: static;
   width: 25%;
   top:50px;
@@ -129,31 +121,76 @@ header {
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
 }
 
-button{
-  padding:5px 5px 5px 5px;
+
+.reviews-container>div {
+  margin-bottom: 15px;
+  width: 100%;
+  height: 50px;
+}
+
+.reviews-container select,
+.reviews-container input[type="text"],
+.reviews-container textarea {
+  width: 100%;
+  height: 35px;
+  padding: 5px;
+  margin-bottom: 10px;
+}
+
+.reviews-container textarea {
+  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;
+}
+
+.pagination-container {
+  position: static;
+  width: calc(100%/4 - 20px);
+  margin: 20px;
+  padding: 20px;
 }
 
 .content {
-  position: relative;
-  left: 30px;
-  margin-right: 30px;
-  width: 50%;
+  position: static;
+  width: calc(100%/4 - 20px);
+  margin: 20px;
+  padding: 20px;
   height: flex;
   text-align: center;
   font-family: 'Inter';
   font-style: italic;
   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%);
 }
 
-.infoandpic_char{
+.characterlist {
   position: static;
-  width:60%;
+  width: 100%;
+  text-align: center;
+}
+
+.infoandpic_char {
+  position: static;
+  width: calc(100%/4 - 20px);
+  margin: 20px;
+  padding: 20px;
   height: flex;
   text-align: center;
   font-family: 'Inter';
@@ -163,16 +200,15 @@ button{
   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;
-  margin-top: 10px;
-  margin-left: 20px;
 }
 
 .character-info {
@@ -181,20 +217,16 @@ button{
 }
 
 .character-image {
- width: 300px;
- height: auto;
- margin-top: 10px;
-}
-.characterlist{
-  width:100%;
-  text-align: center;
+  width: 300px;
+  height: auto;
+  margin-top: 10px;
 }
 
 .linkposition {
   position: relative;
   width: 100%;
   height: flex;
- 
+
   font-size: 12px;
   display: inline-block;
   background: linear-gradient(180deg, #d9d9d9e7 0%, rgba(167, 212, 227, 0.56) 0%);
@@ -213,7 +245,7 @@ img {
   font-family: 'Inter';
   font-style: normal;
   line-height: 20px;
-  text-transform: uppercase;  
+  text-transform: uppercase;
   color: white;
 }
 
@@ -224,7 +256,7 @@ h3 {
 }
 
 #btn-all-close {
-  width:100%;
+  width: 100%;
   background-color: #b1a5dd;
   font-size: 13px;
   border: none;
@@ -246,17 +278,10 @@ h3 {
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);
 }
 
-.pagination-container {
-  position: static;
-  width: 25%;
-  margin: 20px;
-  padding: 20px;
-}
-
 .page-link {
   cursor: pointer;
   padding: 5px;
-  
+
   margin-left: 5px;
   border: 1px solid #ccc;
   background: linear-gradient(180deg, #D9D9D9 0%, rgba(217, 217, 217, 0.51) 0%);