Untitled

<html>
<head>
    <title>Boxes</title>

    <style type="text/css">

        body{
            font-size:80%;
            font-family:"Courier New", Courier, monospace;
            letter-spacing:0.15em;
            background-color:#efefef;
        }

        #page{
            max-width:940px;
            min-width:720px;
            margin:10px auto;
            padding:20px;
            border:4px double #000;
            background-color:#ffffff;
        }

        #logo{
            width:150px;
            margin:10px auto 25px auto;
            text-align:center;
        }

        #logo img{
            width:150px;
            height:150px;
            object-fit:cover;
        }

        ul{
            width:570px;
            padding:15px;
            margin:0px auto;
            border-top:2px solid #000;
            border-bottom:1px solid #000;
            text-align:center;
        }

        li{
            display:inline;
            margin:0px 3px;
        }

        a{
            color:#000000;
            text-transform:uppercase;
            text-decoration:none;
            padding:6px 18px 5px 18px;
        }

        a:hover{
            color:#cc3333;
        }

        .gallery{
            text-align:center;
            margin-top:30px;
        }

        .gallery img{
            width:250px;
            height:160px;
            margin:10px;
            border:3px solid black;
            object-fit:cover;
        }

        h2{
            text-align:center;
            margin-top:50px;
        }

        div[id]{
            text-align:center;
            padding:25px;
        }

        .section-image{
            width:250px;
            height:160px;
            border:3px solid black;
            object-fit:cover;
        }

        p{
            width:600px;
            margin:auto;
        }

    </style>
</head>

<body>

<div id="page">

    <div id="logo">
        <img src="images/1.jpeg" alt="Logo">
    </div>


    <ul id="navigation">
        <li><a href="#home">Home</a></li>
        <li><a href="#sale">For Sale</a></li>
        <li><a href="#repairs">Repairs</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>



    <div id="home">

        <h2>Home</h2>

        <div class="gallery">
            <img src="images/1.jpeg">
            <img src="images/2.jpeg">
            <img src="images/3.jpeg">
        </div>

        <p>
            We specialize in the sale and repair of classic keyboards,
            in particular the Fender Rhodes, Wurlitzer EP200,
            and Hohner Clavinet.
        </p>

    </div>



    <div id="sale">

        <h2>For Sale</h2>

        <img src="images/4.jpeg" class="section-image">

        <p>
            Classic keyboards available for sale.
            Browse our latest collection.
        </p>

    </div>



    <div id="repairs">

        <h2>Repairs</h2>

        <img src="images/5.jpeg" class="section-image">

        <p>
            We provide repair services for vintage keyboards.
        </p>

    </div>



    <div id="about">

        <h2>About</h2>

        <img src="images/6.jpeg" class="section-image">

        <p>
            Our company specializes in keyboard restoration.
        </p>

    </div>



    <div id="contact">

        <h2>Contact</h2>

        <p>Email: [email protected]</p>
        <p>Phone: +355 69 1234567</p>

    </div>

</div>

</body>
</html>
Editor is loading...