Latuhan Coding

LATIHAN 1
<HTML>
<head>
<title></title>
</head>
<body>
<h3><font color="red"><marquee> Selamat datang di website PPMI AL ISHAQI</marquee></font></h3>
<H1><font color="blue"> www.ishaqi.com
</font> <h1
<p align+"justify"> "hii nama saya vedira </P>
</body>
</html>
LATIHAN 2
<!DOCTYPE html>
<html>
<head>
<title> My First HTML Project </title>
</head>
<body BGCOLOR=“Green” TEXT=“Red”>
WELCOME TO MY WEBSITE
</body>
<body bgcolor=”#00ff00”>
</html>
LATIHAN3
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="filter">
</div>
<h1>KIRIM UCAPAN SELAMAT ULANG TAHUN KE TEMAN </h1>
<div class="valentine_card">
<form>
<label>TO :</label><br><input type="text"><br>
<label>Message :</label><br>
<textarea></textarea><br>
<button>SEND</button>
</form>
</div>
</body>
</html>
LATIHA4
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WEB PERTAMA</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<div class="logo">
<img src="assets/icon/partner.png" alt="logo" class="logo-img" />
<h1 class="logo-title">DEA X</h1>
</div>
<nav>
<ul>
<li><a href="#jasa">JASA</a></li>
<li><a href="mailto:deacode@icloud.com">KONTAK</a></li>
</ul>
</nav>
<button class="btn-cta" onclick="redirInstagram()">Follow Saya</button>
</header>
<div class="container">
<div class="intro">
<p class="title">Hello, Dea Afrizal Here!</p>

<p class="description">Technology Influencer From Village.</p>
<img src="assets/foto/dea-afrizal-1.png" alt="dea afrizal foto 1"

class="img-foto"/>
</div>
</div>
<div class="parallax">
<div class="tentang">
<p class="title">Saya Adalah Programmer</p>
<p class="description">Ngoding aja dulu, jagonya belakangan.</p>
<div class="mt-10">
<button class="btn-cta" onclick="redirWhatsapp()">Mari

Kerjasama</button>
</div>
</div>
<div class="container">
<div class="card" id="jasa">
<div class="card-item">
<img src="assets/icon/24-hours.png" alt="icon

1" class="icon"/>
<p class="card-title">Pelayanan Nonstop</p>
<p class="card-description">Servis nonston

ketika anda membutuhkan bantuan.</p>
</div>
<img src="assets/icon/hot-deal.png" alt="icon

2" class="icon"/>
<p class="card-title">Jasa Paling Murah</p>

<p class="card-description">Biaya jasa yang
saya berikan pasti murah dan terjamin</p>
</div>
<img src="assets/icon/rating.png" alt="icon 3"

class="icon"/>
<p class="card-title">684 Review</p>
<p class="card-description">Mereka senang

dalam bekerjasama dengan saya.</p>
</div>
</div>
</div>
</div>
<footer>
<p class="title">© Dea Afrizal Website 2022</p>
</footer>
<script>
function redirInstagram() {
window.location.href = "https://instagram.com/dea.afrizal"
function redirWhatsapp() {
window.location.href = "https://wa.me/+628192389292"
</script>
</body>
</html>
CSS
*, html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica;
scroll-behavior: smooth;
header {
background: #1A2238;
color: #eaeaea;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
.logo {
margin-right: auto;
display: flex;
gap: 6px;
}
.logo-img {
width: 35px;
height: 35px;
margin-left: 10px;
.logo-title {
cursor: pointer;
transition: all .5s ease 0s;
.logo:hover {
color: #FF6A3D;
transform: rotate(2deg);
.btn-cta {
margin-right: 10px;
border: none;
font-size: 20px;
padding: 6px 12px;
background: #FF6A3D;
color: #eaeaea;
border-radius: 8px;
cursor: pointer;
nav ul{
display: flex;
padding: 20px;
li {
list-style-type: none;
padding: 10px;
li a {
transition: all .5s ease 0s;
display: inline-block;
li a:hover {
color: #FF6A3D;
transform: rotate(2deg);
a{
color: #eaeaea;
text-decoration: none;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 70px 0;
.intro {
display: flex;
flex-direction: column;
gap: 10px;
text-align: center;
.title {
font-size: 24px;
font-weight: bold;
.description {
font-size: 28px;
font-weight: bolder;
.img-foto {
width: 100%;
height: auto;
padding: 10px;
max-width: 500px;
.parallax {
background-image: url('assets/foto/semismile.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
.tentang {
display: flex;
color: #eaeaea;
padding: 40px;
.mt-10 {
margin-top: 20px;
.card {
display: flex;
flex-wrap: wrap;
gap: 8px;
.card-item {
text-align: center;
width: 25%;
min-height: 200px;
max-height: 300px;
background: #f7f7f7;
color: #222;
padding: 24px;
box-shadow: 2px 5px 5px 1px rgba(0,0,0,0.5);
.card-title {
font-size: 18px;
font-weight: bolder;
.card-description {
font-size: 14px;
margin-top: 4px;
.icon {
width: 75px;
height: 75px;
margin: 10px;
padding: 4px;
footer {
padding: 20px;
text-align: center;
color: #eaeaea;
}
@media screen and (max-width: 500px) {
.card {
gap: 0;
.card-item {
width: 100%;
opacity: 0.9;
.container {
width: 100%;
padding: 0;
.intro {
margin-top: 20px;
.img-foto {
padding: 0;
}
nav {
position: fixed;
bottom: 0;
width: 100%;
z-index: 9;
footer {
margin-bottom: 70px;
margin-top: 70px;

Latuhan Coding

Uploaded by

Document Information

Original Description:

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

Latuhan Coding

Uploaded by

Copyright:

Available Formats

LATIHAN 1

<h3><font color="red"><marquee> Selamat datang di website PPMI AL ISHAQI</marquee></font></h3>

<H1><font color="blue"> www.ishaqi.com

<p align+"justify"> "hii nama saya vedira </P>

<title> My First HTML Project </title>

<body BGCOLOR=“Green” TEXT=“Red”>

<link rel="stylesheet" href="style.css">

<h1>KIRIM UCAPAN SELAMAT ULANG TAHUN KE TEMAN </h1>

<label>TO :</label><br><input type="text"><br>

<meta charset="utf-8" />

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="style.css"/>

<img src="assets/icon/partner.png" alt="logo" class="logo-img" />

<h1 class="logo-title">DEA X</h1>

<button class="btn-cta" onclick="redirInstagram()">Follow Saya</button>

<p class="title">Hello, Dea Afrizal Here!</p>

<img src="assets/foto/dea-afrizal-1.png" alt="dea afrizal foto 1"

<p class="title">Saya Adalah Programmer</p>

<p class="description">Ngoding aja dulu, jagonya belakangan.</p>

<button class="btn-cta" onclick="redirWhatsapp()">Mari

<div class="card" id="jasa">

<img src="assets/icon/24-hours.png" alt="icon

<p class="card-title">Pelayanan Nonstop</p>

<p class="card-description">Servis nonston

<img src="assets/icon/hot-deal.png" alt="icon

<p class="card-title">Jasa Paling Murah</p>

<img src="assets/icon/rating.png" alt="icon 3"

<p class="card-title">684 Review</p>

<p class="card-description">Mereka senang

<p class="title">&copy; Dea Afrizal Website 2022</p>

transition: all .5s ease 0s;

padding: 6px 12px;

transition: all .5s ease 0s;

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

You might also like

<p class="title">© Dea Afrizal Website 2022</p>