ပြည်မြန်မာ

Web Programming (Html & Css)

Html Code

<!DOCTYPE html>

<head>

<title>Myanmar</title>

</head>

<body>

<nav>

<h1>Welcome to Myanmar</h1>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Gallery</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</nav>

</header>

<h2>Welcome to Nature Retreat</h2>

<p>Escape to the serenity of nature and rejuvenate your soul.</p>

</div>

</section>

<h2>About Us</h2>

<p>Computer Porgramming Langugage Class, Aung Lan Gone village, Letpandon Township in Bago division.</p>

</div>

</section>

<h2>Gallery</h2>

</div>

</section>

</div>

</footer>

</body>

</html>

css code

/* styles.css */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

h1{text-align: center;}

header {

background-color: #1abc9c;

padding: 20px 0;

color: yellow;

}

header nav ul {

list-style-type: none;

margin: 0;

padding: 0;

}

header nav ul li {

display: inline;

margin-right: 20px;

}

header nav ul li a {

color: white;

text-decoration: none;

}

.hero {

background-image: url('nature.jpg');

background-size: cover;

color: white;

text-align: center;

padding: 100px 0;

}

.hero h2 {

font-size: 3em;

margin-bottom: 20px;

}

.about {

background-color: #f5f5f5;

padding: 100px 0;

text-align: center;

}

.gallery {

text-align: center;

padding: 100px 0;

}

.image-gallery {

display: flex;

justify-content: center;

flex-wrap: wrap;

}

.image-gallery img {

width: 300px;

height: 200px;

margin: 10px;

}

footer {

background-color: #34495e;

color: white;

text-align: center;

padding: 20px 0;

}