Contoh Website Box Model CSS.- Pada artikel yang telah kita
sama-sama pelajari pada blog ini, terutama tentang bahasa pemrograman web
seperti HTML dan CSS kita telah mempelajari banyak hal. Dan sekarang admin akan
memberikan contoh dari website sederhana dengan ilmu yang telah kita pelajari
bersama.
Disini admin akan memberikan Syntax pembuatan
website sederhananya saja, dan kalian bisa copy langsung ke editor kalian.
Syntax HTML Website Sederhana
Adapun syntaxnya sebagai berikut :
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul">MyWebsite</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
<div class="gambar"> </div>
<div class="content">
<h2>Judul Artikel</h2>
<p class="penulis">Dituis Oleh <a href="#">nispulwatoni</a> pada 27 Juli 2021</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, ullam, aperiam consectetur saepe ut molestias illum praesentium perspiciatis odio fugit asperiores obcaecati ratione laborum soluta fuga deserunt. Eos, autem fuga.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit esse maiores natus, consectetur delectus dolore voluptate obcaecati corrupti, dignissimos laborum repellendus voluptatum veniam quo similique ratione tenetur expedita voluptatibus in iure facilis nemo ipsum mollitia aperiam? Quaerat ea illum voluptate omnis aut quod laudantium, veritatis sed impedit cumque, pariatur deleniti sunt aspernatur unde ullam maiores! Perspiciatis omnis eaque iste quam quidem, corporis in! Accusantium unde explicabo dicta, adipisci quae quas? Tempora autem dolorum officiis minus corrupti ab! Error molestiae illo tenetur a, quasi ipsa suscipit? Quod officiis esse repudiandae necessitatibus eveniet, velit enim. Unde repellat magnam corrupti laborum magni blanditiis?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, dolore ea necessitatibus odio saepe pariatur et voluptatem provident amet reprehenderit ipsam nisi. Accusantium molestiae illum nihil suscipit voluptates? Excepturi, dolore rerum eligendi aliquid odio aut sed voluptate fugiat, ad assumenda dolorem. Ea aspernatur nisi magni consectetur. Numquam modi cumque animi assumenda nam! Voluptatibus reiciendis saepe nihil animi quidem illum esse magni eum molestias. Distinctio, voluptatibus nobis corrupti nihil facilis quam, dolorum voluptates mollitia provident saepe incidunt? Repellat sequi facere animi.</p>
</div>
<div class="footer">
<p class="copy">Copyright 2021. nispulwatoni</p>
</div>
</div>
</body>
</html>
Baca juga : Struktur Syntax HMTL
Syntax CSS Website Sederhana
Untuk syntax cssnya adalah sebagai berikut:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Diatas ini adalah kode reset css*/
/* ---------------- */
/* ---------------- */
/* Styles Yang Kita Buat*/
body {
font: 16px/28px arial, calibri;
background-image: url(img/pixel-heart.png);
}
.container {
width: 800px;
margin: auto;
background-color: rgb(221, 230, 243);
}
.header {
padding: 20px;
padding-bottom: 10px;
}
.header .judul {
font-size: 35px;
font-weight: bold;
}
.header ul li {
display: inline-block;
margin-top: 20px;
margin-right: 10px;
}
.header a {
text-decoration: none;
color: blue;
padding: 10px;
}
.header a:hover {
background-color: lightseagreen;
color: white
}
.gambar {
height: 330px;
background-image: url(img/gambar1.jpg);
background-size: cover;
background-position: 0 -100px;
border-top: 5px solid blue;
border-bottom: 5px solid lightseagreen;
}
.content {
padding: 20px;
}
.content h2 {
font-size: 30px;
}
.content .penulis {
font-size: 11px;
margin-top: -5px;
}
.content a {
text-decoration: none;
}
.content p {
margin-bottom: 20px;
font-size: 14px;
text-align: justify;
}
.footer {
background-color: gray;
padding: 10px;
color: blanchedalmond;
}
.copy {
text-align: center;
font-size: 14px;
font-family: 'Times New Roman', Times, serif;
}
Baca juga : Struktur Syntax CSS
Output dari syntax tersebut diatas, kurang
lebih akan seperti berikut ini.
Note : pastikan nama file cssnya adalah
styles.css dan pastikan juga menaruh filenya dalam satu folder. Untuk file
gambar buatkan folder dengan nama “img” namun masih dalam satu folder dengan
file website dan css.
Selengkapnya dapat kalian download disini --> Download File
Silahkan kalian ubah syntaxnya sesuai dengan
kreatifitas kalian, asal jangan sampai errornya J.
Admin rasa cukup sekian untuk artikel kita pada
kesempatan yang baik ini. dan jangan lupa untuk mengunjungi artikel kami yang
lain.
Artikel Terkait :
Web Developer
Front End Vs Back End
8 Kesalahan Utama Programer Pemula
Sekian dan sampai jumpa lagi.
Wassalamualekum wr wb
0 Response to "Contoh Website Sederhana Menggunakan Box Model CSS"
Posting Komentar