اريد كود HTML واجهات مميزة

Saleh Kamal · 31 ديسمبر 2023

مع ازرار

تم التعديل في 31 ديسمبر 2023 بواسطة Saleh Kamal

كمال صالح2 · 31 ديسمبر 2023

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>اسم الموقع</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <header>
        <div>
            <img src="a.png" alt="اسم النظام">
        </div>
        <center>
            <div>
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>4</button>
                <button>5 </button>
                <button>6 </button>
            </div>
        </center>
    </header>

    
</body>
</html>

CSS:


*{
    margin: 0;
    padding: 0;
}
header{
    width:100%;
    height: 70px;
    background-color:lightskyblue;
    box-shadow: 0px 0px 12px skyblue;
}
header button{
    width:140px;
    padding:10px;
    margin-top:12px;
    border:none;
    background-color:lightblue;
    outline:none;
    font-size:18px;
    box-shadow:0px 0px 8px skyblue;
    font-family: "tajawal", sans-serif;
    font-weight: bold;
    transition: 1s;
    color:black;
    font-family: 'Tajawal', sans-serif;
}
header button:hover{
    color:mediumblue;
    background-color:skyblue;
    box-shadow:0px 0px 15px mediumblue
}
header img{
    width:70px;
    float:left;
    margin-top:0px;
    margin-left:10px;
}

بتاريخ 3 دقائق مضت قال كمال صالح محمد:

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <link rel="icon" href="https://c0.klipartz.com/pngpicture/573/614/gratis-png-ng%C5%A9-hanh-s%C6%A1n-distrito-casa-apartamento-inmobiliaria-volta-redonda-venta-de-logotipos-de-bienes-raices.png" />
    <title>اسم الموقع</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300&display=swap" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="home.css">
</head>
<body>
    <header>
        <div>
            <img src="a.png" alt="اسم النظام">
        </div>
        <center>
            <div>
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>4</button>
                <button>5 </button>
                <button>6 </button>
            </div>
        </center>
    </header>

    
</body>
</html>

CSS:


*{
    margin: 0;
    padding: 0;
}
header{
    width:100%;
    height: 70px;
    background-color:lightskyblue;
    box-shadow: 0px 0px 12px skyblue;
}
header button{
    width:140px;
    padding:10px;
    margin-top:12px;
    border:none;
    background-color:lightblue;
    outline:none;
    font-size:18px;
    box-shadow:0px 0px 8px skyblue;
    font-family: "tajawal", sans-serif;
    font-weight: bold;
    transition: 1s;
    color:black;
    font-family: 'Tajawal', sans-serif;
}
header button:hover{
    color:mediumblue;
    background-color:skyblue;
    box-shadow:0px 0px 15px mediumblue
}
header img{
    width:70px;
    float:left;
    margin-top:0px;
    margin-left:10px;
}