fork download 
  1.  
  2. <?php
  3. // بيانات افتراضية
  4. $posts = [
  5.   [
  6.     'username' => 'username1',
  7.     'description' => 'This is a post description',
  8.     'likes' => 100,
  9.     'image' => 'image1.jpg'
  10.   ],
  11.   [
  12.     'username' => 'username2',
  13.     'description' => 'This is a post description',
  14.     'likes' => 200,
  15.     'image' => 'image2.jpg'
  16.   ]
  17. ];
  18. ?>
  19.  
  20. <!DOCTYPE html>
  21. <html>
  22. <head>
  23.   <meta charset="UTF-8">
  24.   <title>atyafnice</title>
  25.   <style>
  26.     body {
  27.       font-family: Arial, sans-serif;
  28.       margin: 0;
  29.       padding: 0;
  30.     }
  31.     header {
  32.       background-color: #fff;
  33.       padding: 10px;
  34.       border-bottom: 1px solid #ddd;
  35.       display: flex;
  36.       justify-content: space-between;
  37.       align-items: center;
  38.     }
  39.     header .logo {
  40.       font-size: 24px;
  41.       font-weight: bold;
  42.       margin-left: 10px;
  43.     }
  44.     header .search {
  45.       margin-right: 10px;
  46.     }
  47.     header .search input {
  48.       padding: 5px;
  49.       border: 1px solid #ccc;
  50.       border-radius: 5px;
  51.     }
  52.     main {
  53.       max-width: 600px;
  54.       margin: 20px auto;
  55.     }
  56.     .post {
  57.       background-color: #fff;
  58.       padding: 10px;
  59.       border: 1px solid #ddd;
  60.       margin-bottom: 20px;
  61.       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  62.     }
  63.     .post .image {
  64.       width: 100%;
  65.       height: 200px;
  66.       background-color: #ccc;
  67.       margin-bottom: 10px;
  68.       background-image: url('<?php echo $image; ?>');
  69.       background-size: cover;
  70.     }
  71.     .post .username {
  72.       font-weight: bold;
  73.       margin-bottom: 5px;
  74.     }
  75.     .post .description {
  76.       margin-bottom: 10px;
  77.     }
  78.     .post .likes {
  79.       font-size: 14px;
  80.       color: #666;
  81.     }
  82.   </style>
  83. </head>
  84. <body>
  85.   <header>
  86.     <div class="logo">atyafnice</div>
  87.     <div class="search">
  88.       <input type="text" placeholder="Search">
  89.     </div>
  90.   </header>
  91.   <main>
  92.     <?php foreach ($posts as $post): ?>
  93.       <div class="post">
  94.         <div class="image" style="background-image: url('<?php echo $post['image']; ?>')"></div>
  95.         <div class="username"><?php echo $post['username']; ?></div>
  96.         <div class="description"><?php echo $post['description']; ?></div>
  97.         <div class="likes"><?php echo $post['likes']; ?> likes</div>
  98.       </div>
  99.     <?php endforeach; ?>
  100.   </main>
  101. </body>
  102. </html>
  103.  
  104.  
  105.  
Success #stdin #stdout #stderr 0.03s 26036KB
comments (?)
stdin 
Standard input is empty
stdout 
 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>atyafnice</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #fff;
      padding: 10px;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    header .logo {
      font-size: 24px;
      font-weight: bold;
      margin-left: 10px;
    }
    header .search {
      margin-right: 10px;
    }
    header .search input {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    main {
      max-width: 600px;
      margin: 20px auto;
    }
    .post {
      background-color: #fff;
      padding: 10px;
      border: 1px solid #ddd;
      margin-bottom: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .post .image {
      width: 100%;
      height: 200px;
      background-color: #ccc;
      margin-bottom: 10px;
      background-image: url('');
      background-size: cover;
    }
    .post .username {
      font-weight: bold;
      margin-bottom: 5px;
    }
    .post .description {
      margin-bottom: 10px;
    }
    .post .likes {
      font-size: 14px;
      color: #666;
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">atyafnice</div>
    <div class="search">
      <input type="text" placeholder="Search">
    </div>
  </header>
  <main>
          <div class="post">
        <div class="image" style="background-image: url('image1.jpg')"></div>
        <div class="username">username1</div>
        <div class="description">This is a post description</div>
        <div class="likes">100 likes</div>
      </div>
          <div class="post">
        <div class="image" style="background-image: url('image2.jpg')"></div>
        <div class="username">username2</div>
        <div class="description">This is a post description</div>
        <div class="likes">200 likes</div>
      </div>
      </main>
</body>
</html>
stderr 
PHP Notice:  Undefined variable: image in /home/6EMvK8/prog.php on line 68
https://ideone.com/9qdRDH
واجهة مستخدم لتطبيق تواصل اجتماعي
language:
PHP (php 7.3.5)
created:
9 hours 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!