اريد كود 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;
}

لازم يتم الربط بين HTML وCSS

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

السؤال

Saleh Kamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

كمال صالح2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية