This post is an application.
عنوان الموقع
تقارير خاصة
تقرير 1
محتوى التقرير 1. تفاصيل مهمة هنا.
تفاصيل إضافية
معلومات إضافية حول التقرير 1.
تقرير 2
محتوى التقرير 2. تفاصيل مهمة هنا.
تفاصيل إضافية
معلومات إضافية حول التقرير 2.
تقرير 3
محتوى التقرير 3. تفاصيل مهمة هنا.
تفاصيل إضافية
معلومات إضافية حول التقرير 3.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>موقع الأخبار</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<header>
<h1>يمن كود زيلا|الإخباري</h1>
</header>
<nav>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">عاجل</a></li>
<li><a href="#">السياسة</a></li>
<li><a href="#">تقارير</a></li>
<li><a href="#">العالم</a></li>
</ul>
</nav>
<div class="news-ticker">
<div class="ticker-title">أخبار عاجلة:</div>
<div class="ticker-content">
<div class="ticker-item">يمن كود زيلا توفر عليك الوقت والجهد</div>
<div class="ticker-item">شاهد أحدث المقطتفات التصميمية</div>
<div class="ticker-item">المنصة يتم تحديثها وتطويرها باستمرار</div>
</div>
</div>
<section>
<h2>تقارير خاصة</h2>
<div class="container">
<div class="card">
<div class="section">
<h3>تقرير 1</h3>
<p>محتوى التقرير 1. تفاصيل مهمة هنا.</p>
</div>
<div class="section">
<h3>تفاصيل إضافية</h3>
<p>معلومات إضافية حول التقرير 1.</p>
</div>
</div>
<div class="card">
<div class="section">
<h3>تقرير 2</h3>
<p>محتوى التقرير 2. تفاصيل مهمة هنا.</p>
</div>
<div class="section">
<h3>تفاصيل إضافية</h3>
<p>معلومات إضافية حول التقرير 2.</p>
</div>
</div>
<div class="card">
<div class="section">
<h3>تقرير 3</h3>
<p>محتوى التقرير 3. تفاصيل مهمة هنا.</p>
</div>
<div class="section">
<h3>تفاصيل إضافية</h3>
<p>معلومات إضافية حول التقرير 3.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-links">
<a href="#">تقارير خاصة</a>
<a href="#">أحدث الأخبار</a>
<a href="#">البرامج</a>
<a href="#">المقالات</a>
</div>
<div class="subscription-box">
<h3>اشترك في النشرة البريدية</h3>
<form>
<input type="email" placeholder="أدخل بريدك الإلكتروني">
<button type="submit">اشترك</button>
</form>
</div>
</footer>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
direction: rtl;
}
header {
background-color: #384d48;
color: #fff;
padding: 20px 0;
text-align: center;
}
nav {
background: #8B8149;
padding: 10px 0;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
transition: background 0.3s;
}
nav ul li a:hover {
background: #D4D5D9;
color: #384d48;
}
.news-ticker {
background: #ACAD94;
color: #000;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
overflow: hidden;
}
.news-ticker .ticker-title {
font-weight: bold;
margin-right: 20px;
}
.news-ticker .ticker-content {
display: flex;
animation: ticker 10s linear infinite;
}
.news-ticker .ticker-item {
margin-right: 50px;
}
@keyframes ticker {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
section {
padding: 20px 0;
}
section h2 {
text-align: center;
color: #384d48;
}
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 20px auto;
width: 90%;
}
.card {
background: rgba(212, 213, 217, 0.8);
border-radius: 5px;
margin: 10px;
padding: 20px;
flex: 1 1 calc(30% - 20px); /* Responsive card width */
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
display: flex;
flex-direction: column;
}
.card .section {
margin-bottom: 15px;
}
footer {
background: rgba(172, 173, 148, 0.9);
color: #fff;
padding: 20px 0;
text-align: center;
}
.footer-links a,
.social-media a {
color: #fff;
margin: 0 10px;
text-decoration: none;
}
.subscription-box {
margin-top: 20px;
}
.subscription-box h3 {
margin-bottom: 10px;
}
.subscription-box form {
display: flex;
justify-content: center;
}
.subscription-box input[type="email"] {
padding: 10px;
border: none;
border-radius: 5px 0 0 5px;
}
.subscription-box button {
padding: 10px;
border: none;
background: #384d48;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
/* Responsive Styles */
@media (max-width: 768px) {
.card {
flex: 1 1 calc(45% - 20px); /* Two cards per row */
}
nav ul li {
margin: 0 5px; /* Reduced margin for smaller screens */
}
}
@media (max-width: 480px) {
.card {
flex: 1 1 100%; /* Single card per row */
}
nav ul {
flex-direction: column; /* Stack nav items vertically */
}
nav ul li {
margin: 5px 0; /* Margin for stacked items */
}
}Design Description
This design features a clean, modern layout suitable for a news website, emphasizing readability and user engagement. Here are the key elements:
1. Header
- The header has a dark background (
#384d48) with white text, creating a strong contrast that makes the site title stand out. - It is centrally aligned, providing a clear and welcoming introduction to the site.
2. Navigation Bar
- The navigation bar features a horizontal list of links with a background color of
#8B8149. - Links are styled with white text and change to a lighter color on hover, enhancing usability.
- The navigation is responsive, adjusting to different screen sizes, ensuring accessibility on mobile devices.
3. News Ticker
- A news ticker runs across the top of the content area, featuring breaking news items.
- It has a subtle background (
#ACAD94) and utilizes a scrolling animation to attract attention without being intrusive. - The ticker title is bold, and items are spaced apart, making it easy to read.
4. Content Section
- The main content area is structured with sections and cards, making information easy to digest.
- Each section is clearly labeled with a heading, maintaining a consistent color scheme of
#384d48for the text. - Cards are displayed in a flexbox layout, allowing for a responsive design that adapts to various screen sizes.
5. Cards
- Each card has a slightly transparent background with rounded corners and a subtle shadow, giving it a modern look.
- Cards contain multiple sections, allowing detailed information while keeping a clean aesthetic.
- The cards are designed to stack neatly on smaller screens, ensuring readability.
6. Footer
- The footer mirrors the header’s style with a background color of
rgba(172, 173, 148, 0.9), providing continuity. - It includes links for additional navigation and a subscription box for user engagement.
- The subscription box invites users to enter their email addresses, enhancing interactivity and potential audience growth.
7. Responsive Design
- The layout uses flexible units and media queries to ensure it looks good on all devices, from desktops to smartphones.
- Cards change their arrangement based on screen size, ensuring that content remains accessible and visually appealing.
Overall Impression
The design combines functionality with aesthetics, focusing on user experience. The color palette is cohesive, providing a professional look, while the layout promotes easy navigation and engagement with the content. This makes it an effective choice for a news-focused website.