collection style

tu2463 · Dec 5, 2023 · 5df8016 · 5df8016
1 parent 4da9aac
commit 5df8016
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/final-project/collection.html b/final-project/collection.html
@@ -4,6 +4,7 @@
   <head>
     <title>Focus With the Little Prince</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Antic">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Antic Didone">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/collection.css">
     <script defer src="js/storage.js"></script>
@@ -32,16 +33,16 @@
         <div id = "planet-group">
             <div id = planet class = "homepage">
                 <img src = "img/planet_collection.png">
-                <div class = "planet-content">
-                    <div class = "planet-text">
+                <div class = "planet-content treasure-content">
+                    <div class = "treasure-display">
                         <div class = "title">
                             p_title
                         </div>
-                        <div class = "textbox">
-                            p_body
+                        <div class = "body">
+                            p_body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body
                         </div>
                         <div class = "collected-time">
-                            p_time
+                            Discovered on
                         </div>
                     </div> <!-- end of planet text -->
                 </div> <!-- end of planet content -->

diff --git a/final-project/css/collection.css b/final-project/css/collection.css
@@ -25,3 +25,30 @@ header {
     border: 7px solid #e9d5ca;
 }
 
+.planet-content.treasure-content {
+    top: 10%;
+}
+
+.treasure-display {
+    width: 431px;
+}
+
+.body {
+    margin-top: 29px;
+    box-sizing: border-box;
+    padding: 7px 15px;
+    border: 7px solid #e9d5ca;
+    border-radius: 15px;
+    background: rgba(233, 213, 202, 0.5);
+    width: 100%;
+    height: 395px;
+
+    font-family: "Antic Didone";
+    text-align: justify;
+}
+
+.collected-time {
+    margin-top: 10px;
+    font-size: 18px;
+    color: rgba(233, 213, 202, 0.5);
+}