Merge pull request Vishal-raj-1#1903 from Amrutha1101/expandAndCollap…

…seCard Expand and collapse card
TusharUtane07 · Jul 19, 2021 · 1c0d723 · 1c0d723
2 parents 4869254 + ce91718
commit 1c0d723
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/assets/css/FAQs.css b/assets/css/FAQs.css
@@ -9,29 +9,60 @@
 	 margin: 0;
 	 padding: 0;
 	 font-family: 'Hind', sans-serif;
-	 background: rgb(239, 250, 251);
+	 background: brown;
 	 color: #4d5974;
 	 display: flex;
 	 min-height: 100vh;
-}
+	}
+
  .container {
 	 margin: 0 auto;
 	 padding: 4rem;
 	 width: 48rem;
 }
+
+ .card{
+	background-color:rgb(194, 187, 187);
+	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+}
+h2{
+	color: #362222;
+	text-align:center;
+	letter-spacing: 2px;
+	background-color:rgb(194, 187, 187);
+}
+.border-bottom{
+	border-bottom: 1px solid purple;
+	padding-bottom: 5px;
+}
+
+.img{
+    width:200px;
+	position:relative;
+    top: -10px;
+    filter: drop-shadow(0 25px 0px #E1D6F6);
+}
+
+/*expand and collapse cards*/
+
+
  .accordion .accordion-item {
-	 border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px solid #ebc7c7;
+	color: #222831;
+	text-align: center;
+
 }
+
  .accordion .accordion-item button[aria-expanded='true'] {
-	 border-bottom: 1px solid #03b5d2;
+	border-bottom: 1px dotted  #F0EFEF;
 }
  .accordion button {
 	 position: relative;
 	 display: block;
-	 text-align: left;
+	 align-items: center;
 	 width: 100%;
 	 padding: 1em 0;
-	 color: #7288a2;
+	 color: #31112C;
 	 font-size: 1.15rem;
 	 font-weight: 400;
 	 border: none;
@@ -40,15 +71,17 @@
 }
  .accordion button:hover, .accordion button:focus {
 	 cursor: pointer;
-	 color: #03b5d2;
+	 color: #EE4540;
+
 }
  .accordion button:hover::after, .accordion button:focus::after {
 	 cursor: pointer;
-	 color: #03b5d2;
-	 border: 1px solid #03b5d2;
+	 color: #A72693;
+	 border: 1px solid #A72693;
 }
  .accordion button .accordion-title {
 	 padding: 1em 1.5em 1em 0;
+
 }
  .accordion button .icon {
 	 display: inline-block;
@@ -80,7 +113,7 @@
 	 background: currentColor;
 }
  .accordion button[aria-expanded='true'] {
-	 color: #03b5d2;
+	 color: #EE4540;
 }
  .accordion button[aria-expanded='true'] .icon::after {
 	 width: 0;
@@ -100,7 +133,7 @@
 }
  .accordion .accordion-content p {
 	 font-size: 1rem;
-	 font-weight: 300;
+	 font-weight: bold;
 	 margin: 2em 0;
 }
- 
+/*ends*/
diff --git a/public/FAQs.html b/public/FAQs.html
@@ -9,14 +9,25 @@
 </head>
 <body>
     <div class="container">
-        <h2>Frequently Asked Questions</h2>
+
+      <div class="card">
+        <div class="column">
+          <img src="https://raw.githubusercontent.com/luamoris/react-faq-card-info/a8bb6248c30bae08f077566df122ac83c23a3532/src/img/illustration-woman-online-desktop.svg" class= "img">
+          <h2><span class ="border-bottom">FREQUENTLY ASKED QUESTIONS</span>  </h2>
+        </div>
+
+
+
         <div class="accordion">
-          <div class="accordion-item">
-            <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">What is JavaScript?</span><span class="icon" aria-hidden="true"></span></button>
+          <div class="card-1">
+            <div class="accordion-item">
+            <button id="accordion-button-1" aria-expanded="false" ><span class="accordion-title">What is JavaScript?</span><span class="icon" aria-hidden="true"></span></button>
             <div class="accordion-content">
               <p>JavaScript is a lightweight and interpreted programming language with object-oriented capacity. It helps you to develop interactivity into static HTML pages.</p>
             </div>
           </div>
+        </div>
+
           <div class="accordion-item">
             <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">What are the different features of JavaScript?</span><span class="icon" aria-hidden="true"></span></button>
             <div class="accordion-content">
@@ -50,6 +61,8 @@ <h2>Frequently Asked Questions</h2>
           </div>
         </div>
       </div>
+
+      </div>
       <script src="../assets/js/FAQs.js"></script>
 </body>
 </html>