Membuat web BioLink sederhana

Skrip dibawah ini merupakan dasar pembuatan tampilan web untuk

Berikut skrip untuk index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>My Bio Link</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:600,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="gambarsesuaikan.png" type="image/png">
</head>
<body>
    <div class="container">
        <img class="avatar" src="gambarsesuaikan.png" alt="Avatar">
        <h1>[Nama Lengkap]</h1>
        <p>Selamat Datang <br /> Follow us:</p>
        <div class="links">
            <a class="link-btn" href="#" target="_blank">Profile</a>
            <a class="link-btn" href="#" target="_blank">Facebook</a>
            <a class="link-btn" href="#" target="_blank">Instagram</a>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>[Nama Lengkap]</h1>

<p>Selamat Datang <br /> Follow us:</p>

<a class="link-btn" href="#" target="_blank">Profile</a>

<a class="link-btn" href="#" target="_blank">Facebook</a>

<a class="link-btn" href="#" target="_blank">Instagram</a>

</div>

</body>

</html>

Berikut script style.css nya

 body {
     background-image: url('/assets/images/Logo_UIKA.png');
            background: linear-gradient(135deg, #1cd185 0%, #2575fc 100%);

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            font-family: 'Montserrat', sans-serif;
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .container {
            background: rgba(255,255,255,0.12);
            border-radius: 18px;
            box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
            padding: 32px 24px;
            max-width: 350px;
            width: 100%;
            text-align: center;
        }
        .avatar {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            margin-bottom: 16px;
            border: 3px solid #fff;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        h1 {
            color: #fff;
            font-size: 1.7rem;
            margin-bottom: 8px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        p {
            color: #e0e0e0;
            margin-bottom: 24px;
            font-size: 1rem;
        }
        .links {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .link-btn {
            background: #fff;
            color: #2575fc;
            font-weight: 600;
            padding: 12px 0;
            border-radius: 10px;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(31,38,135,0.13);
            transition: background 0.2s, color 0.2s, transform 0.2s;
            font-size: 1.05rem;
            letter-spacing: 0.5px;
        }
        .link-btn:hover {
            background: #2575fc;
            color: #fff;
            transform: translateY(-2px) scale(1.03);
        }
        @media (max-width: 400px) {
            .container {
                padding: 18px 6px;
            }
            h1 {
                font-size: 1.2rem;
            }
        }

body {

background-image: url('/assets/images/Logo_UIKA.png');

background: linear-gradient(135deg, #1cd185 0%, #2575fc 100%);

background-size: cover;

background-position: center;

background-repeat: no-repeat;

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

margin: 0;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.container {

background: rgba(255,255,255,0.12);

border-radius: 18px;

box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);

padding: 32px 24px;

max-width: 350px;

width: 100%;

text-align: center;

}

.avatar {

width: 96px;

height: 96px;

border-radius: 50%;

margin-bottom: 16px;

border: 3px solid #fff;

object-fit: cover;

box-shadow: 0 2px 8px rgba(0,0,0,0.15);

}

h1 {

color: #fff;

font-size: 1.7rem;

margin-bottom: 8px;

font-weight: 600;

letter-spacing: 1px;

}

p {

color: #e0e0e0;

margin-bottom: 24px;

font-size: 1rem;

}

.links {

display: flex;

flex-direction: column;

gap: 16px;

}

.link-btn {

background: #fff;

color: #2575fc;

font-weight: 600;

padding: 12px 0;

border-radius: 10px;

text-decoration: none;

box-shadow: 0 2px 8px rgba(31,38,135,0.13);

transition: background 0.2s, color 0.2s, transform 0.2s;

font-size: 1.05rem;

letter-spacing: 0.5px;

}

.link-btn:hover {

background: #2575fc;

color: #fff;

transform: translateY(-2px) scale(1.03);

}

@media (max-width: 400px) {

.container {

padding: 18px 6px;

}

h1 {

font-size: 1.2rem;

}