<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>TINBIT STUDIO</title>

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{
    font-family:Arial,sans-serif;
    background:#050505;
    color:white;
    padding-bottom:75px;
}

/* ===== TOP LOGO ===== */

.logo{
    text-align:center;
    padding:25px 10px;
    background:linear-gradient(145deg,#171717,#020202);
    border-bottom:1px solid #333;
}

.logo h1{
    font-size:36px;
    font-weight:900;
    letter-spacing:5px;

    color:#fff;

    text-shadow:
        2px 2px 0 #777,
        4px 4px 0 #555,
        6px 6px 0 #333,
        8px 8px 12px #000;
}

.logo span{
    display:block;
    margin-top:8px;
    color:#d4af37;
    font-size:12px;
    letter-spacing:5px;
}


/* ===== CAMERA ===== */

.camera{
    width:125px;
    height:78px;
    margin:10px auto 20px;

    position:relative;

    background:linear-gradient(
        145deg,
        #555,
        #222,
        #080808
    );

    border-radius:14px;

    box-shadow:
        0 10px 25px #000,
        inset 2px 2px 5px #888;
}

/* Camera top */

.camera:before{
    content:"";
    position:absolute;

    width:42px;
    height:12px;

    top:-10px;
    left:18px;

    background:#333;

    border-radius:6px 6px 0 0;
}


/* Lens */

.lens{
    position:absolute;

    width:58px;
    height:58px;

    left:34px;
    top:10px;

    border-radius:50%;

    border:5px solid #888;

    background:
        radial-gradient(
            circle,
            #020202 15%,
            #444 17%,
            #111 35%,
            #777 37%,
            #222 55%,
            #050505 70%
        );

    box-shadow:
        0 0 15px #000,
        inset 0 0 10px #aaa;
}


/* Red camera light */

.record{
    position:absolute;

    width:9px;
    height:9px;

    right:13px;
    top:14px;

    background:red;

    border-radius:50%;

    box-shadow:0 0 12px red;
}


/* ===== HERO ===== */

.hero{

    min-height:500px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:30px 20px;

    background:

    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.9)
    ),

    url(
    "https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1400&q=90"
    );

    background-size:cover;
    background-position:center;
}


.hero h2{
    font-size:40px;
    margin-bottom:15px;

    text-shadow:
        0 5px 20px #000;
}


.hero p{
    color:#ddd;
    font-size:17px;
    margin-bottom:30px;
}


/* ===== BUTTON ===== */

.btn{

    display:inline-block;

    padding:15px 30px;

    border-radius:30px;

    background:
    linear-gradient(
        145deg,
        #ffe58a,
        #d4af37,
        #9b7315
    );

    color:#000;

    text-decoration:none;

    font-weight:bold;

    box-shadow:
        0 8px 20px #000;

    transition:.3s;
}


.btn:hover{
    transform:translateY(-4px);
}


/* ===== SECTIONS ===== */

section{
    padding:50px 18px;
    text-align:center;
}


.title{

    font-size:28px;

    color:#d4af37;

    margin-bottom:28px;

    text-shadow:
        0 0 10px rgba(212,175,55,.25);
}


/* ===== SERVICES ===== */

.services{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:15px;
}


.card{

    background:
    linear-gradient(
        145deg,
        #222,
        #0c0c0c
    );

    border:1px solid #333;

    padding:25px 12px;

    border-radius:16px;

    box-shadow:
        0 8px 20px #000;

    transition:.3s;
}


.card:hover{

    transform:
    translateY(-5px);

    border-color:#d4af37;
}


.card .icon{

    font-size:38px;

    margin-bottom:12px;
}


.card h3{

    margin-bottom:8px;
}


.card p{

    color:#aaa;

    font-size:13px;

    line-height:1.5;
}


/* ===== GALLERY ===== */

.gallery{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:10px;
}


.gallery img{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:12px;

    transition:.3s;
}


.gallery img:hover{

    transform:
    scale(1.04);
}


/* ===== ABOUT ===== */

.about{

    background:#111;
}


.about p{

    max-width:600px;

    margin:auto;

    color:#bbb;

    line-height:1.8;
}


/* ===== CONTACT ===== */

.contact{

    background:
    linear-gradient(
        145deg,
        #181818,
        #050505
    );
}


.contact p{

    margin:14px;

    color:#ddd;
}


/* ===== WHATSAPP ===== */

