GOD MODE :: Mr.XycanKing

NAME	SIZE	ACTION
[ .. BACK ]	--	--
projek perdana shihab2.html	4.81 KB	[EDIT] \| [REN] \| [DEL]

Editing: projek perdana shihab2.html

zaki khairushihab 11 stk 2

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio Saya</title>

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 50px;
            background: rgba(0,0,0,0.6);
            position: fixed;
            width: 100%;
            top: 0;
            backdrop-filter: blur(5px);
        }
        nav a {
            color: white;
            margin-left: 20px;
            text-decoration: none;
            font-weight: 500;
        }

header {
            height: 100vh;
            background: url('https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1200')
                        center/cover no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 20px;
        }

header h1 {
            font-size: 55px;
            margin: 0;
            text-shadow: 5px 5px 20px black;
        }

header p {
            font-size: 20px;
            opacity: 0.8;
        }

.btn {
            display: inline-block;
            margin-top: 25px;
            padding: 12px 25px;
            border-radius: 30px;
            background: #ff0055;
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s;
        }
        .btn:hover {
            background: #ff3377;
        }

section {
            padding: 80px 50px;
        }

.title {
            font-size: 32px;
            margin-bottom: 30px;
            text-align: center;
        }

.projects {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }

.card {
            background: #1a1a1a;
            padding: 20px;
            border-radius: 12px;
            transition: 0.3s;
        }
        .card:hover {
            transform: translateY(-8px);
            background: #242424;
        }
        .card img {
            width: 100%;
            border-radius: 10px;
        }

footer {
            text-align: center;
            padding: 20px;
            background: #111;
            margin-top: 50px;
        }
    </style>
</head>

<body>

<nav>
        <div class="logo"><b>Project Portofolio</b></div>
        <div>
            <a href="#about">About</a>
            <a href="#projects">Project</a>
            <a href="#contact">Contact</a>
        </div>
    </nav>

<header>
        <div>
            <h1>Hello, Im a student from Indonesia</h1>
            <p>I have some hobbies, like: drawing and playing basketball</p>
                
                <a href="#projects" class="btn">Curious about my projects?</a>
        </div>
    </header>

<section id="about">
        <h2 class="title">About Me</h2>
        <p style="text-align:center; max-width:700px; margin:auto;">
            Let me introduce myself my name is Muhammad Zaki Khairushihab, a student from SMAIT AS-SYIFA Boarding School 
            Jalancagak. This is my frst programming project. Hope you enjoy it !
        </p>
    </section>

<section id="projects">
        <h2 class="title">My Project</h2>

<div class="projects">
            <div class="card">
                <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=800" alt="">
                <h3>Businnes Website</h3>
                <p>Website landing page.</p>
            </div>

<div class="card">
                <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=800" alt="">
                <h3>Admin Dashboard</h3>
                <p>Admin system clean and self-made.</p>
            </div>

<div class="card">
                <img src="https://images.unsplash.com/photo-1581091012184-5cbf73e0877d?auto=format&fit=crop&w=800" alt="">
                <h3>Portofolio</h3>
                <p>Website portofolio personal profesional.</p>
            </div>
        </div>
    </section>

<section id="contact">
        <h2 class="title">My Contact</h2>
        <p style="text-align:center;">My Email: <b>jakkhairuu@gmail.com</b></p>
    </section>

</body>
</html>

[ THE BREAKER V12 - GOD MODE ]

BABAYO EROR SYSTEM

© Mr.XycanKing