changed topic section styling

zaidnaseer · Sep 27, 2024 · 8292855 · 8292855
1 parent 085507a
commit 8292855
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 145 deletions.
diff --git a/index.html b/index.html
@@ -122,83 +122,19 @@ <h2 id="papers-h2">Call for Papers</h2>
 
         <div class="h1-wrapper"><h1>Topics in this Conference</h1></div>
 
-        <!-- <div id="square_decoration"></div> -->
-        <div class="card-container">
-
-
-            <div class="card">
-            <img src="images/healthcare.jpg" alt="avatar" >
-                <div class="content">
-                    <h3>Healthcare Data Privacy</h3>
-
-                </div>
-            </div>   
-            <div class="card">
-                <img src="images/fraud-detection.jpeg" alt="avatar" >
-                    <div class="content">
-                        <h3>Financial Fraud Detect</h3>
-
-                    </div>
-            </div>
-            <div class="card">
-                <img src="images/smart city.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>Smart City</h3>
-
-                    </div>
-            </div>
-            <div class="card">
-                <img src="images/autonomous vehicle.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>Autonomous vehicles</h3>
-
-                    </div>
-            </div>
-            <div class="card">
-                <img src="images/healthcare.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>Personalized Marketing</h3>
-                    </div>
-            </div>  
-            <div class="card">
-                <img src="images/ar in education.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>AI in Education</h3>
-                    </div>
-            </div>  
-            <div class="card">
-                <img src="images/social network analysis.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>Social Network Analysis</h3>
-                    </div>
-            </div>  
-            <div class="card">
-                <img src="images/healthcare.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>Telecommunications Monitoring</h3>
-                    </div>
-            </div>  
-            <div class="card">
-                <img src="images/grid 2.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>Energy Grid Management</h3>
-                    </div>
-            </div>    
-            <div class="card">
-                <img src="images/healthcare.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>Retail Customer Analytics</h3>
-                    </div>
-            </div>       
-            <div class="card">
-                <img src="images/cybersecurity.jpg" alt="avatar" >
-                    <div class="content">
-                        <h3>Cybersecurity Defence</h3>
-                    </div>
-            </div>     
-
-
-        </div>
+        <ul>
+            <li>Healthcare Data Privacy</li>
+            <li>Financial Fraud Detect</li>
+            <li>Smart City</li>
+            <li>Autonomous Vehicles</li>
+            <li>Personalized Marketing</li>
+            <li>AI in Education</li>
+            <li>Social Network Analysis</li>
+            <li>Telecommunications Marketing</li>
+            <li>Energy Grid Management</li>
+            <li>Retail Customer Analytics</li>
+            <li>Cybersecurity Defense</li>
+        </ul>
     </section>
 
     <section id="section-dates">

diff --git a/styles/style.css b/styles/style.css
@@ -376,74 +376,6 @@ nav a {
   }
 }
 
-.card-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
-
-}
-.card {
-  display: inline-block;
-  background-color: lightblue;
-  width: 250px;
-  height: 150px;
-  position: relative;
-  overflow: hidden;
-  border-radius: 10px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1.6);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;  
-  opacity: 0;
-}
-.card.animate {
-  opacity: 1;
-}
-.card:nth-child(odd).animate {
-  animation: slideInLeft 1.25s ease-out forwards;
-}
-.card:nth-child(even).animate{
-  animation: slideInRight 1.25s ease-out forwards;
-}
-.card:hover {
-  transform: scale(1.05), translate(+15px, +15px);
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.32);
-}
-
-.card img {
-  width: 100%;
-  height: 60%;
-  object-fit: cover;
-  transition: transform 0.3s ease;
-}
-
-.card:hover img {
-  transform: scale(1.1);
-}
-
-.content {
-  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 10px;
-}
-.card:hover .content {
-  transform: translateY(0);
-}
-
-.content h3 {
-  font-size: 18px;
-  color: black;
-  align-items: center;
-}
-.content p {
-  color: #555;
-  line-height: 1.5;
-  margin-bottom: 20px;
-}
-
 .float-in-left {
   transform: translateX(-20px);
   opacity: 0;
@@ -553,7 +485,14 @@ section dt.visible, section dd.visible {
   transform: translateX(0) scale(1);
 }
 
+#section-topics {
+  text-align: center;
+}
 
+#section-topics ul {
+  display: inline-block;
+  text-align: left;
+}
 
 /* section dt{
   opacity: 0;