Contoh tampilan menarik dalam bentuk Html.

Contoh Web Statis.


<!DOCTYPE html>

<html>

<head>

    <title>Tampilan Menarik</title>

    <style>

        body {

            font-family: 'Roboto', sans-serif;

            background-color: #f0f0f0;

            margin: 0;

            padding: 0;

            color: #333;

        }


        header {

            background-color: #007bff;

            padding: 20px;

            text-align: center;

        }


        h1 {

            font-size: 36px;

            color: #fff;

        }


        nav {

            background-color: #333;

            padding: 10px;

            display: flex;

            justify-content: center;

        }


        nav a {

            color: #fff;

            text-decoration: none;

            padding: 8px 16px;

            margin: 0 5px;

        }


        nav a:hover {

            background-color: #007bff;

            border-radius: 5px;

        }


        .container {

            max-width: 800px;

            margin: 0 auto;

            padding: 20px;

            background-color: #fff;

            border-radius: 10px;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

        }


        .feature {

            display: flex;

            align-items: center;

            margin-bottom: 30px;

        }


        .feature img {

            width: 100px;

            height: 100px;

            border-radius: 50%;

            margin-right: 20px;

        }


        .feature h2 {

            font-size: 24px;

            margin: 0;

        }


        .feature p {

            font-size: 18px;

            line-height: 1.6;

        }


        .button {

            background-color: #007bff;

            color: #fff;

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            font-size: 18px;

            text-align: center;

        }


        .button:hover {

            background-color: #0056b3;

        }


        footer {

            background-color: #333;

            color: #fff;

            text-align: center;

            padding: 10px;

        }

    </style>

</head>

<body>

    <header>

        <h1>Tampilan Menarik</h1>

    </header>

    <nav>

        <a href="#">Beranda</a>

        <a href="#">Fitur</a>

        <a href="#">Tentang Kami</a>

        <a href="#">Kontak</a>

    </nav>

    <div class="container">

        <div class="feature">

            <img src="feature-1.jpg" alt="Fitur 1">

            <div>

                <h2>Fitur 1</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia hendrerit sapien, in tempus massa blandit nec.</p>

            </div>

        </div>

        <div class="feature">

            <img src="feature-2.jpg" alt="Fitur 2">

            <div>

                <h2>Fitur 2</h2>

                <p>Aliquam erat volutpat. Integer fermentum libero nec enim pellentesque, ut ultrices elit convallis.</p>

            </div>

        </div>

        <button class="button">Coba Sekarang</button>

    </div>

    <footer>

        &copy; 2023 Nama Perusahaan. All rights reserved.

    </footer>

</body>

</html>


Contoh tampilan kode Html diatas :




Komentar

Postingan populer dari blog ini

Tutor Install Free Radius