Entri yang Diunggulkan

SQL WORKBENCH

  Kalau mau pakai SQL langsung, ini contoh: sql Salin Edit CREATE DATABASE gloriabank; USE gloriabank; CREATE TABLE users ( id BIG...

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...
  • MENGUBAH TITLE PADA LARAVEL
    MENGUBAH TITLE PADA LARAVEL Belajar Laravel 8 | 4. Blade Templating Engine 17:36 Route :: get ( '/' , function () {     return vie...
  • 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
  • HELLO WORLD
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione illo molestiae unde aperiam, dolor cumque! Porro illo iste, aperiam q...
  • MENGUBAH HALAMAN PADA LARAVEL
    Tampilan pertama kali ketika kita meng-install Laravel adalah seperti berikut: Untuk mengubah halaman menjadi halaman milik kita: Tampilan a...
  • NYOBAIN AJA
    Document  Tombol dengan Ikon: Kamu bisa menambahkan ikon ke dalam tombol menggunakan elemen atau SVG agar lebi...
  • LARAVEL LOGIN MENU
    bantu saya membuat halaman login menu di laravel Berikut adalah langkah-langkah untuk membuat halaman login menggunakan Laravel. Kita akan m...
  • 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...
  • PREPARE LARAVEL
    Download Git dari sini: https://git-scm.com/downloads Download dari https://getcomposer.org/ 1️⃣ Download & Install Node.js Buka webs...

BINTANG JATUH LYRAEA

MG86

I S I itu PENTING bukan hanya ESSENSI

BINGUNG GUE , . . .

Powered By Blogger