#### HTML and CSS Code for Blog Photography
Below is a simple HTML and CSS code for a blog photography website. The code includes interactive CSS and JS to explain the topics.
html
Blog Photography
Welcome to Blog Photography
Explore the World Through Our Lens
**Blog Photography** is an art form that captures the beauty of everyday life. Our blog showcases stunning images and insightful stories from around the globe.
Discover Our Gallery
Learn About Us
**Blog Photography** is not just a hobby; it's a passion. Our team of photographers is dedicated to capturing the essence of every moment and sharing it with the world.
Get in Touch
css
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f2f2f2;
padding: 10px 20px;
}
header h1 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
section {
padding: 20px;
}
.photo-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.photo {
flex: 1 0 30%; /* Adjust as needed */
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
In the HTML code, we have included sections for the home, gallery, about, and contact. The CSS file provides styling for the header, navigation, sections, photo grid, and footer.
This code creates a simple and visually appealing blog photography website using HTML and CSS. It can be further enhanced with JavaScript to add interactive features such as image sliders or lightbox galleries.
For more advanced features, such as responsive design and dynamic content loading, additional knowledge of JavaScript and frameworks like React, Angular, or Vue.js may be required [[1]](https://www.knowledgehut.com/blog/web-development/html-projects).
