Join the Mozilla’s Test Days event from 9–15 Jan to test the new Firefox address bar on Firefox Beta 135 and get a chance to win Mozilla swag vouchers! 🎁

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

website

more options

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 Baro
</header> <nav> </nav>

Ku 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>
<footer>

© 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;

}


---

File: index.html <!DOCTYPE html> <html lang="so"> <head> <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"> </head> <body> <!-- Header-ka --> <header class="hero"> <div class="container"> <h1>Ku Soo Dhawoow Eng. Abdala</h1> <p>Waxaan kuu soo bandhigayaa xirfadahayga iyo adeegyada aan bixiyo.</p> <a href="#about" class="btn">Waxbadan Ka Baro</a> </div> </header> <!-- Navigation Menu --> <nav> <ul> <li><a href="#about">Ku Saabsan</a></li> <li><a href="#services">Adeegyada</a></li> <li><a href="#contact">Nala Soo Xiriir</a></li> </ul> </nav> <!-- Ku Saabsan Qaybta --> <section id="about"> <h2>Ku Saabsan</h2> <p>Waxaan ahay injineer xirfad leh oo diiradda saara horumarinta software iyo naqshadeynta webka. Waxaan leeyahay waayo-aragnimo ballaaran oo la xiriirta barnaamijyada casriga ah.</p> </section> <!-- Adeegyada Qaybta --> <section id="services"> <h2>Adeegyada Aan Bixiyo</h2> <div class="services"> <div class="service"> <h3>Horumarinta Webka</h3> <p>Waxaan sameeyaa website-yada shaqsiyeed iyo kuwa ganacsi ee tayo sare leh.</p> </div> <div class="service"> <h3>Barnaamijyada Software</h3> <p>Waxaan naqshadeeyaa oo horumariyaa software dabooli kara baahiyahaaga.</p> </div> <div class="service"> <h3>La-talinta Teknolojiyadda</h3> <p>Waxaan ku siin karaa talooyin iyo xalal la xiriira tiknolojiyadda.</p> </div> </div> </section> <!-- Nala Soo Xiriir --> <section id="contact"> <h2>Nala Soo Xiriir</h2> <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> </section> <!-- Footer --> <footer> <p>© 2025 Eng. Abdala. Xuquuqda waa dhowrsan tahay.</p> </footer> </body> </html> --- 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)

more options

/* 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;

}

Helpful?

Buza umbuzo

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.