three paragraph

LaimaLP · Nov 7, 2023 · 2e6c662 · 2e6c662
1 parent f33e1c5
commit 2e6c662
Show file tree

Hide file tree

Showing 10 changed files with 2,792 additions and 40 deletions.
diff --git a/CSS/font-awesome.min.css b/CSS/font-awesome.min.css
diff --git a/CSS/main.css b/CSS/main.css
@@ -1,42 +1,60 @@
-body{
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    text-align: justify;
-    max-width: 600px;
-    margin: auto;
-    background-color: rgb(219, 216, 216);
-}
-.text-container{
-       margin-top: 20px;    
-       background-color: rgb(234, 245, 245);
-     position: relative;
-     border: 2px solid grey;
-     padding: 0 30px;
-    border-radius: 20px;
+body {
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  text-align: justify;
+  max-width: 1000px;
+  margin: auto;
+  background-color: rgb(219, 216, 216);
+}
+.card-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  text-align: justify;
+}
+.text-container {
+  margin-top: 20px;
+  background-color: rgb(234, 245, 245);
+  position: relative;
+  border: 2px solid grey;
+  padding: 0 30px;
+  border-radius: 20px;
+  box-shadow: 2px 2px 10px grey;
+  width: 35%;
+}
+.gift{
+    color: rgb(210, 38, 8);
 
 }
