2024/04/18,13:29

Kicamon · Apr 18, 2024 · 78b05ee · 78b05ee
1 parent 9f796fa
commit 78b05ee
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 34 deletions.
diff --git a/css/card.css b/css/card.css
@@ -1,20 +1,21 @@
 .card {
-  height: 25%;
-  width: 40%;
+  height: 25vmin;
+  width: 40vmax;
   margin: 3% auto;
   border-radius: 30px;
   display: flex;
-  justify-content: space-between;
+  /* justify-content: space-between; */
+  justify-content: center;
+  align-items: center;
   padding-top: 1%;
   padding-left: 5%;
   padding-right: 5%;
-  border: 1px,solid,rgba(255, 255, 255, 0.6);
-  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
+  border: 1px, solid, rgba(255, 255, 255, 0.6);
 }
 
 .card>* {
-  height: 90%;
-  width: 30%;
+  height: 22.5vmin;
+  width: 12vmax;
 }
 
 .card>.head-img {
@@ -24,8 +25,8 @@
 .card>.head-img>.img-l,
 .card>.head-img>.img-y {
   margin: 0 auto;
-  width: 90%;
-  height: 80%;
+  width: 16.4vmin;
+  height: 16.4vmin;
   border-radius: 50%;
 }
 
@@ -49,19 +50,17 @@
 }
 
 .card>.heart {
-  /* background-color: black; */
-  width: 180px;
-  height: 180px;
   display: flex;
+  width: 20vmin;
+  height: 20vmin;
   justify-content: center;
   align-items: center;
   animation: HeaBeat 2s linear infinite;
 }
 
 .card>.heart>.ani {
-  width: 20%;
-  height: 20%;
-  margin-top: 10%;
+  width: 4vmin;
+  height: 4vmin;
   background-color: red;
   transform: rotate(45deg);
 }

diff --git a/css/clover.css b/css/clover.css
@@ -80,3 +80,13 @@ body {
     transform: rotate(360deg);
   }
 }
+
+.love-letter {
+  position: absolute;
+  width: 50vmin;
+  height: 30vmax;
+  border-radius: 20px;
+  background-color: rgba(192, 192, 192, 0.5);
+  /* backdrop-filter: blur(5px); */
+  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
+}
diff --git a/css/nav.css b/css/nav.css
@@ -2,7 +2,7 @@
   position: sticky;
   top: 0px;
   width: 100%;
-  height: 6%;
+  height: 6vh;
   align-items: center;
   display: flex;
   position: relative;

diff --git a/css/page.css b/css/page.css
@@ -1,6 +1,6 @@
 .page {
   width: 100%;
-  height: 45%;
+  height: 45vh;
   margin-top: 10%;
   background-color: #ffffff;
   background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
@@ -49,7 +49,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 15%;
+  width: 15vmax;
   height: 100px;
   background-color: #f6f6f7;
   border-radius: 20px;

diff --git a/css/style.css b/css/style.css
@@ -6,9 +6,9 @@
 }
 
 body {
-  height: 100vh;
+  /* height: 100vh; */
   width: 100vw;
-  overflow-y: hidden;
+  overflow-x: hidden;
   justify-content: center;
   background-image: url(../static/background.jpg);
   /* align-items: center; */
@@ -17,4 +17,5 @@ body {
 .frosted-glass {
   background-color: rgba(192, 192, 192, 0.5);
   backdrop-filter: blur(5px);
+  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
 }
diff --git a/pages/clover.html b/pages/clover.html
@@ -1,17 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>love</title>
-    <link href="../css/clover.css" rel="stylesheet">
-  </head>
-  <body>
-    <div class="box">
-      <div class="clover"></div>
-      <div class="clover"></div>
-      <div class="clover"></div>
-      <div class="clover"></div>
-    </div>
-  </body>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>love</title>
+  <link href="../css/clover.css" rel="stylesheet">
+</head>
+
+<body>
+  <div class="box">
+    <div class="clover"></div>
+    <div class="clover"></div>
+    <div class="clover"></div>
+    <div class="clover"></div>
+  </div>
+  <div class="love-letter frosted-glass"></div>
+</body>
+
 </html>