Web App - Template 1 News Site

Markup
Basic template for building news website. Includes layout, styling, and placeholder content. Customizable structure for headlines, articles, and media integration.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>The Batch</title>
7    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8</head>
9<body class="bg-white">
10    <header class="bg-white border-b">
11        <div class="container mx-auto px-4 py-2 flex justify-between items-center">
12            <div class="flex items-center">
13                <img src="placeholder.jpg" alt="DeepLearning.AI" class="h-8 mr-2">
14                <h1 class="text-2xl font-bold text-gray-800">THE BATCH</h1>
15            </div>
16            <nav class="flex space-x-4 text-sm">
17                <a href="#" class="text-gray-600">Explore Courses</a>
18                <a href="#" class="text-gray-600">AI Newsletter</a>
19                <a href="#" class="text-gray-600">Community</a>
20                <a href="#" class="text-gray-600">Resources</a>
21                <a href="#" class="text-gray-600">Company</a>
22            </nav>
23            <button class="bg-red-500 text-white px-4 py-2 rounded">Start Learning</button>
24        </div>
25    </header>
26
27    <nav class="container mx-auto px-4 py-2 text-sm">
28        <a href="#" class="mr-4 text-gray-600">Weekly Issues</a>
29        <a href="#" class="mr-4 text-gray-600">Andrew's Letters</a>
30        <a href="#" class="mr-4 text-gray-600">Data Points</a>
31        <a href="#" class="mr-4 text-gray-600">ML Research</a>
32        <a href="#" class="mr-4 text-gray-600">Business</a>
33        <a href="#" class="mr-4 text-gray-600">Science</a>
34        <a href="#" class="mr-4 text-gray-600">AI & Society</a>
35        <a href="#" class="mr-4 text-gray-600">Culture</a>
36        <a href="#" class="mr-4 text-gray-600">Hardware</a>
37        <a href="#" class="mr-4 text-gray-600">AI Careers</a>
38        <a href="#" class="text-gray-600">About</a>
39    </nav>
40
41    <main class="container mx-auto px-4 py-8 flex">
42        <div class="w-2/3 pr-8">
43            <article class="bg-white rounded-lg shadow mb-8 p-6">
44                <p class="text-gray-600 mb-2">Aug 14, 2024</p>
45                <h2 class="text-2xl font-bold mb-2">LLM Price War, Black Forest's Open Image Generator, The High Cost of AI Leadership, Machine Translation Goes Agentic</h2>
46                <p class="text-gray-700 mb-4">The Batch AI News and Insights | When entrepreneurs build a startup, it is often their speed and momentum that gives them a shot at competing with the tech behemoths.</p>
47                <div class="bg-gray-200 h-40"></div> <!-- Placeholder for image -->
48            </article>
49
50            <article class="bg-white rounded-lg shadow mb-8 p-6">
51                <p class="text-gray-600 mb-2">Aug 7, 2024</p>
52                <h2 class="text-2xl font-bold mb-2">Google Gets Character.AI Co-Founders, Ukraine's Aquatic Drones, AI Recruiting Tools Fuel Arms Race, ASCII Art Defeats LLM Guardrails</h2>
53                <p class="text-gray-700 mb-4">The Batch AI News & Insights: I'm delighted to announce AI Python for Beginners, a sequence of free short courses that teach anyone to code, regardless of background.</p>
54                <div class="bg-gray-200 h-40"></div> <!-- Placeholder for image -->
55            </article>
56
57            <article class="bg-white rounded-lg shadow mb-8 p-6">
58                <p class="text-gray-600 mb-2">Jul 31, 2024</p>
59                <h2 class="text-2xl font-bold mb-2">Llama 3.1 is State-of-the-Art and Open, Web Data Goes Dark, OpenAI Takes on Google and Bing, Synthetic Data Improves</h2>
60                <div class="bg-gray-200 h-40"></div> <!-- Placeholder for image -->
61            </article>
62        </div>
63
64        <div class="w-1/3">
65            <div class="bg-white rounded-lg shadow p-6 mb-8">
66                <p class="text-gray-600 mb-2">Jul 24, 2024</p>
67                <h3 class="text-lg font-bold mb-2">Agentic Design Patterns Part 1: Four AI agent strategies that improve GPT-4 and GPT-3.5 performance</h3>
68                <p class="text-gray-600">13 min read</p>
69            </div>
70
71            <div class="bg-white rounded-lg shadow p-6">
72                <h3 class="text-lg font-bold mb-4">Subscribe to The Batch</h3>
73                <p class="mb-4">Stay updated with weekly AI News and Insights delivered to your inbox</p>
74                <form>
75                    <input type="email" placeholder="Email" class="w-full p-2 mb-4 border rounded" required>
76                    <label class="flex items-center mb-4">
77                        <input type="checkbox" class="mr-2">
78                        <span class="text-sm">Keep me updated on the latest news, events, and courses</span>
79                    </label>
80                    <button type="submit" class="bg-red-500 text-white px-4 py-2 rounded w-full">Submit</button>
81                </form>
82            </div>
83        </div>
84    </main>
85</body>
86</html>
Created on 8/28/2024