fork download
copy 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title><data:blog.pageTitle/></title>
  7.     <b:include data="blog" name="all-head-content"/>
  8.  
  9.     <link rel="stylesheet" href="https://f...content-available-to-author-only...s.com/css?family=Poppins:400,600&amp;display=swap" />
  10.  
  11.     <b:skin>
  12.         <![CDATA[
  13.         /* Global reset */
  14.         * {
  15.             margin: 0;
  16.             padding: 0;
  17.             box-sizing: border-box;
  18.         }
  19.  
  20.         html, body {
  21.             height: 100%;
  22.             width: 100%;
  23.             font-family: 'Poppins', sans-serif;
  24.             background-color: #f9f9f9;
  25.             color: #333; /* Default text color */
  26.             display: flex;
  27.             flex-direction: column;
  28.             padding: 0;
  29.             margin: 0;
  30.         }
  31.  
  32.         /* Header and navigation styling */
  33.         header {
  34.             background-color: #0056b3;
  35.             color: #fff;
  36.             padding: 20px 0;
  37.             text-align: center;
  38.         }
  39.  
  40.         nav {
  41.             background-color: #003366;
  42.             padding: 10px 0;
  43.             text-align: center;
  44.         }
  45.  
  46.         nav a {
  47.             text-decoration: none;
  48.             margin: 0 15px;
  49.             color: #fff;
  50.         }
  51.  
  52.         nav a:hover {
  53.             color: #ffd700;
  54.         }
  55.  
  56.         /* Main container styling */
  57.         .main-container {
  58.             display: flex;
  59.             flex-direction: column;
  60.             width: 100%;
  61.             padding: 0;
  62.         }
  63.  
  64.         .content {
  65.             width: 100%;
  66.             padding: 20px;
  67.         }
  68.  
  69.         .post {
  70.             background: #fff;
  71.             padding: 20px;
  72.             width: 100%;
  73.         }
  74.  
  75.         /* Post Title styling */
  76.         .post h2 {
  77.             color: #0056b3;
  78.             font-size: 2rem;
  79.             margin-bottom: 10px;
  80.         }
  81.  
  82.         /* Paragraph styling */
  83.         .post-content p {
  84.             color: #333 !important;  /* Ensures paragraphs have default color (black) */
  85.             line-height: 1.6;
  86.         }
  87.  
  88.         /* Link styling */
  89.         .post-content a {
  90.             color: #0056b3 !important;  /* Link color is blue */
  91.             text-decoration: none;  /* Remove underline from links */
  92.         }
  93.  
  94.         /* Hover effect for links */
  95.         .post-content a:hover {
  96.             color: #ffd700 !important;  /* Hover color (yellow) */
  97.             text-decoration: underline !important; /* Underline on hover */
  98.         }
  99.  
  100.         footer {
  101.             text-align: center;
  102.             padding: 15px;
  103.             background-color: #004494;
  104.             color: #fff;
  105.         }
  106.  
  107.         footer a {
  108.             color: #ffd700;
  109.             text-decoration: none;
  110.         }
  111.  
  112.         footer a:hover {
  113.             text-decoration: underline;
  114.         }
  115.  
  116.         /* Responsive design */
  117.         @media (max-width: 1024px) {
  118.             .content {
  119.                 padding: 10px;
  120.             }
  121.  
  122.             .post {
  123.                 padding: 15px;
  124.             }
  125.         }
  126.  
  127.         @media (max-width: 768px) {
  128.             header h1 {
  129.                 font-size: 2rem;
  130.             }
  131.  
  132.             nav a {
  133.                 font-size: 1rem;
  134.             }
  135.  
  136.             .content {
  137.                 width: 100%;
  138.                 padding: 5px;
  139.             }
  140.  
  141.             .post {
  142.                 padding: 15px;
  143.             }
  144.         }
  145.  
  146.         @media (max-width: 480px) {
  147.             header h1 {
  148.                 font-size: 1.5rem;
  149.             }
  150.  
  151.             nav a {
  152.                 font-size: 0.9rem;
  153.             }
  154.  
  155.             .content {
  156.                 padding: 5px;
  157.                 width: 100%;
  158.             }
  159.  
  160.             .post {
  161.                 padding: 15px;
  162.             }
  163.         }
  164.         ]]>
  165.     </b:skin>
  166. </head>
  167. <body>
  168.     <header>
  169.         <h1><data:blog.title/></h1>
  170.     </header>
  171.  
  172.     <nav>
  173.         <a href="/">Home</a>
  174.         <a href="/about">About</a>
  175.         <a href="/contact">Contact</a>
  176.     </nav>
  177.  
  178.     <div class="main-container">
  179.         <div class="content">
  180.             <b:section class="posts" id="main" maxposts="1" name="Main Posts">
  181.                 <b:widget id="Blog1" locked="false" title="Blog Post" type="Blog"/>
  182.             </b:section>
  183.  
  184.             <div class="post">
  185.                 <h2 class="post-title"><data:post.title/></h2>
  186.                 <div class="post-content">
  187.                     <data:post.body/>
  188.                 </div>
  189.             </div>
  190.         </div>
  191.     </div>
  192.  
  193.     <footer>
  194.         <p>&amp;copy; <data:blog.year/> <data:blog.title/>. Designed by <a href="#">Your Name</a>.</p>
  195.     </footer>
  196. </body>
  197. </html>
  198.  
