-
Notifications
You must be signed in to change notification settings - Fork 2
/
try.html
74 lines (70 loc) · 4 KB
/
try.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Website Portofolio Sederhana</title>
<meta content="" name="description">
<meta content="Interface" name="keywords">
<!-- Favicons -->
<link href="https://naficdn.my.id/icon/heart.png" rel="icon">
<link href="https://naficdn.my.id/icon/heart.png" rel="apple-touch-icon">
<link href="https://support.nafii.my.id/icon/heart.png" rel="icon">
<link href="https://support.nafii.my.id/icon/heart.png" rel="apple-touch-icon">
<!-- CSS STYLE -->
<link rel="stylesheet" href="./css/try.css">
</head>
<body>
<div class="kotak1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem omnis eveniet error velit blanditiis sequi beatae vel! Qui, debitis minus.
</p>
</div>
<div class="kotak2">
<h2>Box 2</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam nisi commodi, architecto unde quod doloremque?
</p>
</div>
<div class="kotak3">
<h2>Box 3</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam nisi commodi, architecto unde quod doloremque?
</p>
</div>
<div class="of1">
<h2><strong>Overflow 1</strong></h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam nisi commodi, architecto unde quod doloremque?
</p>
</div></br>
<div class="of2">
<h2><strong>Overflow 2</strong></h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam nisi commodi, architecto unde quod doloremque?
</p>
</div>
<h1 class="dekor margin0">Konten</h1>
<h1 class="dekor margin1">Konten</h1>
<h1 class="dekor margin2">Konten</h1>
<h1 class="dekor margin3">Konten</h1>
<h1 class="dekor margin4">Konten</h1>
<h2><strong>Display: inline</strong></h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi laboriosam animi dignissimos ex soluta ullam voluptatibus quisquam. Necessitatibus, cumque quidem esse, soluta veritatis minima placeat dolore nobis ad autem enim!
Cupiditate exercitationem debitis consequuntur, tenetur vero dolorem eaque odit neque laborum assumenda officia laboriosam veritatis, <span class="inline">box 1</span> <span class="inline">box 2</span> deleniti et modi natus est totam? Suscipit incidunt ipsa ea? Quisquam, nostrum? In, rem vero!</p>
<h2><strong>Display: block</strong></h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi laboriosam animi dignissimos ex soluta ullam voluptatibus quisquam. Necessitatibus, cumque quidem esse, soluta veritatis minima placeat dolore nobis ad autem enim!
Cupiditate exercitationem debitis consequuntur, tenetur vero dolorem eaque odit neque laborum assumenda officia laboriosam veritatis, <span class="block">box 1</span> <span class="block">box 2</span> deleniti et modi natus est totam? Suscipit incidunt ipsa ea? Quisquam, nostrum? In, rem vero!</p>
<h2><strong>Display: inline-block</strong></h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi laboriosam animi dignissimos ex soluta ullam voluptatibus quisquam. Necessitatibus, cumque quidem esse, soluta veritatis minima placeat dolore nobis ad autem enim!
Cupiditate exercitationem debitis consequuntur, tenetur vero dolorem eaque odit neque laborum assumenda officia laboriosam veritatis, <span class="inline-block">box 1</span> <span class="inline-block">box 2</span> deleniti et modi natus est totam? Suscipit incidunt ipsa ea? Quisquam, nostrum? In, rem vero!</p>
<h2><strong>Display: flex</strong></h2>
<div class="flex-kontainer">
<div class="flex-items">box 1</div>
<div class="flex-items">box 2</div>
<div class="flex-items">box 3</div>
<div class="flex-items">box 4</div>
<div class="flex-items">box 5</div>
</div>
</body>
</html>