HTML, CSS
here's a basic HTML and CSS code structure for the website design I described:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StudyHub</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1>StudyHub</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Study Resources</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<section id="banner">
<!-- Banner image goes here -->
</section>
<section id="welcome">
<div class="container">
<h2>Welcome to StudyHub</h2>
<p>Explore our study materials and join our community of learners!</p>
</div>
</section>
<section id="study-resources">
<div class="container">
<h2>Explore Our Study Materials</h2>
<!-- Thumbnails for study resources -->
</div>
</section>
<section id="blog">
<div class="container">
<h2>Latest Articles</h2>
<!-- Blog post excerpts -->
</div>
</section>
<footer>
<div class="container">
<div class="contact-info">
<p>Email: example@email.com</p>
<p>Phone: 123-456-7890</p>
<p>Address: 123 Street, City, Country</p>
</div>
<div class="social-media">
<a href="#"><img src="facebook-icon.png" alt="Facebook"></a>
<a href="#"><img src="twitter-icon.png" alt="Twitter"></a>
<a href="#"><img src="instagram-icon.png" alt="Instagram"></a>
</div>
</div>
</footer>
</body>
</html>
```
```css
/* styles.css */
/* Reset default browser styles */
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #007bff;
color: #fff;
padding: 10px 0;
}
header h1 {
font-size: 24px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
padding: 40px 0;
}
#banner {
/* Add background image properties here */
}
#welcome h2 {
font-size: 32px;
}
#study-resources {
border-top: 2px solid #28a745;
border-bottom: 2px solid #28a745;
}
#study-resources h2 {
color: #28a745;
}
#blog h2 {
color: #007bff;
}
footer {
background-color: #343a40;
color: #fff;
padding: 20px 0;
}
.contact-info p {
margin-bottom: 10px;
}
.social-media a {
margin-right: 10px;
}
.social-media img {
width: 30px;
height: 30px;
}
```
Replace `facebook-icon.png`, `twitter-icon.png`, and `instagram-icon.png` with the actual images you want to use for your social media icons. You can adjust the styles and content according to your specific needs and preferences.
No comments:
Post a Comment