membuat layouting

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<!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" />
    <link rel="stylesheet" href="style.css">
    <link
      href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"
      rel="stylesheet"
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
      <link href="StyleSheet1.css" rel="stylesheet" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
      
  </head>
  <body>
    <header>
      <div class="header">
        <img id="logotribun" src="https://cdn-1.tstatic.net/img/logo/tribun/svg/tribunnews.svg" alt="Tribun" width="164" height="40">
      </div>
    </header>
    <nav>
        <div>
        <ul class="topnav">
          <li><a class="active" id="navbar-konten" href="#">Home</a></li>
          <li><a class="hidenav" id="navbar-konten" href="#">About</a></li>
          <li><a class="hidenav" id="navbar-konten" href="#">Services</a></li>
          <li><a class="hidenav" id="navbar-konten" href="#">Gallery</a></li>
          <li><a class="hidenav" id="navbar-konten" href="#">Feedback</a></li>
          <div class="search">
          <li><input class="input" type="text" placeholder=" Search..."></li>
          </div>
        </ul>
      </div>
      <div class="dropdowndiv">
        <div class="dropdown">
          <button class="dropbtn">Menu 
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <a class="drophide" href="#">Home</a>
            <a class="drophide" href="#">About</a>
            <a class="drophide" href="#">Services</a>
            <a class="drophide" href="#">Gallery</a>
            <a class="drophide" href="#">Feedback</a>
          </div>
        </div> 
        </div>
    </nav>
    <section class="overlay"></section>
    <div class="konten">
      <div class="daftar-berita">
        <ul>
          <li><p>Berita populer</p></li>
          <hr>
          <li><a href="https://www.tribunnews.com/metropolitan/2022/09/13/demo-tolak-bbm-buruh-kecam-sejumlah-partai-merupakan-partai-borjuis-merampok-hak-rakyat" title="Demo Tolak BBM, Buruh Kecam Sejumlah Partai Merupakan Partai Borjuis: Merampok Hak Rakyat" class="tulian2 ">
						Demo Tolak BBM, Buruh Kecam Sejumlah Partai Merupakan Partai Borjuis: Merampok Hak Rakyat</a><img src="https://cdn-2.tstatic.net/tribunnews/foto/bank/thumbnails2/gerakan-buruh-bersama-rakyat-gebrak-nih3.jpg" class="gambar2" height="69" width="90" alt="gerakan-buruh-bersama-rakyat-gebrak-nih3.jpg"></li>
        <hr>
          </ul>
      </div>
    <div class="main-konten">
      <h3 style="text-align:center;">content</h3><br>
      <ul>
        <hr>
        <li> <a href="https://www.tribunnews.com/sport/2022/09/13/ilham-leoisa-berlatih-keras-untuk-sebuah-tujuan-bidik-gelar-kedua" title="Ilham Leoisa Berlatih Keras Untuk Sebuah Tujuan, Bidik Gelar Kedua" class="tulian">
            Ilham Leoisa Berlatih Keras Untuk Sebuah Tujuan, Bidik Gelar Kedua</a> <img src="https://cdn-2.tstatic.net/tribunnews/foto/bank/thumbnails2/ilham-leoisa-berlatih-keras-untuk-sebuah-tujuan-bidik-gelar-kedua.jpg" class="gambar" height="90" width="120" alt="ilham-leoisa-berlatih-keras-untuk-sebuah-tujuan-bidik-gelar-kedua.jpg"></li>
        <hr>
        <li><a href="https://www.tribunnews.com/nasional/2022/09/13/profil-bjork-musisi-wanita-nyentrik-ada-di-foto-profil-hacker-bjorka-pernah-manggung-di-indonesia" title="PROFIL Bjork, Musisi Wanita Nyentrik Ada di Foto Profil Hacker Bjorka, Pernah Manggung di Indonesia" class="tulian">
          PROFIL Bjork, Musisi Wanita Nyentrik Ada di Foto Profil Hacker Bjorka, Pernah Manggung di Indonesia.<br><span class="deskripsion">Berikut profil Bjork, penyanyi wanita asal Islandia yang terpampang di foto profil hacker Bjorka</span></a><img data-src="https://cdn-2.tstatic.net/tribunnews/foto/bank/thumbnails2/kolase-foto-bjork-kanan-foto-profil-h.jpg" class="gambar" height="90" width="120" alt="kolase-foto-bjork-kanan-foto-profil-h.jpg" src="https://cdn-2.tstatic.net/tribunnews/foto/bank/thumbnails2/kolase-foto-bjork-kanan-foto-profil-h.jpg" data-loaded="true"></li>
        <hr>
        </ul>
    </div>
        <div class="iklan">
          <img  src="https://niagaspace.sgp1.digitaloceanspaces.com/blog/wp-content/uploads/2021/08/23074849/FI-Bagaimana-Cara-Membuat-Website-dengan-HTML-dan-CSS.jpg" width="99%" height="25%">
          
        </div>
      </div>
      
      <div>
        <footer>
          <div class="content">
            <div class="left box">
              <div class="upper">
                <div class="topic">referensi</div>
                <div><a href="https://www.tribunnews.com/">Tribunnews</a></div>
              </div>
              <div class="lower">
                <div class="topic">Contact us</div>
                <div class="phone">
                  <a href="#"><i class="fas fa-phone-volume"></i>+007 9089 6767</a>
                </div>
                <div class="email">
                  <a href="#"><i class="fas fa-envelope"></i>abc@gmail.com</a>
                </div>
              </div>
            </div>
            <div class="middle box">
              <div class="topic">Our Services</div>
              <div><a href="#">Web Design, Development</a></div>
              <div><a href="#">Web UX Design, Reasearch</a></div>
              <div><a href="#">Web User Interface Design</a></div>
              <div><a href="#">Theme Development, Design</a></div>
              <div><a href="#">Mobile Application Design</a></div>
              <div><a href="#">Wire raming & Prototyping</a></div>
            </div>
            <div class="right box">
              <div class="topic">Subscribe us</div>
              <form action="#">
                <input type="text" placeholder="Enter email address">
                <input type="submit" name="" value="Send">
                <div class="media-icons">
                  <a href="#"><i class="fab fa-facebook-f"></i></a>
                  <a href="#"><i class="fab fa-instagram"></i></a>
                  <a href="#"><i class="fab fa-blogger"></i></a>
                  <a href="#"><i class="fab fa-youtube"></i></a>
                  <a href="#"><i class="fab fa-whatsapp"></i></a>
                </div>
              </form>
            </div>
          </div>
          <div class="bottom">
          </div>
        </footer>
      </div>
      <script src="script.js"></script>
  </body>
</html>

Komentar