Entri yang Diunggulkan

EXTENSI VS CODE UNTUK WORDPRESS

Berikut beberapa ekstensi yang berguna untuk pengembangan WordPress di VS Code: 1. WordPress Toolbox Ekstensi ini menyediakan fitur-fitur se...

BELAJAR PROGRAMMING CARA MUDAH DAN CEPAT

hidup adalah mencari kesenangan dan menyalurkan hobby berkat dari bakat dan talenta. agar betah untuk hidup di dunia. "malaikat akan menjagai orang yang sedang belajar" selama masih senang dan suka untuk belajar artinya akan dipanjangkan umurnya; bukankah begitu? sudah enggan belajar sama dengan menunggu saatnya untuk mati dan dibangkitkan kembali lain waktu entah kapan, hidup di alam kubur yang tidak kenal waktu, antara ada dan tiada.

dan belajar apa pun juga adalah praktek langsung mengikuti tutorial, tanpa perlu banyak menghafal dan baca banyak teori.

bisa adalah karena terbiasa
menjadi ahli karena banyak pengalaman gagal dan trus berusaha untuk bisa.


sudah tidak jamannya belajar dengan duduk di bangku sekolah. komersialisasi dunia pendidikan dengan dalih mencerdaskan yang justru hanya mencetak 'robot pasif' dan 'bodoh'.

internet diciptakan sebagai dunia pendidikan murah meriah. belajar bijak menyikapi internet dunia terbuka dan bebas yang selalu diikuti oleh tindakan dan pelaku kejahatan akibat uang.


Home » » HTML CSS

HTML CSS

No comments

 In the quiet whispers of the heart, The teachings of Nabiyill Ummiyin play their part. Guiding souls through darkened nights, A beacon of hope, igniting inner lights. saya kira koding css

ChatGPT bilang:
ChatGPT

It sounds like you’re looking to express that beautiful poem in CSS for a webpage! Here’s how you can style the text using CSS to make it visually appealing:

HTML Structure

First, you’ll need to wrap your poem in an HTML element. Here’s a simple structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
    <title>Poem</title>
</head>
<body>
    <div class="poem">
        <p>In the quiet whispers of the heart,<br>
        The teachings of Nabiyill Ummiyin play their part.<br>
        Guiding souls through darkened nights,<br>
        A beacon of hope, igniting inner lights.</p>
    </div>
</body>
</html>

CSS Styling

Now, let’s create a styles.css file to style your poem:

css
body {
    background-color: #f0f0f0; /* Light background color */
    font-family: 'Arial', sans-serif; /* Font family */
    color: #333; /* Text color */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full height */
    margin: 0; /* Remove default margin */
}

.poem {
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent white background */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Space inside the box */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    max-width: 600px; /* Maximum width of the poem box */
    text-align: center; /* Center the text */
}

.poem p {
    font-size: 1.5em; /* Font size for the poem */
    line-height: 1.5; /* Line height for readability */
    margin: 0; /* Remove margin */
}

Explanation of the CSS

  • Body Styles:
    • A light background color to create contrast.
    • Centering the content both vertically and horizontally.
  • Poem Container:
    • A white background with slight transparency for a soft look.
    • Rounded corners and padding for aesthetics.
    • A shadow effect to add depth.
  • Text Styles:
    • Increased font size and line height for better readability.
    • Centered text alignment.

Result

When you open the HTML file in a web browser, you should see your poem beautifully styled, creating a serene and reflective atmosphere. If you have any adjustments or specific styles in mind, let me know!

0 Reviews:

Posting Komentar

Postingan Populer

  • MEMBUAT POST PADA LARAVEL 3.1.8
    MEMBUAT POST PADA LARAVEL 3.1.8 LANGSUNG LOMPAT KE TOPIK SEEDER (SETTING DULU SBB): CONTROLLERS > POST CONTROLLER <?php namespace App...
  • MEMBUAT TOMBOL AKTIF PADA LARAVEL
     MEMBUAT TOMBOL AKTIF PADA LARAVEL Belajar Laravel 8 | 4. Blade Templating Engine 19:19 < a class = "nav-link {{ ( $title === ...
  • BISNIS ONLEN CARA GAMPANG
  • MENGUBAH TITLE PADA LARAVEL
    MENGUBAH TITLE PADA LARAVEL Belajar Laravel 8 | 4. Blade Templating Engine 17:36 Route :: get ( '/' , function () {     return vie...
  • HELLO WORLD
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione illo molestiae unde aperiam, dolor cumque! Porro illo iste, aperiam q...
  • NYOBAIN AJA
    Document  Tombol dengan Ikon: Kamu bisa menambahkan ikon ke dalam tombol menggunakan elemen atau SVG agar lebi...
  • MENGUBAH HALAMAN PADA LARAVEL
    Tampilan pertama kali ketika kita meng-install Laravel adalah seperti berikut: Untuk mengubah halaman menjadi halaman milik kita: Tampilan a...
  • LARAVEL yutub
     https://www.youtube.com/c/kawankoding https://www.youtube.com/c/ReJourney https://www.youtube.com/c/SekolahKoding https://www.youtube.com/c...
  • MEMBUAT LANDING PAGE CARA MUDAH BISA DILAKUKAN SENDIRI
    CARANYA : XXX MENDAFTAR DOMAIN : ***
  • LARAVEL LOGIN MENU
    bantu saya membuat halaman login menu di laravel Berikut adalah langkah-langkah untuk membuat halaman login menggunakan Laravel. Kita akan m...
Powered By Blogger