Upload 2 files

app.py

@@ -0,0 +1,193 @@
+# Here created a Google - Clone design using Streamlit
+# In streamlit you can use html and css 
+
+import streamlit as st
+
+def main():
+    # Styling using Streamlit markdown
+    st.markdown(
+        """
+        <style>
+            html {
+                height: 100%;
+                font-size: 100%;
+            }
+            
+            body {
+                font: 13px arial, sans-serif;
+            }
+            
+
+
+                nav {
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+                padding: 10px;
+                background-color: #ffffff;
+                float: right;
+                margin-right: -44%;
+                margin-top: -12%;
+            }
+
+            .right_nav {
+                list-style: none;
+                display: flex;
+                align-items: center;
+                gap: 20px;
+                margin: 3rem;
+            }
+
+            .apps {
+                width: 16px;
+                height: 16px;
+                opacity: 0.75;
+                transition: opacity 0.2s;
+            }
+
+            .apps:hover {
+                opacity: 1;
+            }
+
+            .sign_in {
+                height: 60%;
+                background: #4285f4;
+                width: 86px;
+                height: 35px;
+            }
+
+            .sign_in a {
+                font-weight: bold;
+                color: #fff;
+                text-decoration: none;
+                padding-left: 10%;
+            }
+
+            .sign_in a:hover {
+                text-decoration: none;
+            }
+              
+            .cntr_pg {
+                position: absolute;
+                top: 40%;
+                left: 50%;
+                margin-right: -40%;
+                transform: translate(-50%, -50%);
+                margin: 3rem;
+            }
+            
+            .logo {
+                display: block;
+                margin: auto;
+                height: 92px;
+                width: 272px;
+                margin-top:40%;
+            }
+            
+            .search_bar {
+                border-radius: 40px;
+                width: 585px;
+                margin: auto;
+                height: 39px;
+                border: .7px solid #E4E4E4;
+                background-color: #fff;
+                box-shadow: 0px 1px 4px #E4E4E4;
+                margin-bottom: 20px;
+                outline: none;
+                text-indent: 15px;
+            }
+            
+            .search_bar:hover, .search_bar:active {
+                padding-bottom: 2px;
+                padding-top: 1px;
+                margin-top: -1px;
+                width: 585px;
+                box-shadow: 0px 3px 8px #E4E4E4;
+                outline: none;
+            }
+            
+            .mic {
+                width: 14px;
+                height: 20px;
+                position: relative;
+                left: 555px;
+                top: 34px;
+            }
+            
+            .submit_buttons {
+                display: inline-block;
+                height: 36px;
+                cursor: pointer;
+                line-height: 27px;
+                background-color: #f2f2f2;
+                border: 1px solid #f2f2f2;
+                border-radius: 2px;
+                color: #757575;
+                cursor: default;
+                font-family: arial, sans-serif;
+                font-size: 13px;
+                font-weight: bold;
+                margin: 11px 4px;
+                min-width: 54px;
+                padding: 0 16px;
+                text-align: center;
+            }
+            
+            .submit_buttons {
+                position: relative;
+                left: 25%;
+                right: -50%;
+                cursor: pointer;
+            }
+            
+            .submit_buttons:hover {
+                border: .7px solid #d0d0d0;
+                color: #000;
+                box-shadow: 0px 1px 4px #E4E4E4;
+            }
+            
+           
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+
+
+  # Navigation (navbar)
+    st.markdown(
+        """
+        <nav>
+            <ul class="right_nav">
+                <li><a href="#" style="color: black;">Gmail</a></li>
+                <li><a href="#" style="color: black;">Images</a></li>
+                <li><a href="#"><img class="apps" src="https://thumb.ibb.co/gykLCw/grid_menu.png"></a></li>
+                <li class="sign_in" style="padding: 2%; margin-left: 2%"><a href="#">Sign in</a></li>
+            </ul>
+        </nav>
+        """,
+        unsafe_allow_html=True
+    )
+
+    # Center content
+    st.markdown(
+        """
+        <section class="cntr_pg">
+              <img class="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo" />
+             <img class="mic" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Google_microphone_logo.png" alt="" />
+            <form action="#" method="#" name="searchquery" class="form">
+                <input type="text" name="searchfield" class="search_bar">
+                <div class="search_buttons">
+                        <input class="submit_buttons" type="submit" value="Google Search" name="submit">
+                    <input class="submit_buttons" type="submit" value="I'm Feeling Lucky" name="feelinglucky">
+                   </div>
+            </form>
+        </section>
+        """,
+        unsafe_allow_html=True
+    )
+
+   
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1 @@
+streamlit==1.23.1