diff --git a/about.html b/about.html index 31bf6f3..d63e271 100644 --- a/about.html +++ b/about.html @@ -7,7 +7,8 @@ - + + @@ -34,33 +35,35 @@ -

Our Team

+
+

Our Team

-
-
- -

Syahdan

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
- -

Windah

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
- -

Yusuf

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
- -

Sitri

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
- -

Selfi

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+ +

Syahdan

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+ +

Windah

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+ +

Yusuf

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+ +

Sitri

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+ +

Selfi

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
diff --git a/article.html b/article.html index f1c1d3f..996492b 100644 --- a/article.html +++ b/article.html @@ -7,7 +7,8 @@ - + + @@ -34,27 +35,27 @@
- - -
-
-

Article

-
- -
-

Pertamax dioplos, warga pindah ke Shell

-

Jakarta: Legislator Komisi VI DPR dari Fraksi PDIP melakukan inspeksi mendadak (sidak) ke SPBU 34.11405, Palmerah, Jakarta Barat. Mereka mengecek kualitas Pertamax yang belakangan ramai isu dioplos Pertalite.

-

"Kami ingin memastikan apakah konsumen itu mendapatkan produk sesuai yang dijanjikan oleh Pertamina atau tidak," kata Wakil Ketua Komisi VI DPR dari Fraksi PDIP Adisatrya Suryo Sulisto di lokasi, Senin, 3 Maret 2025.

-

Adisatrya mengatakan pihaknya menggeruduk SPBU Pertamina karena mendengar keluhan dari masyarakat. Pasalnya, berkembang narasi bahwa kualitas BBM RON 92 atau Pertamax setara RON 90 atau Pertalite.

-
-
Copyright (c) 2025 Widuri News
-
+
+
+
+

Article

+
+ +
+

Pertamax dioplos, warga pindah ke Shell

+

Jakarta: Legislator Komisi VI DPR dari Fraksi PDIP melakukan inspeksi mendadak (sidak) ke SPBU 34.11405, Palmerah, Jakarta Barat. Mereka mengecek kualitas Pertamax yang belakangan ramai isu dioplos Pertalite.

+

"Kami ingin memastikan apakah konsumen itu mendapatkan produk sesuai yang dijanjikan oleh Pertamina atau tidak," kata Wakil Ketua Komisi VI DPR dari Fraksi PDIP Adisatrya Suryo Sulisto di lokasi, Senin, 3 Maret 2025.

+

Adisatrya mengatakan pihaknya menggeruduk SPBU Pertamina karena mendengar keluhan dari masyarakat. Pasalnya, berkembang narasi bahwa kualitas BBM RON 92 atau Pertamax setara RON 90 atau Pertalite.

+
+
Copyright (c) 2025 Widuri News
+
+
\ No newline at end of file diff --git a/contact.html b/contact.html index 86becc7..f696064 100644 --- a/contact.html +++ b/contact.html @@ -7,7 +7,8 @@ - + + @@ -34,12 +35,14 @@
-
-

Kontak saya:

- Jalan kebon jeruk baru, No 11 Rt 3 Rw 5, Jakarta Selatan - +62 80989999 - aji@usaha.com -
+
+
+

Kontak saya:

+ Jalan kebon jeruk baru, No 11 Rt 3 Rw 5, Jakarta Selatan + +62 80989999 + aji@usaha.com +
+
\ No newline at end of file diff --git a/css/article.css b/css/article.css new file mode 100644 index 0000000..b0cdd3f --- /dev/null +++ b/css/article.css @@ -0,0 +1,31 @@ + +.container-article { + display: grid; + grid-template-areas: + "header header" + "menu article" + "footer footer"; + grid-template-columns: 1fr 3fr; + gap:20px; + padding: 5px; + /* background-color: #ff9999; */ +} +.container-article > div { + /* background-color: #bbb; */ + grid-area: header; +} +.container-article > aside { + background-color: #bbb; + grid-area: menu; + padding: 10px; +} +.container-article > article { + /* background-color: #bbb; */ + grid-area: article; + padding: 10px; +} +.container-article > footer { + background-color: #bbb; + grid-area: footer; + padding: 10px; +} \ No newline at end of file diff --git a/style.css b/css/style.css similarity index 60% rename from style.css rename to css/style.css index 1cc4ddf..8c98cd7 100644 --- a/style.css +++ b/css/style.css @@ -5,6 +5,18 @@ padding: 10px ; /* Ngejarakin pada sisi dalam */ } +body { + margin:0; + padding:0; + +} + +.container { + margin-inline:100px; + margin-top: 20px; + margin-bottom: 30px; +} + header { background-color: #2E3440; /* Warna background */ color:#E5E9F0; /* Warna teks */ @@ -48,33 +60,3 @@ nav { text-align: center; } -.container-article { - display: grid; - grid-template-areas: - "header header" - "menu article" - "footer footer"; - grid-template-columns: 1fr 3fr; - gap:20px; - padding: 5px; - background-color: #ff9999; -} -.container-article > div { - background-color: #bbb; - grid-area: header; -} -.container-article > aside { - background-color: #bbb; - grid-area: menu; - padding: 10px; -} -.container-article > article { - background-color: #bbb; - grid-area: article; - padding: 10px; -} -.container-article > footer { - background-color: #bbb; - grid-area: footer; - padding: 10px; -} diff --git a/index.html b/index.html index 28aa33e..901871d 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,8 @@ - + + @@ -20,86 +21,91 @@
Home
-
About
-
Article
-
Contact
+
- +
-
+

Pemrograman Web

+

Alternative element div

+ header buat header diatas
+ nav buat menu navigasi
+ aside buat menu di sidebar
+ article buat artikel
+ section Buat section, contoh: Call-to-Action, Testimonial, Our Clients, etc
+ main Buat container / bagian utamanya
+ footer Buat footer bagian bawah
- - +
-
+ + -
+
-

Macam-macam Tipografi HTML

-
-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
+
-

Paragraph

+

Macam-macam Tipografi HTML

+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- Text, - Bold, - Strong, - Italic, - Emphatized, - Small, - Mark, - Delete and Insert, - Underline +

Paragraph

-
- - - - - - - - - - -
-

1

- 		-

2

-
-

3

- 		-

4

-
+ Text, + Bold, + Strong, + Italic, + Emphatized, + Small, + Mark, + Delete and Insert, + Underline - +
- - +

Positioning

+ +

Positioning Dengan Table

+ + + + + + + + + + +
+

1

+ 		+

2

+
+

3

+ 		+

4

+
+ +

Positioning Dengan Float

+

Contohnya dapat dilihat di navbar menu

+ +

Positioning Dengan Flex

+

Contohnya dapat dilihat di About > Team Profile

+
\ No newline at end of file