-.text{
-    font-size: 24px;
-
-}
-.more-text{
-    display: none;
-
-}
-.read-more-btn{
-    font-weight: 600;
-    color: rgb(30, 30, 105);
-    padding: 10px 10px;
-    border-radius: 10px;
-    border: 1px solid rgb(94, 93, 93);
-    position: absolute;
-    right: 1%;
-    bottom: 2%;
-    cursor: pointer;
+.tree{
+    color: rgb(7, 87, 7);
+
+
 
 }
-.text.show-more .more-text{
-    display: inline;
+
+.text {
+  font-size: 24px;
+}
+.more-text {
+  display: none;
+}
+.read-more-btn {
+  font-weight: 600;
+  color: rgb(30, 30, 105);
+  padding: 10px 10px;
+  border-radius: 10px;
+  border: 1px solid rgb(94, 93, 93);
+  position: absolute;
+  right: 1%;
+  bottom: 2%;
+  cursor: pointer;
+}
+.text.show-more .more-text {
+  display: inline;
+}
+.text.show-more .dots {
+  display: none;
+}
+.coffee{
+    color: rgb(93, 48, 17);
 }
-.text.show-more .dots{
-    display: none;
-}
diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf
diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot
diff --git a/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg
diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf
diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff
diff --git a/fonts/fontawesome-webfont.woff2 b/fonts/fontawesome-webfont.woff2
diff --git a/index.html b/index.html
@@ -1,18 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Read more or Less</title>
     <link rel="stylesheet" href="./CSS/main.css">
+    <link rel="stylesheet" href="./CSS/font-awesome.min.css">
+    <!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> -->
 </head>
+
 <body>
-    <div>
+
+    <div class="card-container">
         <div class="text-container">
-            <p class ="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit perferendis ipsa, qui non minus minima. Delectus, fugit minus consequatur placeat, reiciendis nulla totam tempore nam omnis aliquid corrupti expedita sapiente laboriosam voluptatum alias deleniti assumenda veritatis consectetur doloribus voluptatibus minima ullam optio. <span class="dots">...</span> <span class="more-text">Architecto vero a quis libero quisquam fugit. Non sit pariatur recusandae dolores quam consequatur mollitia itaque magnam eius, beatae ducimus veritatis vel tempore ex id, ea reiciendis et molestiae illo maiores. Ullam maxime, officia quos voluptate quis eos laboriosam enim nisi autem nesciunt pariatur maiores quae molestiae voluptates aperiam quidem hic est, et nulla culpa quibusdam soluta alias? Illo earum numquam facere delectus quas magni reiciendis praesentium? Numquam facere necessitatibus cum illo ipsa, facilis optio earum eaque officiis libero quam recusandae eum excepturi similique quidem tempore corrupti minus culpa modi quas ab atque fuga eveniet! Nulla, eum? Iure deserunt atque illo fuga accusamus quidem laboriosam commodi, obcaecati consequatur!</span></p>
+            <h2>  <i class="fa fa-gift gift" aria-hidden="true" style="font-size: 80px;"></i> Gifts</h2>
+            <p class="text">Lorem ipsum
+                dolor sit amet consectetur adipisicing elit. Suscipit perferendis
+                ipsa, qui non minus minima. Delectus, fugit minus consequatur placeat, reiciendis nulla totam tempore
+                nam omnis aliquid corrupti expedita sapiente laboriosam voluptatum alias deleniti assumenda veritatis
+                consectetur doloribus voluptatibus minima ullam optio. <span class="dots">...</span> <span
+                    class="more-text">Architecto vero a quis libero quisquam fugit. Non sit pariatur recusandae dolores
+                    quam consequatur mollitia itaque magnam eius, beatae ducimus veritatis vel tempore ex id, ea
+                    reiciendis et molestiae illo maiores. Ullam maxime, officia quos voluptate quis eos laboriosam enim
+                    nisi autem nesciunt pariatur maiores quae molestiae voluptates aperiam quidem hic est, et nulla
+                    culpa quibusdam soluta alias? </span></p>
             <button class="read-more-btn">Read More</button>
         </div>
-        <script src="./script.js"></script>
+
+        <div class="text-container">
+            <h2>  <i class="fa fa-coffee coffee" aria-hidden="true" style="font-size: 80px;"></i> Gifts</h2>
+            <p class="text">Lorem ipsum
+                dolor sit amet consectetur adipisicing elit. Suscipit perferendis
+                ipsa, qui non minus minima. Delectus, fugit minus consequatur placeat, reiciendis nulla totam tempore
+                nam omnis aliquid corrupti expedita sapiente laboriosam voluptatum alias deleniti assumenda veritatis
+                consectetur doloribus voluptatibus minima ullam optio. <span class="dots">...</span> <span
+                    class="more-text">Architecto vero a quis libero quisquam fugit. Non sit pariatur recusandae dolores
+                    quam consequatur mollitia itaque magnam eius, beatae ducimus veritatis vel tempore ex id, ea
+                    reiciendis et molestiae illo maiores. Ullam maxime, officia quos voluptate quis eos laboriosam enim
+                    nisi autem nesciunt pariatur maiores quae molestiae voluptates aperiam quidem hic est, et nulla
+                    culpa quibusdam soluta alias? </span></p>
+            <button class="read-more-btn">Read More</button>
+        </div>
+
+
+
+
+
+
+
+        <div class="text-container">
+
+            <h2> <i class="fa fa-tree tree" aria-hidden="true" style="font-size: 80px;"></i> Christmas tree</h2>
+            <p id="text" class="text">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit perferendis
+                ipsa, qui non minus minima. Delectus, fugit minus consequatur placeat, reiciendis nulla totam
+                tempore nam omnis aliquid corrupti expedita sapiente laboriosam voluptatum alias deleniti assumenda
+                veritatis consectetur doloribus voluptatibus minima ullam optio. <span class="dots">...</span> <span
+                    class="more-text">Architecto vero a quis libero quisquam fugit. Non sit pariatur recusandae
+                    dolores quam consequatur mollitia itaque magnam eius, beatae ducimus veritatis vel tempore ex
+                    id, ea reiciendis et molestiae illo maiores. </span>
+            </p>
+            <button class="read-more-btn">Read More</button>
+
+        </div>
+
+
     </div>
+
+
+
+    <script src="./script.js"></script>
 </body>
+
 </html>
diff --git a/script.js b/script.js
@@ -1,4 +1,5 @@
 console.log("labas")
+
 const readMoreBtn = document.querySelector(".read-more-btn");
 const text = document.querySelector(".text");