Success #stdin #stdout 0.03s 25320KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><data:blog.pageTitle/></title>
    <b:include data="blog" name="all-head-content"/>
    
    <link rel="stylesheet" href="https://f...content-available-to-author-only...s.com/css?family=Poppins:400,600&amp;display=swap" />

    <b:skin>
        <![CDATA[
        /* Global reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            width: 100%;
            font-family: 'Poppins', sans-serif;
            background-color: #f9f9f9;
            color: #333; /* Default text color */
            display: flex;
            flex-direction: column;
            padding: 0;
            margin: 0;
        }

        /* Header and navigation styling */
        header {
            background-color: #0056b3;
            color: #fff;
            padding: 20px 0;
            text-align: center;
        }

        nav {
            background-color: #003366;
            padding: 10px 0;
            text-align: center;
        }

        nav a {
            text-decoration: none;
            margin: 0 15px;
            color: #fff;
        }

        nav a:hover {
            color: #ffd700;
        }

        /* Main container styling */
        .main-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 0;
        }

        .content {
            width: 100%;
            padding: 20px;
        }

        .post {
            background: #fff;
            padding: 20px;
            width: 100%;
        }

        /* Post Title styling */
        .post h2 {
            color: #0056b3;
            font-size: 2rem;
            margin-bottom: 10px;
        }

        /* Paragraph styling */
        .post-content p {
            color: #333 !important;  /* Ensures paragraphs have default color (black) */
            line-height: 1.6;
        }

        /* Link styling */
        .post-content a {
            color: #0056b3 !important;  /* Link color is blue */
            text-decoration: none;  /* Remove underline from links */
        }

        /* Hover effect for links */
        .post-content a:hover {
            color: #ffd700 !important;  /* Hover color (yellow) */
            text-decoration: underline !important; /* Underline on hover */
        }

        footer {
            text-align: center;
            padding: 15px;
            background-color: #004494;
            color: #fff;
        }

        footer a {
            color: #ffd700;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* Responsive design */
        @media (max-width: 1024px) {
            .content {
                padding: 10px;
            }

            .post {
                padding: 15px;
            }
        }

        @media (max-width: 768px) {
            header h1 {
                font-size: 2rem;
            }

            nav a {
                font-size: 1rem;
            }

            .content {
                width: 100%;
                padding: 5px;
            }

            .post {
                padding: 15px;
            }
        }

        @media (max-width: 480px) {
            header h1 {
                font-size: 1.5rem;
            }

            nav a {
                font-size: 0.9rem;
            }

            .content {
                padding: 5px;
                width: 100%;
            }

            .post {
                padding: 15px;
            }
        }
        ]]>
    </b:skin>
</head>
<body>
    <header>
        <h1><data:blog.title/></h1>
    </header>

    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>

    <div class="main-container">
        <div class="content">
            <b:section class="posts" id="main" maxposts="1" name="Main Posts">
                <b:widget id="Blog1" locked="false" title="Blog Post" type="Blog"/>
            </b:section>

            <div class="post">
                <h2 class="post-title"><data:post.title/></h2>
                <div class="post-content">
                    <data:post.body/>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p>&amp;copy; <data:blog.year/> <data:blog.title/>. Designed by <a href="#">Your Name</a>.</p>
    </footer>
</body>
</html>
https://ideone.com/2rgFk7
language:
PHP (php 7.3.5)
created:
13 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!