-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
137 lines (124 loc) · 9.51 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wordsmith</title>
<script src="https://unpkg.com/htmlincludejs"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css">
</head>
<body class="h-full min-h-screen antialiased">
<include src="./header.html"></include>
<!-- Top Hero Post -->
<section class="bg-gradient-to-b from-white to-gray-50">
<div class="mx-auto lg:max-w-7xl sm:max-w-xl md:max-w-full py-10 sm:py-16 px-10">
<div class="bg-white shadow-sm border border-gray-100 rounded-lg cursor-pointer overflow-hidden w-full">
<div class="flex flex-col-reverse items-center md:flex-row">
<div class="flex flex-col items-start justify-center w-full h-full py-6 md:w-7/12">
<div class="flex flex-col items-start justify-center h-full space-y-3 transform md:py-0 py-5 px-8 md:px-10 lg:px-12 md:space-y-5">
<div class="bg-gray-900 flex items-center pl-2 pr-3 py-1.5 mb-3 leading-none rounded-full text-xs font-medium uppercase text-white inline-block">
<svg class="w-3.5 h-3.5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<span>Featured</span>
</div>
<h1 class="text-4xl font-bold leading-none lg:text-5xl xl:text-6xl"><a href="/a-workspace-that-sparks-creativity">A Workspace that Sparks Creativity</a></h1>
<p class="pt-5 text-sm font-medium">Featured Post · <span class="mx-1">April 23rd, 2021</span> · <a href="#_" class="mr-1 underline">Read More</a></p>
</div>
</div>
<div class="w-full md:w-5/12">
<a href="/a-workspace-that-sparks-creativity" class="block">
<img class="object-cover w-full h-full max-h-64 sm:max-h-96" src="https://cdn.devdojo.com/images/september2021/desksetup.jpeg">
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Grid Posts -->
<section class="bg-gray-50 pb-16">
<div class="px-10 pb-10 mx-auto lg:max-w-7xl sm:max-w-xl md:max-w-full sm:pb-16">
<div class="grid gap-x-8 gap-y-12 sm:gap-x-12 sm:gap-y-16 md:grid-cols-2 lg:grid-cols-3">
<div class="relative bg-white rounded-lg overflow-hidden border border-gray-100 shadow-sm">
<a href="#_" class="block overflow-hidden group">
<img src="https://cdn.devdojo.com/images/september2021/better-developer.jpeg" class="object-cover w-full h-56 transition-all duration-300 ease-out sm:h-64 group-hover:scale-110" alt="">
</a>
<div class="relative p-7">
<p class="uppercase font-semibold text-xs mb-2.5 text-purple-600">Sept. 5th 2021</p>
<a href="#" class="block mb-3 hover:underline">
<h2 class="text-xl font-bold leading-none text-black transition-colors duration-200">Becoming a Better Developer</h2>
</a>
<p class="mb-4 text-gray-700">Learn about these strategies and tips you can take advantage of to become a better developer.</p>
<a href="#_" class="font-medium underline">Read More</a>
</div>
</div>
<div class="relative bg-white rounded-lg overflow-hidden border border-gray-100 shadow-sm">
<a href="#_" class="block overflow-hidden group">
<img src="https://cdn.devdojo.com/images/september2021/travel-destinations.jpeg" class="object-cover w-full h-56 transition-all duration-300 ease-out sm:h-64 group-hover:scale-110" alt="">
</a>
<div class="relative p-7">
<p class="uppercase font-semibold text-xs mb-2.5 text-purple-600">Sept. 4th 2021</p>
<a href="#" class="block mb-3 hover:underline">
<h2 class="text-xl font-bold leading-none text-black transition-colors duration-200">Ultimate Travel Destinations</h2>
</a>
<p class="mb-4 text-gray-700">Check out this list of the best travel destinations that you'll definitely want to add to your bucket list.</p>
<a href="#_" class="font-medium underline">Read More</a>
</div>
</div>
<div class="relative bg-white rounded-lg overflow-hidden border border-gray-100 shadow-sm">
<a href="#_" class="block overflow-hidden group">
<img src="https://cdn.devdojo.com/images/september2021/inspire-greatness.jpeg" class="object-cover w-full h-56 transition-all duration-300 ease-out sm:h-64 group-hover:scale-110" alt="">
</a>
<div class="relative p-7">
<p class="uppercase font-semibold text-xs mb-2.5 text-purple-600">Sept. 1st 2021</p>
<a href="#" class="block mb-3 hover:underline">
<h2 class="text-xl font-bold leading-none text-black transition-colors duration-200">Inspire Greatness</h2>
</a>
<p class="mb-4 text-gray-700">Learn how inspiration and greatness grow exponentially as you continue to pursue the best version of yourself.</p>
<a href="#_" class="font-medium underline">Read More</a>
</div>
</div>
<div class="relative bg-white rounded-lg overflow-hidden border border-gray-100 shadow-sm">
<a href="#_" class="block overflow-hidden group">
<img src="https://cdn.devdojo.com/images/september2021/better-writer.jpeg" class="object-cover w-full h-56 transition-all duration-300 ease-out sm:h-64 group-hover:scale-110" alt="">
</a>
<div class="relative p-7">
<p class="uppercase font-semibold text-xs mb-2.5 text-purple-600">Aug. 28th 2021</p>
<a href="#" class="block mb-3 hover:underline">
<h2 class="text-xl font-bold leading-none text-black transition-colors duration-200">Becoming a Better Writer</h2>
</a>
<p class="mb-4 text-gray-700">Learn about these strategies and tips you can take advantage of to become a better developer.</p>
<a href="#_" class="font-medium underline">Read More</a>
</div>
</div>
<div class="relative bg-white rounded-lg overflow-hidden border border-gray-100 shadow-sm">
<a href="#_" class="block overflow-hidden group">
<img src="https://cdn.devdojo.com/images/september2021/productive.jpeg" class="object-cover w-full h-56 transition-all duration-300 ease-out sm:h-64 group-hover:scale-110" alt="">
</a>
<div class="relative p-7">
<p class="uppercase font-semibold text-xs mb-2.5 text-purple-600">Aug. 23rd 2021</p>
<a href="#" class="block mb-3 hover:underline">
<h2 class="text-xl font-bold leading-none text-black transition-colors duration-200">Best Tips for Productivity</h2>
</a>
<p class="mb-4 text-gray-700">Check out this list of the best travel destinations that you'll definitely want to add to your bucket list.</p>
<a href="#_" class="font-medium underline">Read More</a>
</div>
</div>
<div class="relative bg-white rounded-lg overflow-hidden border border-gray-100 shadow-sm">
<a href="#_" class="block overflow-hidden group">
<img src="https://cdn.devdojo.com/images/september2021/build-app.jpeg" class="object-cover w-full h-56 transition-all duration-300 ease-out sm:h-64 group-hover:scale-110" alt="">
</a>
<div class="relative p-7">
<p class="uppercase font-semibold text-xs mb-2.5 text-purple-600">Aug. 20th 2021</p>
<a href="#" class="block mb-3 hover:underline">
<h2 class="text-xl font-bold leading-none text-black transition-colors duration-200">Building an App that Sells</h2>
</a>
<p class="mb-4 text-gray-700">Learn how inspiration and greatness grow exponentially as you continue to pursue the best version of yourself.</p>
<a href="#_" class="font-medium underline">Read More</a>
</div>
</div>
</div>
</div>
</section>
<include src="footer.html"></include>
</body>
</html>