Main Page: Difference between revisions

From Citypedia Online
← Older editNewer edit →
VisualWikitext
mNo edit summary
mNo edit summary
Line 50: Line 50:
         </div>
         </div>


<!DOCTYPE html>
<div style="display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;">
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { font-family: sans-serif; line-height: 1.6; margin: 0; padding: 20px; background: #f6f6f6; }
       
        .main-container {
            display: flex;
            gap: 20px;
            max-width: 1200px;
            margin: auto;
        }


        /* Left Column - 70% */
<div style="flex: 2; min-width: 300px; border: 1px solid #a2a9b1; background: #fff; padding: 20px;">
        .content-area { flex: 70%; background: white; padding: 20px; border: 1px solid #a2a9b1; }
== Welcome to Citypedia ==
This is your main content area. You can add your city history, headers, and descriptions here.


        /* Right Column (Info Box) - 30% */
* Item one
        .info-sidebar {
* Item two
            flex: 30%;
</div>
            background: #f8f9fa;
            border: 1px solid #a2a9b1;
            padding: 10px;
            font-size: 0.9em;
            align-self: flex-start;
        }


        .info-header { background: #cedff2; padding: 5px; text-align: center; font-weight: bold; border-bottom: 1px solid #a2a9b1; }
<div class="toccolours" style="flex: 1; min-width: 250px; max-width: 350px; border: 1px solid #a2a9b1; background: #f8f9fa; padding: 0;">
        .info-image { width: 100%; height: auto; margin: 10px 0; }
<div style="background: #cedff2; text-align: center; font-weight: bold; padding: 5px; border-bottom: 1px solid #a2a9b1;">
City Quick Facts
</div>


        /* Mobile Adjustments */
<div class="mw-collapsible" style="padding: 10px;">
        @media (max-width: 768px) {
[[File:Solar Icon.png|center|200px]]
            .main-container { flex-direction: column; }
'''Country:''' India
           
'''Population:''' 1.2M
            .info-sidebar {
'''Established:''' 1920
                order: -1; /* Moves info box to top on mobile */
                width: 100%;
                box-sizing: border-box;
            }


            .collapsible-content { display: none; margin-top: 10px; }
<div class="mw-collapsible-content">
            .toggle-btn {
'''Additional Details:'''
                display: block;
* Elevation: 500m
                width: 100%;
* Climate: Tropical
                padding: 10px;
* Website: [https://citysite.com Official Site]
                background: #3366cc;
</div>
                color: white;
</div>
                border: none;
</div>
                cursor: pointer;
            }
        }


        @media (min-width: 769px) {
            .toggle-btn { display: none; }
            .collapsible-content { display: block !important; }
        }
    </style>
</head>
<body>
<div class="main-container">
    <article class="content-area">
        <h1>Welcome to Citypedia</h1>
        <p>This is where your main header and city descriptions go. You can talk about the history, geography, and culture of the location here.</p>
        <hr>
        <h3>History</h3>
        <p>The city was founded in...</p>
    </article>
    <aside class="info-sidebar">
        <div class="info-header">City Quick Facts</div>
        <button class="toggle-btn" onclick="toggleSidebar()">Show/Hide Info</button>
       
        <div id="sidebar-content" class="collapsible-content">
            <img src="https://via.placeholder.com/250x150" alt="City Image" class="info-image">
            <p><strong>Country:</strong> Example Land</p>
            <p><strong>Population:</strong> 1.2 Million</p>
            <p><strong>Links:</strong> <a href="#">Official Site</a></p>
        </div>
    </aside>
</div>
</div>
<script>
    function toggleSidebar() {
        var x = document.getElementById("sidebar-content");
        x.style.display = (x.style.display === "block") ? "none" : "block";
    }
</script>
</body>
</html>

Revision as of 16:27, 9 January 2026

Welcome to Citypedia Online
A collaborative encyclopedia documenting the cities, towns, and urban heritage of Maharashtra

🏙️ Explore Maharashtra’s Cities, Citypedia Online: The Encyclopedia of Cities in Maharashtra 🌆

सिटिपीडिया ऑनलाईन. महाराष्ट्रातील प्रमुख शहरांचे विकी-पोर्टल.. .
या.. सदस्य होऊया, आपापल्या शहराची माहिती जोडत जाऊया, एक ज्ञानकोश निर्माण करूया.


महाराष्ट्रातील शहरांसाठी एक अभिनव संकल्पना.. शहरातील व्यक्ति, संस्था आणि घडामोडी यांचा नागरिकांनी घेतलेला वेध म्हणजे सिटिपीडिया

Citypedia is a collaborative encyclopedia dedicated to documenting the Wiki-Portal for the cities of Maharashtra.
Explore detailed information on: * Personalities & Institutions | * History, Geography & heritage | * Infrastructure & Civic Issues | * Also the important News & Events, Documented by you & me, online

सिटीपीडिया वर आपला सक्रिय सहभाग अपेक्षित आहे. सिटीपीडिया हे शहरात राहणाऱ्या प्रत्येकासाठी उपयोगी पडेल असा ज्ञानकोश बनावा असा आमचा प्रयत्न आहे. आपण कशा प्रकारे यात सामील होऊ शकता ? प्रथम सिटीपीडिया या संकेत-स्थळावर सदस्य व्हा त्यानंतर सहभागी व्हा आणि आपल्या आवडीच्या विषयावर लिखाण करा (प्रकाशित झालेल्या लेखांमध्ये बदल करा किंवा नवीन लेख लिहा).

Become a Member
Help Articles
Citypedia Foundation


Citypedia Wiki-Portals are available for following cities


मुंबई

पुणे
File:Bio Icon.png
नाशिक

Welcome to Citypedia

This is your main content area. You can add your city history, headers, and descriptions here.

  • Item one
  • Item two

City Quick Facts

Country: India Population: 1.2M Established: 1920

Additional Details:

Retrieved from "https://citypedia.online/index.php?title=Main_Page&oldid=145"