Layout Website
Setelah layout yang kemarin sudah menggunakan Visual Studio Code, kali ini saya menggunakan Visual Studio 2017 dengan ASP.net
- Script : Index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="BelajarAspx.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="StyleSheet1.css">
</head>
<body>
<header>
<div class="head">
<img src="https://sd.sindonews.net/dyn/400/tekno/2021/d/images/sindonews-400.png">
<input type="search" class="search" placeholder="Cari Berita" name="" id="">
<i class="fa-sharp fa-solid fa-magnifying-glass icon"></i>
</div>
</header>
<div class="navbar">
<nav>
<ul>
<li><a href="https://google.com">Internasional</a></li>
<li><a href="#">Metro</a></li>
<li><a href="#">Teknologi</a></li>
<li><a href="#">Nasional</a></li>
<li><a href="https://kayiveraa.blogspot.com/">Profil</a></li>
<li><a href="http://smkn1jakarta.sch.id/">Berita</a></li>
<li><a href="https://www.instagram.com/felii.rv/?hl=en">Kontak</a></li>
</ul>
</nav>
</div>
<div class="main">
<aside class="left">
Menu
<div class="sidebar">
<div class="side"><a href="https://youtu.be/UTkhABvBLBg">Video</a></div>
<div class="side"><a href="https://smkn1jakarta.sch.id/seni-musikband/">Seni</a></div>
<div class="side"><a href="https://smkn1jakarta.sch.id/visi-dan-misi/">Visi & Misi</a></div>
<div class="side"><a href="#">Game</a></div>
<div class="side"><a href="#">Pekerjaan</a></div>
<img src="https://s0.2mdn.net/simgad/12778205287532638461" width="300" alt="">
</div>
</aside>
<main>
<h1>Terungkap! Pria Berotot Smackdown Sopir Truk di Cibubur Mengaku Aparat</h1>
<img src="https://pict.sindonews.net/dyn/732/pena/news/2022/03/04/170/702753/terungkap-pria-berotot-smackdown-sopir-truk-di-cibubur-mengaku-aparat-fji.jpg">
<h2>Pria bernama Agus Sunarko, supir truk di Cibubur tewas setelah dismackdown oleh pria berotot. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi aperiam quidem sapiente porro dolorum, repellendus sequi alias molestiae molestias magnam minima accusantium provident natus nam, cupiditate nostrum nemo eaque, tempora aliquam maxime voluptate. Dignissimos assumenda corrupti doloribus placeat fugit, possimus consectetur sint libero sequi voluptates architecto suscipit molestias accusamus earum nemo pariatur? Vitae neque deserunt assumenda! Quod, saepe laboriosam sed blanditiis mollitia suscipit a animi quaerat inventore, odio temporibus qui consequatur, vero doloremque maiores aspernatur. Minus explicabo similique ut nulla? Sint voluptatum officia vero sunt natus, vel sit quo dignissimos, ex at voluptates laborum inventore et debitis officiis cum! At error corrupti quam placeat aperiam praesentium expedita nobis, modi aliquid itaque illo. Neque expedita nihil natus repellat odio eius fuga ut quam dolor reiciendis. Odio neque vero repellendus quod dolores, fugiat architecto ullam alias, quae commodi doloremque et beatae tempore voluptatibus eaque molestiae iusto sit ex enim! Optio neque fugiat reiciendis fuga? Est velit numquam amet earum minus ad. </h2>
</main>
<aside class="right">
Menu
<div class="sidebar">
<div class="side"> <a href=""></a>Profil</div>
<div class="side">Beranda</div>
<div class="side">Edukasi</div>
<div class="side">Foto</div>
<div class="side">Infografis</div>
<img src="https://s0.2mdn.net/simgad/7573250051243476649" width="250" alt="iklan ">
<img src="https://s0.2mdn.net/simgad/7573250051243476649" width="250" alt="iklan ">
<img src="https://s0.2mdn.net/simgad/7573250051243476649" width="250" alt="iklan ">
<img src="https://newrevive.detik.com/images/791f8175ce5435ad69277df0f89fe219.jpg" width="250" alt="iklan ">
<img src="https://cdnstatic.detik.com/live/2022/09/cpc/optikmelawai/220906-diskon-300x250.jpg" width="250" alt="iklan ">
</div>
</aside>
</div>
<footer>
<b>©2022
<br>Created by Feli</br></b>
</footer>
</body>
</html>
- Script CSS: style.css
*,html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: #000000;
font-family: sans-serif;
text-align: center;
columns: white;
font-size: 24px;
display: flex;
flex-direction: column;
}
header {
background-color: #ffffff;
padding: 2em 0 2em 0;
margin-bottom: 5px;
}
.head {
padding-left: 20px;
padding-right: 20px;
}
.head img {
float: left;
}
.search {
margin-top: 20px;
padding: 10px;
width: 300px;
border-radius: 20px;
}
.head h1 {
float: right;
}
.navbar {
background-color: rgb(7, 7, 78);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-size: 20px;
margin-bottom: 5px;
}
nav ul {
display: flex;
}
li {
list-style-type: none;
padding: 5px;
margin-left: 15px;
color: #ffffff;
}
li a:hover {
color: rgb(0, 0, 0);
transition: all 0.5s ease 0s;
background-color: #ffffff6c;
padding: 5px;
}
a {
color: #ffffff;
text-decoration: none;
}
.sidebar {
margin-top: 20px;
}
.side {
margin: 10px;
background-color: rgb(14, 14, 95);
padding: 10px;
border-radius: 8px;
cursor: pointer;
color: white;
}
.side:hover {
background-color: rgba(127, 31, 31, 0.932);
border-radius: 20px;
transition: all 0.5s ease 0s;
}
.main {
display: flex;
flex: 1;
text-align: center;
}
.main h1 {
font-size: 32px;
padding-bottom: 40px;
font-weight: bold;
}
.main h2 {
font-size: 20px;
padding-top: 40px;
font-weight: 200;
}
.left {
background: rgb(255, 255, 255);
padding: 3em 0 3em 0;
flex: 1 1 100px;
margin: 1px 5px 5px 5px;
}
main {
background: rgb(255, 255, 255);
padding: 3em 0 3em 0;
flex: 5 5 150px;
margin: 1px 5px 5px 1px;
}
.right {
background: rgb(255, 255, 255);
padding: 3em 0 3em 0;
flex: 1 1 100px;
margin: 1px 5px 5px 1px;
}
footer {
background: rgb(255, 255, 255);
padding: 1em 0 1em 0;
}
@media screen and (max-width: 550px) {
.main {
flex-direction: column;
}
main {
padding: 5em 0 5em 0;
}
}- Hasilnya
Comments
Post a Comment