reformated code in app.py

src/app.py

@@ -3,85 +3,36 @@ st.set_page_config(page_title="NIRS Utils", page_icon=":goat:", layout="wide",)
 
 from Modules import *
 from Class_Mod.DATA_HANDLING import *
-
-
-# page_element="""
-# <style>
-# [data-testid="stAppViewContainer"]{
-#   background-image: url("https://www.cefe.cnrs.fr/templates/rt_zephyr/images/backgrounds/img-sky.jpg");
-#   background-size: cover;
-# }
-# </style>
-# """
-# st.markdown(page_element, unsafe_allow_html=True)
+from PIL import Image
 
 add_header()
 add_sidebar(pages_folder)
-
-
-st.markdown(
-    """
-    <style>
-    [data-testid="stAppViewContainer"]{
-    background-image: url("https://www.cefe.cnrs.fr/templates/rt_zephyr/images/backgrounds/img-sky.jpg");
-    background-size: cover;
-    }
-        .header1 { color: black; }
-    .green { color: green; }
-    .centered-text {
-        text-align: center;
-        color: black;}
-    .header1 { color: black;font-size: 70px;font-family: monospace; }
-    .header2 { color: rgb(74,165,41); }
-    .header3 { color: green; }
-    .blackfont {color: black;}
-
-    button {
-    height: auto;border-color:black;
-    width = 40px;
-    padding-top: 10px !important;
-    padding-bottom: 10px !important;}
-    </style>
-    """,
-    unsafe_allow_html=True
-)
-
-from PIL import Image
-
+local_css(css_file / "style_app.css") # replace the md <style> code
 
 # Page header
 with st.container():
     st.subheader("Plateforme d'Analyses Chimiques pour l'Ecologie-PACE :goat:")
-        # st.markdown("#### Welcome to")
     st.markdown("""
         <h1 class="header1">Easily process <br> your spectral data<br> with <span class="green">NIRS Utils</span></h1>
         """, unsafe_allow_html=True)
 
-for i in range(5):
-    mm1s, mmd2=st.columns([2,2])
+st.markdown('&nbsp;\n&nbsp;\n&nbsp;\n&nbsp;\n&nbsp;\n')
+mm1s, mmd2 = st.columns([2,2])
 image = Image.open("images/general.JPG")
 new_image = image.resize((700, 400))
 mmd2.image(new_image)
 
 mm1,mm, mm2=st.columns([2,1.5,2])
 with mm1:    
-    # st.title("welcome to NIRS Utils")
     st.markdown('<h2 class="centered-text">About</h2>', unsafe_allow_html=True)
-
     st.markdown('<h3 class="centered-text"> NIRS Utils is a powerful tool that was developed to ease the spectral data processing process. It benifits from the synergy between web and data science frameworks to offer a user-friendly interface featured a variety of analytical capabilities. Further information can be found here.</h3>', unsafe_allow_html=True)
-   #for easing the spectral data processing.
-    # st.markdown("We could add documentation here")
-    # st.write("Samples selection (PCA, [UMAP](https://umap-learn.readthedocs.io/en/latest/how_umap_works.html), ...), Predictive Modelling ([Pinard](https://github.com/GBeurier/pinard), [LWPLSR](https://doi.org/10.1002/cem.3209), ...), and Predictions using your data (CSV or DX files) and/or PACE NIRS Database.")
 
 with mm2:    
-    # st.title("welcome to NIRS Utils")
     st.markdown('<h2 class="centered-text">Key Features</h2>', unsafe_allow_html=True)
     st.markdown('<h3 class="centered-text"> Our app featured a variety of analytical capabilities that makes it the optimal solution for spectral data processing : <br> - Easy-to-use. <br> - Use advanced frameworks. <br> - Enhanced automation capabilities. <br> - Saves your time and efforts.</h3>', unsafe_allow_html=True)
 
 
-
-for i in range(3):
-    header1, header2, header3,header4 = st.columns(4)
+st.markdown('&nbsp;\n&nbsp;\n&nbsp;\n&nbsp;\n&nbsp;\n')
 
 header1, header2, header3,header4 = st.columns(4)
 if header1.button("Inputs"):

src/style/style_app.css

+/* CSS Snippet from W3schools: https://www.w3schools.com/howto/howto_css_contact_form.asp */
+
+[data-testid="stAppViewContainer"]{
+    background-image: url("https://www.cefe.cnrs.fr/templates/rt_zephyr/images/backgrounds/img-sky.jpg");
+    background-size: cover;
+    }
+.header1 { color: black; }
+.green { color: green; }
+.centered-text {
+    text-align: center;
+    color: black;
+    }
+.header1 { color: black;font-size: 70px;font-family: monospace; }
+.header2 { color: rgb(74,165,41); }
+.header3 { color: green; }
+.blackfont {color: black;}
+
+button {
+    height: auto;border-color:black;
+    width = 40px;
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    }
\ No newline at end of file