Added more html content, updated styles

NajmAjmal-old · Oct 2, 2023 · 555d25c · 555d25c
1 parent f1d7a37
commit 555d25c
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -8,11 +8,51 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <div class="content">
-        <h1>Welcome to My PWA Website</h1>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        <button id="installButton" style="display: none;">Install PWA</button>
+    <div class="container">
+        <div class="content">
+            <h1>Welcome to My PWA Website</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula nisi a suscipit.</p>
+        </div>
+        <div class="content">
+            <a href="#" class="button">Learn More</a>
+        </div>
     </div>
+
+    <div class="container">
+        <div class="content">
+            <h1>Another Section</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula nisi a suscipit.</p>
+        </div>
+        <div class="content">
+            <a href="#" class="button-alt">Explore</a>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="content">
+            <h1>Install Our PWA</h1>
+            <p>Click the button below to install our Progressive Web App and enjoy an enhanced browsing experience.</p>
+        </div>
+        <div class="content">
+            <button id="installButton" class="install-button">Install PWA</button>
+        </div>
+    </div>
+
+    <!-- Additional container for customizing the website -->
+    <div class="container">
+        <div class="content">
+            <h1>Customize This Website</h1>
+            <p>You can customize and make this website installable. For more info, visit our GitHub repository:</p>
+            <a href="https://github.com/NajmAjmal/pwa-template" class="button-customize">GitHub Repository</a>
+            <a href="https://github.com/NajmAjmal/pwa-template/fork" class="button-customize">Fork Me</a>
+        </div>
+        <div class="content">
+            <button id="customizeInstallButton" class="install-button-customize">Install PWA</button>
+        </div>
+    </div>
+
+    <!-- Add more containers with content and styling as needed -->
+
     <script src="app.js"></script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -5,20 +5,68 @@ body {
     background-color: #f0f0f0;
 }
 
+.container {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-gap: 20px;
+    text-align: center;
+    transition: transform 0.3s ease;
+    cursor: pointer;
+}
+
+.container:hover {
+    transform: scale(1.05);
+}
+
 .content {
     text-align: center;
-    padding: 20px;
 }
 
-button {
+.button,
+.button-alt {
     background-color: #4caf50;
     color: white;
     border: none;
     padding: 10px 20px;
     cursor: pointer;
     border-radius: 5px;
+    transition: background-color 0.3s ease;
 }
 
-button:hover {
+.button:hover,
+.button-alt:hover {
     background-color: #45a049;
 }
+
+.install-button {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.install-button:hover {
+    background-color: #2980b9;
+}
+
+/* Additional styles and effects */
+
+.container-alt {
+    background-color: #f5f5f5;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+}
+
+.container-alt:hover {
+    transform: scale(1.03);
+}
+
+/* Add more custom styles and containers as needed */