1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ 8+ <!-- Tailwind CDN -->
9+ < script src ="https://cdn.tailwindcss.com "> </ script >
10+ < title > JavaScript30 - Susmita Dey</ title >
11+ </ head >
12+ < body >
13+ <!-- Navbar -->
14+ < header class ="text-gray-600 body-font bg-purple-900 text-white ">
15+ < div class ="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center ">
16+ < a class ="flex title-font font-medium items-center mb-4 md:mb-0 ">
17+ < svg xmlns ="http://www.w3.org/2000/svg " fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " class ="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full " viewBox ="0 0 24 24 ">
18+ < path d ="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5 "> </ path >
19+ </ svg >
20+ < span class ="ml-3 text-xl "> JavaScript30</ span >
21+ </ a >
22+ < nav class ="md:ml-auto flex flex-wrap items-center text-base justify-center ">
23+ < a href ="index.html " class ="mr-5 hover:text-yellow-300 "> Home</ a >
24+ < a href ="#projects " class ="mr-5 hover:text-yellow-300 "> Projects</ a >
25+ < a href ="https://github.com/Susmita-Dey/JavaScript30 " target ="_blank " class ="mr-5 hover:text-yellow-300 "> GitHub</ a >
26+ </ nav >
27+ < a href ="https://bio.link/susmitadey " target ="_blank " rel ="noopener noreferrer ">
28+ < button class ="inline-flex items-center bg-yellow-300 border-0 py-1 px-3 focus:outline-none hover:bg-yellow-200 text-blue-500 rounded text-base mt-4 md:mt-0 "> Connect With Me
29+ < svg fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " class ="w-4 h-4 ml-1 " viewBox ="0 0 24 24 ">
30+ < path d ="M5 12h14M12 5l7 7-7 7 "> </ path >
31+ </ svg >
32+ </ button >
33+ </ a >
34+ </ div >
35+ </ header >
36+ 37+ <!-- Hero Section -->
38+ < section class ="text-gray-600 body-font bg-yellow-300 ">
39+ < div class ="container mx-auto flex px-5 py-24 items-center justify-center flex-col ">
40+ < a class ="lg:w-2/6 md:w-3/6 w-5/6 mb-10 " href ="https://javascript30.com/ " target ="_blank " rel ="noopener noreferrer ">
41+ < img class ="object-cover object-center rounded " alt ="hero " src ="assets/javascript30.png ">
42+ </ a >
43+ < div class ="text-center lg:w-2/3 w-full ">
44+ < h1 class ="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 "> Collections of 30 days of JavaScript Projects.</ h1 >
45+ < p class ="mb-8 leading-relaxed "> #JavaScript30</ p >
46+ < div class ="flex justify-center ">
47+ < button class ="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg "> GitHub</ button >
48+ < a href ="https://github.com/Susmita-Dey/JavaScript30 " target ="_blank " rel ="noopener noreferrer ">
49+ < button class ="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg "> Share it!</ button >
50+ </ a >
51+ </ div >
52+ </ div >
53+ </ div >
54+ </ section >
55+ 56+ <!-- Section -->
57+ < section class ="text-gray-600 body-font " id ="projects ">
58+ < div class ="container px-5 py-24 mx-auto ">
59+ < div class ="flex flex-wrap -m-4 ">
60+ < div class ="p-4 md:w-1/3 ">
61+ < div class ="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden ">
62+ < img class ="lg:h-48 md:h-36 w-full object-cover object-center " src ="https://dummyimage.com/720x400 " alt ="blog ">
63+ < div class ="p-6 ">
64+ < h1 class ="title-font text-lg font-medium text-gray-900 mb-3 "> The Catalyzer</ h1 >
65+ < p class ="leading-relaxed mb-3 "> Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</ p >
66+ < div class ="flex items-center flex-wrap ">
67+ < a class ="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0 "> Learn More
68+ < svg class ="w-4 h-4 ml-2 " viewBox ="0 0 24 24 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round ">
69+ < path d ="M5 12h14 "> </ path >
70+ < path d ="M12 5l7 7-7 7 "> </ path >
71+ </ svg >
72+ </ a >
73+ < span class ="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200 ">
74+ < svg class ="w-4 h-4 mr-1 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round " viewBox ="0 0 24 24 ">
75+ < path d ="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z "> </ path >
76+ < circle cx ="12 " cy ="12 " r ="3 "> </ circle >
77+ </ svg > 1.2K
78+ </ span >
79+ < span class ="text-gray-400 inline-flex items-center leading-none text-sm ">
80+ < svg class ="w-4 h-4 mr-1 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round " viewBox ="0 0 24 24 ">
81+ < path d ="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z "> </ path >
82+ </ svg > 6
83+ </ span >
84+ </ div >
85+ </ div >
86+ </ div >
87+ </ div >
88+ < div class ="p-4 md:w-1/3 ">
89+ < div class ="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden ">
90+ < img class ="lg:h-48 md:h-36 w-full object-cover object-center " src ="https://dummyimage.com/721x401 " alt ="blog ">
91+ < div class ="p-6 ">
92+ < h1 class ="title-font text-lg font-medium text-gray-900 mb-3 "> The 400 Blows</ h1 >
93+ < p class ="leading-relaxed mb-3 "> Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</ p >
94+ < div class ="flex items-center flex-wrap ">
95+ < a class ="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0 "> Learn More
96+ < svg class ="w-4 h-4 ml-2 " viewBox ="0 0 24 24 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round ">
97+ < path d ="M5 12h14 "> </ path >
98+ < path d ="M12 5l7 7-7 7 "> </ path >
99+ </ svg >
100+ </ a >
101+ < span class ="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200 ">
102+ < svg class ="w-4 h-4 mr-1 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round " viewBox ="0 0 24 24 ">
103+ < path d ="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z "> </ path >
104+ < circle cx ="12 " cy ="12 " r ="3 "> </ circle >
105+ </ svg > 1.2K
106+ </ span >
107+ < span class ="text-gray-400 inline-flex items-center leading-none text-sm ">
108+ < svg class ="w-4 h-4 mr-1 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round " viewBox ="0 0 24 24 ">
109+ < path d ="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z "> </ path >
110+ </ svg > 6
111+ </ span >
112+ </ div >
113+ </ div >
114+ </ div >
115+ </ div >
116+ < div class ="p-4 md:w-1/3 ">
117+ < div class ="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden ">
118+ < img class ="lg:h-48 md:h-36 w-full object-cover object-center " src ="https://dummyimage.com/722x402 " alt ="blog ">
119+ < div class ="p-6 ">
120+ < h1 class ="title-font text-lg font-medium text-gray-900 mb-3 "> Shooting Stars</ h1 >
121+ < p class ="leading-relaxed mb-3 "> Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</ p >
122+ < div class ="flex items-center flex-wrap ">
123+ < a class ="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0 "> Learn More
124+ < svg class ="w-4 h-4 ml-2 " viewBox ="0 0 24 24 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round ">
125+ < path d ="M5 12h14 "> </ path >
126+ < path d ="M12 5l7 7-7 7 "> </ path >
127+ </ svg >
128+ </ a >
129+ < span class ="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200 ">
130+ < svg class ="w-4 h-4 mr-1 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round " viewBox ="0 0 24 24 ">
131+ < path d ="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z "> </ path >
132+ < circle cx ="12 " cy ="12 " r ="3 "> </ circle >
133+ </ svg > 1.2K
134+ </ span >
135+ < span class ="text-gray-400 inline-flex items-center leading-none text-sm ">
136+ < svg class ="w-4 h-4 mr-1 " stroke ="currentColor " stroke-width ="2 " fill ="none " stroke-linecap ="round " stroke-linejoin ="round " viewBox ="0 0 24 24 ">
137+ < path d ="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z "> </ path >
138+ </ svg > 6
139+ </ span >
140+ </ div >
141+ </ div >
142+ </ div >
143+ </ div >
144+ </ div >
145+ </ div >
146+ </ section >
147+ 148+ <!-- Footer -->
149+ < footer class ="text-white body-font bg-purple-900 ">
150+ < div class ="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col ">
151+ < a class ="flex title-font font-medium items-center md:justify-start justify-center ">
152+ < svg xmlns ="http://www.w3.org/2000/svg " fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " class ="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full " viewBox ="0 0 24 24 ">
153+ < path d ="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5 "> </ path >
154+ </ svg >
155+ < span class ="ml-3 text-xl "> JavaScript30</ span >
156+ </ a >
157+ < p class ="text-sm sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4 "> © 2020 Tailblocks —
158+ < a href ="https://twitter.com/its_SusmitaDey " class ="ml-1 " rel ="noopener noreferrer " target ="_blank "> @Susmita Dey</ a >
159+ </ p >
160+ < span class ="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start ">
161+ < a class ="text-gray-500 ">
162+ < svg fill ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " class ="w-5 h-5 " viewBox ="0 0 24 24 ">
163+ < path d ="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z "> </ path >
164+ </ svg >
165+ </ a >
166+ < a class ="ml-3 text-gray-500 ">
167+ < svg fill ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " class ="w-5 h-5 " viewBox ="0 0 24 24 ">
168+ < path d ="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z "> </ path >
169+ </ svg >
170+ </ a >
171+ < a class ="ml-3 text-gray-500 ">
172+ < svg fill ="none " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " class ="w-5 h-5 " viewBox ="0 0 24 24 ">
173+ < rect width ="20 " height ="20 " x ="2 " y ="2 " rx ="5 " ry ="5 "> </ rect >
174+ < path d ="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01 "> </ path >
175+ </ svg >
176+ </ a >
177+ < a class ="ml-3 text-gray-500 ">
178+ < svg fill ="currentColor " stroke ="currentColor " stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="0 " class ="w-5 h-5 " viewBox ="0 0 24 24 ">
179+ < path stroke ="none " d ="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z "> </ path >
180+ < circle cx ="4 " cy ="4 " r ="2 " stroke ="none "> </ circle >
181+ </ svg >
182+ </ a >
183+ </ span >
184+ </ div >
185+ </ footer >
186+ </ body >
187+ </ html >
0 commit comments