-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblogs.html
167 lines (163 loc) · 11.5 KB
/
blogs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blogs - Books Rental</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
colors: {
'burgundy': '#800020',
'beige': '#F5F5DC',
'charcoal': '#36454F',
'gold': '#FFD700',
}
}
}
}
</script>
<style>
body {
background-color: #F5F5DC;
color: #36454F;
}
.bg-brand {
background-color: #800020;
}
.text-brand {
color: #800020;
}
.hover\:bg-brand-dark:hover {
background-color: #600010;
}
.hover\:text-brand:hover {
color: #800020;
}
.focus\:ring-brand:focus {
--tw-ring-color: #800020;
}
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>
</head>
<body class="font-sans">
<header class="bg-beige shadow-md">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between">
<div class="logo text-2xl font-bold">
<h1>Books<span class="text-burgundy">RENTAL</span></h1>
</div>
<div class="search-bar flex">
<input type="text" placeholder="Search..." class="px-4 py-2 border border-charcoal rounded-l-md focus:outline-none focus:ring-2 focus:ring-burgundy">
<button class="bg-burgundy text-beige px-4 py-2 rounded-r-md hover:bg-brand-dark transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<ul class="nav-links flex space-x-6">
<li><a href="#" class="text-charcoal hover:text-burgundy transition duration-300">Genres</a></li>
<li><a href="clubs.html" class="text-charcoal hover:text-burgundy transition duration-300">Clubs</a></li>
<li><a href="login.html" class="text-charcoal hover:text-burgundy transition duration-300">Login</a></li>
<li><a href="blogs.html" class="text-burgundy font-semibold">Blogs</a></li>
</ul>
<div class="app-buttons">
<img src="google-play.png" alt="Google Play" class="h-8">
</div>
</nav>
</header>
<main class="container mx-auto px-4 py-8">
<section class="event-highlights mb-12">
<h2 class="text-3xl font-bold mb-6 text-burgundy">Event Highlights</h2>
<div class="event-gallery grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="event-item bg-beige rounded-lg shadow-md overflow-hidden">
<img src="/api/placeholder/400/200" alt="Event 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 text-burgundy">Event Title 1</h3>
<p class="text-charcoal mb-2">Date: September 30, 2024</p>
<p class="text-charcoal mb-4">Description of the event and highlights go here.</p>
<a href="event_details1.html" class="bg-burgundy text-beige px-4 py-2 rounded hover:bg-brand-dark transition duration-300">Read More</a>
</div>
</div>
<!-- Add more event items here -->
</div>
</section>
<section class="student-blogs mb-12">
<h2 class="text-3xl font-bold mb-6 text-burgundy">Student Blogs</h2>
<div class="blog-list grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="blog-item bg-beige rounded-lg shadow-md p-6">
<h3 class="text-xl font-semibold mb-2 text-burgundy">Blog Title 1</h3>
<p class="text-charcoal mb-2">By Student Name | Date: September 25, 2024</p>
<p class="text-charcoal mb-4">Excerpt of the blog post goes here. This is a short summary to entice readers to read more.</p>
<a href="blog_post1.html" class="text-burgundy hover:underline">Read More</a>
</div>
<!-- Add more blog items here -->
</div>
</section>
<section class="blog-submission bg-beige rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-6 text-burgundy">Submit Your Blog Post</h2>
<form id="blogForm" class="space-y-4">
<div>
<label for="blogTitle" class="block text-charcoal mb-2">Blog Title</label>
<input type="text" id="blogTitle" placeholder="Enter your blog title" required class="w-full px-4 py-2 border border-charcoal rounded-md focus:outline-none focus:ring-2 focus:ring-burgundy">
</div>
<div>
<label for="blogContent" class="block text-charcoal mb-2">Blog Content</label>
<textarea id="blogContent" placeholder="Write your blog content here" required class="w-full px-4 py-2 border border-charcoal rounded-md focus:outline-none focus:ring-2 focus:ring-burgundy" rows="6"></textarea>
</div>
<div>
<label for="blogAuthor" class="block text-charcoal mb-2">Author Name</label>
<input type="text" id="blogAuthor" placeholder="Your name" required class="w-full px-4 py-2 border border-charcoal rounded-md focus:outline-none focus:ring-2 focus:ring-burgundy">
</div>
<div>
<label for="files" class="block text-charcoal mb-2">Attach Files (Optional)</label>
<input type="file" id="files" name="files[]" multiple accept=".png, .jpeg, .jpg, .doc, .docx, .pdf" class="w-full px-4 py-2 border border-charcoal rounded-md focus:outline-none focus:ring-2 focus:ring-burgundy">
</div>
<button type="submit" class="bg-burgundy text-beige px-6 py-2 rounded-md hover:bg-brand-dark transition duration-300">Submit Blog</button>
</form>
</section>
</main>
<footer class="bg-charcoal text-beige py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4 text-gold">About Us</h3>
<p>Books Rental is your go-to platform for renting textbooks and exploring academic literature.</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-gold">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-gold transition duration-300">Home</a></li>
<li><a href="#" class="hover:text-gold transition duration-300">Genres</a></li>
<li><a href="#" class="hover:text-gold transition duration-300">Clubs</a></li>
<li><a href="#" class="hover:text-gold transition duration-300">Blogs</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-gold">Connect With Us</h3>
<div class="flex space-x-4">
<a href="#" class="hover:text-gold transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /></svg>
</a>
<a href="#" class="hover:text-gold transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /></svg>
</a>
<a href="#" class="hover:text-gold transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348" clip-rule="evenodd" /></svg>
<a href="#" class="hover:text-gold transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /></svg>
</a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>