Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

Coding HTML

This document contains CSS code for styling a website layout. It includes CSS rules for elements like headers, navigation menus, sidebars, blog post content sections, and media queries for responsive design. The CSS is intended to style multiple pages on a school blog website.

Uploaded by

Hafiz Fahrurozi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Coding HTML

This document contains CSS code for styling a website layout. It includes CSS rules for elements like headers, navigation menus, sidebars, blog post content sections, and media queries for responsive design. The CSS is intended to style multiple pages on a school blog website.

Uploaded by

Hafiz Fahrurozi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

@import

url(http://fonts.googleapis.com/css?family=

Open+Sans:400,800,700,600,300);

body {

background:#eee;

margin:0;

font-family:'Open Sans',sans-serif;

hr {

border:0;

background:#dedede;

height:1px;

header {

text-align:center;

color:#232323;

header .judul {

font-size:11pt;

header .deskripsi {

font-size:11pt;

.wrap {
width:950px;

margin:25px auto;

nav.menu ul {

overflow:hidden;

color:#fff;

list-style:none;

float:left;

padding:0;

width:650px;

margin:0 0 0;

background:#1abc9c;

-webkit-box-shadow: 1px 1px 1px 0px

rgba(204,204,204,0.55);

-moz-box-shadow: 1px 1px 1px 0px

rgba(204,204,204,0.55);

box-shadow: 1px 1px 1px 0px

rgba(204,204,204,0.55);

nav.menu ul li {

margin:0;

float:left;

nav.menu ul a {

padding:25px;
display:block;

font-weight:600;

font-size:16pt;

color:#fff;

text-transform:uppercase;

transition:all 0.5s ease;

text-decoration: none;

nav .menu ul a:hover {

text-decoration: underline;

background: #16a085;

.sidebar {

float: right;

width: 275px;

.sidebar .widget {

padding: 25px;

margin: 0 0 25px;

background: #fff;

border-bottom: 2px solid #fff;

transition: all 0.5s ease;

.sidebar .widget:hover {

border-bottom: 2px solid #3498db;


}

.sidebar .widget h2 {

padding: 0;

margin: 0 0 15px;

color: #3498db;

font-size: 18px;

font-weight: 800;

text-transform: uppercase;

.sidebar .widget p {

font-size: 14px;

.sidebar .widget p:last-child {

margin: 0;

.blog {

float: left;

.conteudo {

padding: 25px;

width: 600px;

margin: 25px auto;

background: #fff;

border: 1px solid #dedede;

-webkit-box-shadow: 1px 1px 1px 0px


rgba(204,204,204,0.35);

-moz-box-shadow: 1px 1px 1px 0px

rgba(204,204,204,0.35);

box-shadow: 1px 1px 1px 0px

rgba(204,204,204,0.35);

.conteudo img {

min-width: 300px;

margin: 0 0 25px -25px;

max-width: 300px;

.conteudo h1 {

padding: 0;

margin: 0 0 15px;

font-weight: normal;

color: #666;

font-family: Georgia;

.conteudo p:last-child {

margin: 0;

.conteudo .continue-lendo {

color: #000;

transition: all 0.5s ease;

text-decoration: none;
font-weight: 700;

.conteudo .continue-lendo:hover {

margin-left: 10px;

.post-info {

float: right;

font-size: 12px;

margin: -10px 0 15px;

text-transform: uppercase;

@media screen and (max-width: 960px) {

.header {

position: inherit;

.wrap {

width: 90%;

margin: 25px auto;

.sidebar {

width: 100%;

margin: 25px 0 0;

float: right;

.sidebar .widget {
padding: 5%;

nav .menu ul {

width: 100%;

nav .menu ul {

float: inherit;

nav.menu ul li {

float: inherit;

margin: 0;

nav .menu ul a {

padding: 15px;

font-size: 16px;

border-top: 1px solid #1abf9f;

border-bottom: 1px solid #16a085;

.blog {

width: 90%;

.conteudo {

float: inherit;

margin: 0 auto 25px;

width: 101%;
border: 1px solid #dedede;

padding: 5%;

background: #fff;

.conteudo img {

max-width: 110%;

margin: 0 0 25px -5%;

min-width: 110%;

.conteudo .continue-lendo:hover {

margin-left: 0;

@ media screen and (max-width:460px){

nav .menu ul a {

padding: 15px;

font-size: 14pt;

.sidebar {

display: none;

.post-info {

display: none;

.conteudo {
margin: 25px auto;

.conteudo img {

margin: -5% 0 25px -5%;

<html>

<head>

<title> SMK NEGERI 4 TANJUNGBALAI WEBSITE </title>

<link rel='stylesheet' type='text/css' href='style1.css'>

</head>

<body>

<header>

<h1 class='judul'> SMK NEGERI 4 KOTA TANJUNGBALAI BLOG</h1>

<p class='deskripsi'> Tutorial Membangun Sebuah Website </p>

</header>

<div class='wrap'>

<nav class='menu'>

<ul>

<li>

<a href='index1.html'> Home </a>

</li>

<li>

<a href='tutorial.html'> Tutorial </a>

</li>
<li>

<a href='profil.html'> Profile </a>

</li>

</ul>

</nav>

<aside class='sidebar'>

<div class='widget'>

<h2> Tutorial</h2>

<p> Welcome To SMK NEGERI 4 TANJUNGBALAI BLOG,This Blog provides

website programming Tutorial, Mobile dan Desctop</p>

</div>

<div class='widget'>

<h2> Free Electronics Book</h2>

<p> Free Download Electronics Book, Click This<a target='_blank'

href='https://www.smkn4.go.id'>WWW.SMKN4.GO.ID</a></p>

</div>

</aside>

<div class='blog'>

<div class='conteudo'>

<div class='post-info'> Designer By<b> SMK NEGERI 4 TANJUNGBALAI</b>

</div>

<img src='hafiz.jpg' height='300' width='100'>

<h1>Tutorial </h1>

<hr>
<p> Untuk Membangun Sebuah Website, Kita membutuhkan aplikasi

editor seperti Notepad++, dan Sublime Text, Aplikasi Browser

Seperti Google Chrome dan Mozilla Firefox Dan Juga Aplikasi

Server Seperti Xampp

</p>

<a href='#' class='continue-lendo'> Continue </a>

</div>

</div>

</body>

</html>

<html>

<head>

<title> SMK NEGERI 4 TANJUNGBALAI WEBSITE </title>

<link rel='stylesheet' type='text/css' href='style1.css'>

</head>

<body>

<header>

<h1 class='judul'> SMK NEGERI 4 KOTA TANJUNGBALAI BLOG</h1>

<p class='deskripsi'> Tutorial Membangun Sebuah Website </p>

</header>

<div class='wrap'>

<nav class='menu'>

<ul>

<li>

<a href='index1.html'> Home </a>


</li>

<li>

<a href='tutorial.html'> Tutorial </a>

</li>

<li>

<a href='profil.html'> Profile </a>

</li>

</ul>

</nav>

<aside class='sidebar'>

<div class='widget'>

<h2> Tutorial</h2>

<p> Welcome To SMK NEGERI 4 TANJUNGBALAI BLOG,This Blog provides

website programming Tutorial, Mobile dan Desctop</p>

</div>

<div class='widget'>

<h2> Free Electronics Book</h2>

<p> Free Download Electronics Book, Click This<a target='_blank'

href='https://www.smkn4.go.id'>WWW.SMKN4.GO.ID</a></p>

</div>

</aside>

<div class='blog'>

<div class='conteudo'>

<div class='post-info'> Designer By<b> SMK NEGERI 4 TANJUNGBALAI</b>

</div>
<img src='hafiz.jpg' height='300' width='100'>

<h1> Profil Saya </h1>

<hr>

<p> Nama : Datuk Muda Muhammad Aldi, S.Kom<br/><br>

T.T.L : Tanjungbalai, 17 Mei 1995 <br/><br>

Agama : Islam<br/><br>

Alamat : Jalan Perintis Kemerdekaan KM.10

Simpang Empat<br/>

<br>

Pendidikan :<br/><br>

1. Taman Kanak-Kanak :

TK Bhayangkari Tanjungbalai<br/>

(2000-2001)<br/><br>

2. Sekolah Dasar :

SD Negeri 132407<br/>

(2001-2007)<br/><br>

3. Sekolah Menengah Pertama :

SMP Negeri 1 Tanjungbalai<br/>

(2007-2010)<br/><br>

4. Sekolah Menengah Atas :

SMA Negeri 2 Tanjungbalai<br/>

(2010-2013)<br/><br>

5. Strata Satu (S1) :

STMIK ROYAL KISARAN<br/>


(2013-2017)<br/><br>

</p>

<a href='#' class='continue-lendo'> Continue </a>

</div>

</div>

</body>

</html>

You might also like