Simpan Dengan Nama File Style - CSS: Modul Web Responsif Kelas XII RPL - 2019

1
Simpan dengan nama file style.css transition: all 0.5s ease;

@import text-decoration: none;
url(http://fonts.googleapis.com/css?family=Open+Sans:4 }
00,800,700,600,300);
nav.menu ul a:hover{
body{ text-decoration: underline;
background: #eee; background:#16a085;
margin:0; }
font-family: 'Open Sans', sans-serif;
} .sidebar{
float:right;
hr{ width: 275px;
border:0; }
background:#dedede;
height: 1px; .sidebar .widget{
} padding:25px;
margin: 0 0 25px;
header{ background: #fff;
text-align: center; border-bottom: 2px solid #fff;
color: #232323; transition: all 0.5s ease;
} }
header.judul{ .sidebar .widget:hover{

font-size: 17pt; border-bottom: 2px solid;
} }
.wrap{ .sidebar .widget h2{

width: 950px; padding:0;
margin: 25px auto; margin: 0 0 15px;
} color: #3498db;
font-size: 18px;
nav.menu ul{ font-weight: 800;
overflow:hidden; text-transform: uppercase;
color:#fff; }
list-style: none;
float:left; .sidebar .widget p:last-child{
padding:0; margin:0;
width: 650px; }
margin: 0 0 0;
background:#1abc9c; .blog{
-webkit-box-shadow: 1px 1px 1px 0px float:left;
rgba(204,204,204,0.55); }
-moz-box-shadow: 1px 1px 1px 0px
rgba(204,204,204,0.55); .conteudo{
box-shadow: 1px 1px 1px 0px width:600px;
rgba(204,204,204,0.55); padding: 25px;
} margin:25px auto;
background: #fff;
nav.menu ul li{ border: 1px solid #dedede;
margin: 0; -webkit-box-shadow: 1px 1px 1px 0px rgba
float:left; (204,204,204,0.35);
} -moz-box-shadow: 1px 1px 1px 0px rgba
(204,204,204,0.35);
nav.menu ul a{ box-shadow: 1px 1px 1px 0px rgba
padding: 25px; (204,204,204,0.35);
display:block; }
font-weight: 600;
font-size: 16px;
color:#fff; .conteudo img{
text-transform: uppercase; min-width: 650px;
Modul Web Responsif Kelas XII RPL - 2019
2
margin:0 0 25px -25px; nav .menu ul li{

max-width: 650px; float:inherit:
} margin: 0;
.conteudo h1{ }
padding:0;
margin:0 0 15px; nav .menu ul a{
font-weight: normal; padding:15px;
color: #666; font-size: 16px;
font-family: Georgia; border-top: 1px solid #16a085;
} }
.conteudo p:last-child{
margin:0; .blog{
} width: 90%;
}
.conteudo .continue-lendo{
color:#000; .conteudo{
transition: all 0.5s ease; float:inherit;
text-decoration: none; margin: 0 auto 25px;
font-weight: 700; width:101%;
} border: 1px solid #dedede;
padding:5%;
.conteudo .continue-lendo:hover{ background: #fff;
margin-left: 10px; }
}
.conteudo img{
.post-info{ max-width: 110%;
float: right; margin: 0 0 25px -5%;
font-size: 12px; min-width:110%;
margin: -10px 0 15px; }
text-transform: uppercase;
} .conteudo .continue-lendo:hover{
margin-left:0;
@media screen and (max-width: 960px){ }
.header{ }
position:inherit;
} @media screen and (max-width: 460px){
nav.menu ul a{
.wrap{ padding:15px;
width: 90%; font-size: 14px;
margin: 25px auto; }
} .sidebar{
display:none;
.sidebar{ }
width:100%;
margin:25px 0 0; .post-info{
float:right; display:none;
} }
.sidebar .widget{ .conteudo{

padding:5%; margin:25px auto;
} }
nav.menu ul{ .conteudo img{

width:100%; margin: -5% 0 25px -5%;
} }
}
nav.menu ul{
float:inherit;
}

3
Simpan dengan nama file index.html

<!DOCTYPE html>
<html>
<head>
<title>Website Responsif</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<header>
<h1 class="judul"> Website Responsif</h1>
<p class="deskripsi"> Pemograman Web Dinamis yang dapat dilihat di
<i> Smartphone</i> maupun Komputer</p>
</header>

<div class="wrap">

<nav class="menu">
<ul>
<li>
<a href="#">Beranda</a>
</li>
<li>
<a href="#">Profil</a>
</li>
<li>
<a href="#">Pengaturan</a>
</li>
</ul>
</nav>


<aside class="sidebar">
<div class="widget">
<h2>Profil</h2>
<p> Selamat datang di profil website responsif</p>
</div>
<div class="widget">
<h2>Pemberitahuan</h2>
<p> Silahkan pelajari materi nya</p>
</div>
</aside>


<div class="blog">
<div class="conteudo">
<div class="post-info">
Di posting Oleh <b> SMK Assubandiyah</b>
</div>
<img src="./2bln.jpg">
<h1>Tampilan sederhana HTML & CSS</h1>
<hr>
<p>
silahkan ketikan teks disini silahkan ketikan teks disini
</p>
<a href="#" class="continue lendo">Selengkapnya>></a>
</div>
<div class="conteudo">
4
<div class="post-info">
Di posting Oleh <b> SMK Assubandiyah</b>
</div>
<img src=" ./3bln.jpg">
<h1>Belajar HTML dan CSS</h1>
<hr>
<p>
</p>
<a href="#" class="continue-lendo">Selengkapnya>></a>
</div>
</div>

</div>
</body>
</html>

Simpan Dengan Nama File Style - CSS: Modul Web Responsif Kelas XII RPL - 2019

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Simpan Dengan Nama File Style - CSS: Modul Web Responsif Kelas XII RPL - 2019

Uploaded by

Copyright:

Available Formats

1

Simpan dengan nama file style.css transition: all 0.5s ease;

header.judul{ .sidebar .widget:hover{

.wrap{ .sidebar .widget h2{

margin:0 0 25px -25px; nav .menu ul li{

.sidebar .widget{ .conteudo{

nav.menu ul{ .conteudo img{

Modul Web Responsif Kelas XII RPL - 2019

Simpan dengan nama file index.html

Modul Web Responsif Kelas XII RPL - 2019

You might also like