website
File: index.html
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Eng. Abdala - Homepage</title> <link rel="stylesheet" href="styles.css">
<header class="hero">Ku Soo Dhawoow Eng. Abdala
Waxaan kuu soo bandhigayaa xirfadahayga iyo adeegyada aan bixiyo.
Waxbadan Ka BaroKu Saabsan
Waxaan ahay injineer xirfad leh oo diiradda saara horumarinta software iyo naqshadeynta webka. Waxaan leeyahay waayo-aragnimo ballaaran oo la xiriirta barnaamijyada casriga ah.
Adeegyada Aan Bixiyo
Horumarinta Webka
Waxaan sameeyaa website-yada shaqsiyeed iyo kuwa ganacsi ee tayo sare leh.
Barnaamijyada Software
Waxaan naqshadeeyaa oo horumariyaa software dabooli kara baahiyahaaga.
La-talinta Teknolojiyadda
Waxaan ku siin karaa talooyin iyo xalal la xiriira tiknolojiyadda.
Nala Soo Xiriir
<form action="mailto:engabdala@example.com" method="post"> <label for="name">Magacaaga:</label> <input type="text" id="name" name="name" required> <label for="email">Emailkaaga:</label> <input type="email" id="email" name="email" required> <label for="message">Fariintaada:</label> <textarea id="message" name="message" required=""></textarea> <button type="submit">Dir Fariinta</button> </form>© 2025 Eng. Abdala. Xuquuqda waa dhowrsan tahay.
</footer>
---
File: styles.css
/* Qaabeynta Asalka */ body {
font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; background-color: #f4f4f4; color: #333;
}
/* Header-ka */ .hero {
background: #007BFF; color: white; text-align: center; padding: 50px 20px;
}
.hero h1 {
margin: 0; font-size: 2.5em;
}
.hero p {
margin: 10px 0 20px; font-size: 1.2em;
}
.hero .btn {
background: white; color: #007BFF; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold;
}
.hero .btn:hover {
background: #0056b3; color: white;
}
/* Navigation */ nav ul {
background: #333; padding: 10px; list-style: none; display: flex; justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white; text-decoration: none;
}
/* Sections */ section {
padding: 20px; margin: 20px auto; max-width: 800px; background: white; border-radius: 5px;
}
/* Adeegyada */ .services {
display: flex; justify-content: space-between; gap: 20px;
}
.service {
background: #f9f9f9; padding: 20px; border: 1px solid #ddd; border-radius: 5px; text-align: center; flex: 1;
}
/* Footer */ footer {
text-align: center; padding: 10px; background: #333; color: white; margin-top: 20px;
}
---
All Replies (1)
/* Qaabeynta Asalka */ body {
font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; background-color: #f4f4f4; color: #333;
}
/* Header-ka */ .hero {
background: #007BFF; color: white; text-align: center; padding: 50px 20px;
}
.hero h1 {
margin: 0; font-size: 2.5em;
}
.hero p {
margin: 10px 0 20px; font-size: 1.2em;
}
.hero .btn {
background: white; color: #007BFF; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold;
}
.hero .btn:hover {
background: #0056b3; color: white;
}
/* Navigation */ nav ul {
background: #333; padding: 10px; list-style: none; display: flex; justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white; text-decoration: none;
}
/* Sections */ section {
padding: 20px; margin: 20px auto; max-width: 800px; background: white; border-radius: 5px;
}
/* Adeegyada */ .services {
display: flex; justify-content: space-between; gap: 20px;
}
.service {
background: #f9f9f9; padding: 20px; border: 1px solid #ddd; border-radius: 5px; text-align: center; flex: 1;
}
/* Footer */ footer {
text-align: center; padding: 10px; background: #333; color: white; margin-top: 20px;
}