1. Membuat Dokumen HTML Lab4Web.html

<title>Box Element</title>

Box Element

Div 1

Div 2

Div 3

Div 4

<style> div{ float:left; padding: 10px; } .div1 { background: red; } .div2 { background: yellow; } .div3 { background: green; } .div4 { background-color: blue; clear: left; float: none; } </style>

2. Membuat Home.html

<title>Layout Sederhana</title>

Layout Sederhana

Home Artikel About Kontak

Hello World!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lorem elit, iaculis innisl volutpat, malesuada tincidunt arcu. Proin in leo fringilla, vestibulum mi porta, faucibus felis. Integer pharetra est nunc, nec pretium nunc pretium ac.

Learn more »

Heading

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.

View detail

Heading

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.

View detail

Heading

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.

View detail

---

First featurette heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lorem elit, iaculis in nisl volutpat, malesuada tincidunt arcu. Proin in leo fringilla, vestibulum mi porta, faucibus felis. Integer pharetra est nunc, nec pretium nunc pretium ac.

---

First featurette heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lorem elit, iaculis in nisl volutpat, malesuada tincidunt arcu. Proin in leo fringilla, vestibulum mi porta, faucibus felis. Integer pharetra est nunc, nec pretium nunc pretium ac.

Widget Header

• Widget Link
• Widget Link
• Widget Link
• Widget Link
• Widget Link

Widget Text

Vestibulum lorem elit, iaculis in nisl volutpat, malesuada tincidunt arcu. Proin in leo fringilla, vestibulum mi porta, faucibus felis. Integer pharetra est nunc, nec pretium nunc pretium ac.

© 2021 - Universitas Pelita Bangsa

3. Membuat file CSS /* import google font */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap');

/* Reset CSS */

• { margin: 0; padding: 0; } body { line-height:1; font-size:100%; font-family:'Open Sans', sans-serif; color:#5a5a5a; }

#container { width: 980px; margin: 0auto; box-shadow: 001em#cccccc; } /* header / header { padding: 20px; } header h1 { margin: 20px10px; color: #b5b5b5; } / navigasi */ nav { display: block; background-color: #1f5faa; } nav a { padding: 15px30px; display: inline-block; color: #ffffff; font-size: 14px; text-decoration: none; font-weight: bold; } nav a.active, nav a:hover { background-color: #2b83ea; }

/* Hero Panel */ #hero { background-color: #e4e4e5; padding: 50px20px; margin-bottom: 20px; } #hero h1 { margin-bottom: 20px; font-size: 35px; } #hero p { margin-bottom: 20px; font-size: 18px; line-height: 25px; }

/* main content */ #wrapper { margin: 0; } #main { float: left; width: 640px; padding: 20px; }

/* sidebar area */ #sidebar { float: left; width: 260px; padding: 20px; }

/* widget / .widget-box { border:1pxsolid#eee; margin-bottom:20px; } .widget-box .title { padding:10px16px; background-color:#428bca; color:#fff; } .widget-box ul { list-style-type:none; } .widget-box li { border-bottom:1pxsolid#eee; } .widget-box li a { padding:10px16px; color:#333; display:block; text-decoration:none; } .widget-box li:hover a { background-color:#eee; } .widget-box p { padding:15px; line-height:25px; } / footer / footer { clear:both; background-color:#1d1d1d; padding:20px; color:#eee; } / box / .box { display:block; float:left; width:33.333333%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:0 10px; text-align:center; } .box h3 { margin: 15px 0; } .box p { line-height: 20px; font-size: 14px; margin-bottom: 15px; } box img { border: 0; vertical-align: middle; } .image-circle { border-radius: 50%; } .row { margin: 0 -10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .row:after, .row:before, .entry:after, .entry:before { content:''; display:table; } .row:after, .entry:after { clear:both; } .divider { border:0; border-top:1px solid #eeeeee; margin:40px 0; } / entry */ .entry { margin: 15px 0; } .entry h2 { margin-bottom: 20px; } .entry p { line-height: 25px; } .entry img { float: left; border-radius: 5px; margin-right: 15px; } .entry .right-img { float: right; }