Scribd
Upload
18 views3 pages

Layouting DGN Css

The document is an HTML template that contains CSS styling. It includes sections for the header, navigation menu, article content, and footer. The navigation menu contains links to home and other pages. The article provides an introduction and overview of London.

Uploaded by

andinilia29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views3 pages

Layouting DGN Css

The document is an HTML template that contains CSS styling. It includes sections for the header, navigation menu, article content, and footer. The navigation menu contains links to home and other pages. The article provides an introduction and overview of London.

Uploaded by

andinilia29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */


header {
background-color: tomato;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
}

/* Create two columns/boxes that floats next to each other */


nav {
float: left;
width: 20%;
background: #ccc;
padding: 20px;
}

/* Style the list inside the menu */


nav ul {
list-style-type: none;
padding: 0;
}

article {
float: left;
padding: 20px;
width: 80%;
background-color: #f1f1f1;
}

/* Clear floats after the columns */


section::after {
content: "";
display: table;
clear: both;
}

/* Style the footer */


footer {
background-color: tomato;
padding: 10px;
text-align: center;
color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to
each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h2>SETIAWAN ARDI WIJAYA</h2>
</header>

<section>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<br>
<li><a href="[Link]">Halaman 1</a></li>
<br>
<li><a href="[Link]">Halaman 2</a></li>
<br>
<li><a href="#">About</a></li>
</ul>
</nav>

<article>
<h1>INI HOME</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Copyright@jaya-diudara</p>
</footer>

</body>
</html>

You might also like