Langsung ke konten utama

Code HTML Simple Page Responsive

Preview PC:



Preview Mobile:



 Langsung saja berikut kodenya:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      background: white;
      /* background: #000 url(https://wallpaperstock.net/wallpapers/thumbs1/30111wide.jpg); */
      /* El cover se usa para que el fondo al ser una imagen abarque el 100% y el fixed para que quede fijo*/
      /* background-size:cover;
        background-attachment: fixed; */
    }

    .container {
      margin: auto;
      width: 90%;
      max-width: 1000px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    header {
      width: 100%;
      padding: 10px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    header .logo {
      width: 15%;
    }

    header .logo img {
      width: 100%;
    }

    header .menu a {
      color: #fff;
      text-decoration: none;
      margin-right: 10px;
    }

    header .menu a:hover {
      text-decoration: underline;
    }

    .main {
      background: #fff;
      padding: 20px;
      width: 70%;
    }

    .main article .thumb {
      margin-bottom: 20px;
    }

    .main article .thumb img {
      width: 100%;
      vertical-align: top;
    }

    .main article h2 {
      margin-bottom: 20px;
      font-weight: normal;
      font-size: 32px;
      text-align: center;
    }

    .main article p {
      margin-bottom: 20px;
      font-size: 18px;
      line-height: 27px;
    }

    aside {
      width: 30%;
      background: #f7f7f7;
      padding: 20px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

    aside .ad {
      font-size: 30px;
      text-align: center;
      color: #fff;
      padding: 50px 0;
      margin-bottom: 20px;
      background: #4f5d79;
    }

    footer {
      margin: 20px 0;
      background: rgba(255 255 255/.2);
      padding: 20px;
      width: 100%;
      color: #000;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
    }

    footer .social a {
      color: #000;
      text-decoration: underline;
      margin-left: 10px;
    }

    footer .social a:hover {
      text-decoration: none;
    }

    @media screen and (max-width: 800px) {
      .main {
        width: 100%;
      }

      aside {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      aside .ad {
        width: 30%;
        margin-bottom: 0px;
      }
    }

    @media screen and (max-width: 600px) {
      header {
        flex-direction: column;
        padding-bottom: 20px;
        justify-content: center;
      }

      header .menu {
        width: 100%;
        background: rgba(255 255 255 /.2);
        text-align: center;
        padding: 10px;
      }

      header .logo {
        width: 30%;
        margin-bottom: 5px;
      }

      footer {
        flex-direction: column;
        text-align: center;
        flex-wrap: wrap;
      }

      footer .author {
        order: 2;
        width: 100%;
      }

      footer .social {
        order: 1;
        width: 100%;
      }

      footer .social a {
        margin-bottom: 20px;
      }
    }

    @media screen and (max-width: 400px) {
      aside {
        display: none;
      }
    }
  </style>
</head>

<body>
  <div class="container">

    <header>

      <div class="logo">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Google_org_logo.svg/1280px-Google_org_logo.svg.png"
          alt="">
      </div>

      <nav class="menu">
        <a href="#"> Inicio </a>
        <a href="#"> Block </a>
        <a href="#"> Contact </a>
      </nav>

    </header>

    <section class="main">
      <article>
        <div class="thumb">
          <img
            src="https://images.unsplash.com/photo-1593062096033-9a26b09da705?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
            alt="">

        </div>

        <h2>Titulo del articulo</h2>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, laboriosam perspiciatis! Cumque inventore
          maxime, assumenda magnam consequatur iste voluptatem sit, a quasi, architecto eveniet quibusdam laborum ea
          in! Eveniet, architecto.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eius voluptatum ea qui distinctio. Unde,
          voluptatem tempora voluptatibus laboriosam corrupti vitae odit rerum, aperiam, adipisci aliquid
          necessitatibus iste minus magni?
          <br> <br>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque illo alias fugiat neque atque voluptatem
          iste voluptas! Dicta, fuga assumenda libero nihil culpa voluptatum eos, necessitatibus ad, minus molestiae
          sunt?
        </p>
      </article>
    </section>

    <aside>

      <div class="ad">
        <p>AD</p>
      </div>

      <div class="ad">
        <p>AD</p>
      </div>

      <div class="ad">
        <p>AD</p>
      </div>

    </aside>

    <footer>
      <div class="author">
        <p>Creado por Antonio Gelvez</p>
      </div>

      <div class="social">
        <a href="#">GitHub</a>
        <a href="#">CodePen</a>
      </div>
    </footer>

  </div>

</body>

</html>
Label:

Postingan populer dari blog ini

3 Cara Otomatis Replace index.php di Linux Ubuntu: Systemd, Cron, dan Shell Loop

Ada beberapa cara untuk membuat Linux Ubuntu otomatis mengganti atau memperbarui file: /var/www/html/index.php secara berkala dari script lokal. Tiga metode yang paling umum adalah: Systemd Service + Timer Cron Shell Loop + nohup Di bawah ini adalah contoh implementasinya. 1. Menggunakan Systemd Service + Timer Metode ini paling cocok untuk VPS atau server Ubuntu normal yang menggunakan systemd . Buat script update sudo nano /usr/local/bin/update-index.sh Isi: #!/bin/sh cat > /var/www/html/index.php <<'EOF' <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Website</title> </head> <body> <h1>INDEX OTOMATIS</h1> </body> </html> EOF Beri permission execute: sudo chmod +x /usr/local/bin/update-index.sh Buat service sudo nano /etc/systemd/system/update-index.service Isi: [Unit] Description=Update index.php [Service] Type=oneshot ExecStart=/usr/local...
Read more »

Tutorial Dasar GSocket dan gs-netcat di Windows dan Ubuntu

GSocket atau Global Socket Toolkit adalah kumpulan tool yang memungkinkan dua komputer membuat koneksi TCP melalui Global Socket Relay Network (GSRN) . Salah satu tool di dalamnya adalah gs-netcat . Berbeda dengan koneksi TCP tradisional yang biasanya membutuhkan alamat IP dan port tujuan, GSocket memungkinkan dua endpoint saling menemukan berdasarkan sebuah shared secret . Koneksi antarendpoint kemudian dapat dilindungi dengan enkripsi end-to-end. Gambaran Cara Kerja Secara sederhana: Windows | | outbound connection v Global Socket Relay Network ^ | outbound connection | Ubuntu Artinya Ubuntu tidak harus membuka sebuah port publik khusus agar endpoint GSocket dapat berkomunikasi. Ini berbeda dengan SSH langsung: Windows | | SSH v IP Ubuntu:22 Pada SSH biasa, Windows harus mengetahui IP atau domain server serta port SSH yang dapat dijangkau. Apakah gs-netcat Tersedia di Windows? Ya. GSocket menyediakan gs-netcat yang dapat digunaka...
Read more »