.whatsapp{

    display:inline-block;

    margin-top:10px;

    padding:15px 28px;

    border-radius:30px;

    background:#25D366;

    color:white;

    text-decoration:none;

    font-weight:bold;

    box-shadow:
        0 7px 20px #000;
}


/* ===== BOTTOM NAVIGATION ===== */

.bottom-nav{

    position:fixed;

    bottom:0;
    left:0;
    right:0;

    height:70px;

    background:
    rgba(8,8,8,.97);

    border-top:1px solid #333;

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:100;
}


.bottom-nav a{

    color:#aaa;

    text-decoration:none;

    font-size:11px;

    text-align:center;
}


.bottom-nav a div{

    font-size:22px;

    margin-bottom:4px;
}


.bottom-nav a:hover{

    color:#d4af37;
}


/* ===== MOBILE ===== */

@media(max-width:400px){

    .logo h1{
        font-size:29px;
        letter-spacing:4px;
    }

    .hero h2{
        font-size:32px;
    }

}

</style>

</head>


<body>


<!-- ================= LOGO ================= -->

<header class="logo">

    <div class="camera">

        <div class="lens"></div>

        <div class="record"></div>

    </div>

    <h1>
        TINBIT STUDIO
    </h1>

    <span>
        PHOTOGRAPHY • VIDEO
    </span>

</header>



<!-- ================= HOME ================= -->

<section
class="hero"
id="home">

    <div>

        <h2>
            Capture Your Story
        </h2>

        <p>
            Professional Photography & Video
        </p>

        <a
        href="#contact"
        class="btn">

            BOOK A SESSION

        </a>

    </div>

</section>



<!-- ================= SERVICES ================= -->

<section
id="services">

    <h2 class="title">
        OUR SERVICES
    </h2>


    <div class="services">


        <div class="card">

            <div class="icon">
                📸
            </div>

            <h3>
                Photography
            </h3>

            <p>
                Professional portraits,
                studio photos and events.
            </p>

        </div>



        <div class="card">

            <div class="icon">
                💍
            </div>

            <h3>
                Wedding
            </h3>

            <p>
                Beautiful wedding
                photography and video.
            </p>

        </div>



        <div class="card">

            <div class="icon">
                🎂
            </div>

            <h3>
                Birthday
            </h3>

            <p>
                Capture every special
                birthday moment.
            </p>

        </div>



        <div class="card">

            <div class="icon">
                🎥
            </div>

            <h3>
                Video
            </h3>

            <p>
                Professional video
                production and editing.
            </p>

        </div>


    </div>

</section>



<!-- ================= GALLERY ================= -->

<section
id="gallery">

    <h2 class="title">
        OUR WORK
    </h2>


    <div class="gallery">


        <img
        src="https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=700&q=90">


        <img
        src="https://images.unsplash.com/photo-1537633552985-df8429e8048b?auto=format&fit=crop&w=700&q=90">


        <img
        src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?auto=format&fit=crop&w=700&q=90">


        <img
        src="https://images.unsplash.com/photo-1507504031003-b417219a0fde?auto=format&fit=crop&w=700&q=90">


    </div>

</section>



<!-- ================= ABOUT ================= -->

<section
class="about">

    <h2 class="title">
        ABOUT TINBIT
    </h2>


    <p>

        Tinbit Studio captures your
        most important moments with
        professional photography,
        creative portraits, weddings,
        birthdays and video production.

    </p>

</section>



<!-- ================= CONTACT ================= -->

<section
class="contact"
id="contact">

    <h2 class="title">
        CONTACT TINBIT
    </h2>


    <p>
        📍 Moyale, Ethiopia
    </p>


    <p>
        📞 +251916851961
    </p>


    <p>
        📧 tinbitstudio@example.com
    </p>


    <br>


    <!-- CHANGE THE NUMBER -->

    <a
    class="whatsapp"
    href="https://wa.me/251000000000">

        💬 CHAT ON WHATSAPP

    </a>

</section>



<!-- ================= BOTTOM MENU ================= -->

<nav class="bottom-nav">


    <a href="#home">

        <div>🏠</div>

        Home

    </a>



    <a href="#services">

        <div>📸</div>

        Services

    </a>



    <a href="#gallery">

        <div>🖼️</div>

        Gallery

    </a>



    <a href="#contact">

        <div>📞</div>

        Contact

    </a>


</nav>


</body>

</html>