Update streamlit_app.py

streamlit_app.py

@@ -11,14 +11,14 @@ st.set_page_config(page_title="News App - Group 09", layout="wide")
 load_css()
 
 #writing the title
-st.markdown('<div class="main-title">News App — Created by Group 09</div>',
+st.markdown('<div class="main_title">News App — Created by Group 09</div>',
     unsafe_allow_html=True)
 
 #writing the description 
-st.write('''<div class="feature-text">Welcome! In this app users can freely 
+st.write('''<div class="feature_text">Welcome! In this app users can freely 
 carry out classification of news content, ask our model questions and play 
 our mini-game to see your classification skills </div> <br>''',unsafe_allow_html=True)
-st.write('<div class="feature-text">The features of our webapp are shown below: </div>', unsafe_allow_html=True)
+st.write('<div class="feature_text">The features of our webapp are shown below: </div>', unsafe_allow_html=True)
 
 #dividing the page
 st.divider()
@@ -28,11 +28,11 @@ col1, col2 = st.columns(2)
 
 with col1:
     #writing the topic fo the first feature of the app
-    st.markdown('<div class="topic-header">📂 CSV Content Features</div>', unsafe_allow_html=True)
+    st.markdown('<div class="topic_header">📂 CSV Content Features</div>', unsafe_allow_html=True)
     #writing the content inside the first feature 
     st.markdown("""
-        <div class="feature-box">
-            <div class="feature-text">
+        <div class="feature_box">
+            <div class="feature_text">
                 • <b>Classification:</b> Upload a CSV and label the data<br>
                 • <b>Analysis:</b> See explanatory data analysis here <br>
                 • <b>Q & A:</b> Ask the model questions from your data
@@ -42,11 +42,11 @@ with col1:
 
 with col2:
     #writing the topic fo the second feature of the app
-    st.markdown('<div class="topic-header">🎮 Interactive Mini-Game</div>', unsafe_allow_html=True)
+    st.markdown('<div class="topic_header">🎮 Interactive Mini-Game</div>', unsafe_allow_html=True)
     #writing the content inside the second feature 
     st.markdown("""
-        <div class="feature-box">
-            <div class="feature-text">
+        <div class="feature_box">
+            <div class="feature_text">
                 • <b>Classification Test:</b> Play a game where you classify news snippets <br>
             </div>
         </div>
@@ -56,8 +56,8 @@ with col2:
 st.divider()
 
 #creating the model used for quick classification
-st.markdown('<div class="topic-header">🔍 Quick Model Test</div>', unsafe_allow_html=True)
-st.write('<div class="feature-text">Type a sentence below to see how our fine-tuned model classifies news:</div>',unsafe_allow_html=True)
+st.markdown('<div class="topic_header">🔍 Quick Model Test</div>', unsafe_allow_html=True)
+st.write('<div class="feature_text">Type a sentence below to see how our fine-tuned model classifies news:</div>',unsafe_allow_html=True)
 
 #calling and loading the fine tuned model which is uploaded to the hugging face 
 @st.cache_resource