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

Ali Alzhrani · منذ 1 ساعة

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>شاشة الجدول</title>
<style>
body {font-family: Arial, sans-serif; text-align: center; background: #f4f4f4; direction: rtl;}
table {margin: 50px auto; border-collapse: collapse; width: 70%; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
th, td {padding: 15px; border: 1px solid #333;}
th {background: #4CAF50; color: white;}
td {font-size: 18px;}
</style>
</head>
<body>
<h2>📅 شاشة جدول قسم الحاسب الآلي</h2>
<table id="scheduleTable">
<tr>
<th>المقرر</th>
<th>الدكتور</th>
<th>اليوم</th>
<th>الوقت</th>
<th>القاعة</th>
</tr>
<tr>
<td colspan="5">سيتم عرض الجدول هنا...</td>
</tr>
</table>

let index = 0;

// أول عرض
showLecture();
// التغيير كل 5 ثواني للتجربة
setInterval(showLecture, 5000);
</script>
</body>
</html>

Ali Alzhrani · منذ 1 ساعة

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>شاشة الجدول</title>
<style>
body {font-family: Arial, sans-serif; text-align: center; background: #f4f4f4; direction: rtl;}
table {margin: 50px auto; border-collapse: collapse; width: 70%; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
th, td {padding: 15px; border: 1px solid #333;}
th {background: #4CAF50; color: white;}
td {font-size: 18px;}
</style>
</head>
<body>
<h2>📅 شاشة جدول قسم الحاسب الآلي</h2>
<table id="scheduleTable">
<tr>
<th>المقرر</th>
<th>الدكتور</th>
<th>اليوم</th>
<th>الوقت</th>
<th>القاعة</th>
</tr>
<tr>
<td colspan="5">سيتم عرض الجدول هنا...</td>
</tr>
</table>

let index = 0;

// أول عرض
showLecture();
// التغيير كل 5 ثواني للتجربة
setInterval(showLecture, 5000);
</script>
</body>
</html>

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

السؤال

Saleh Kamal

3 أجوبة على هذا السؤال

Recommended Posts

كمال صالح2

Ali Alzhrani

Ali Alzhrani

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية