-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (109 loc) · 8.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
},
screens: {
}
}
}
</script>
<title>Just a landing page</title>
</head>
<body class="bg-gray-100">
<header class="bg-indigo-600 px-4 py-3 border-2 border-b-pink-600">
<div class="max-w-4xl my-0 mx-auto">
<nav class="flex justify-between items-center ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 32" class="h-8 fill-current text-pink-500"><path d="M16.2 12.8h6.4c.9 0 1.7.7 1.7 1.7 0 .9-.7 1.7-1.7 1.7h-6.4c-.9 0-1.7-.7-1.7-1.7s.8-1.7 1.7-1.7zm-.2 3.9h3c.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4h-3c-.8 0-1.4-.6-1.4-1.4-.1-.7.6-1.4 1.4-1.4zm-3.7 3.5h6.4c.9 0 1.7.7 1.7 1.7 0 .9-.7 1.7-1.7 1.7h-6.4c-.9 0-1.7-.7-1.7-1.7.1-.9.8-1.7 1.7-1.7zm-4.4 0c1 0 1.7.7 1.7 1.7 0 .9-.7 1.7-1.7 1.7-.9 0-1.7-.7-1.7-1.7 0-.9.8-1.7 1.7-1.7zm19.8.6c.3 2.1 2.4 3 4.8 3 2.7 0 4.6-1.2 4.6-3.4 0-1.5-.9-2.6-2.8-3.1l-2.4-.5c-.6-.1-.8-.4-.8-.7 0-.4.3-.8 1.2-.8 1 0 1.6.6 1.7 1.2l3-.6c-.5-1.8-2.1-2.9-4.7-2.9s-4.4 1.4-4.4 3.4c0 1.6 1.1 2.6 3 3l2.1.4c.7.1 1 .4 1 .7 0 .4-.5.8-1.3.8-.9 0-1.7-.3-1.8-1.2l-3.2.7zm15.1.1c-1.5 0-2.4-1.1-2.4-2.5 0-1.5 1-2.5 2.4-2.5 1 0 1.9.6 2.1 1.8l3-.7c-.5-2.5-2.6-4-5.1-4-3 0-5.5 2.2-5.5 5.4s2.5 5.4 5.5 5.4c2.5 0 4.7-1.6 5.2-4l-3-.6c-.3 1.2-1.2 1.7-2.2 1.7zm12.4-7.8c-1.7 0-2.8.9-3.5 2.1v-1.9h-3.2v10.2h3.2v-3.2c0-2.6 1.2-3.8 3.5-3.8h.6l.1-3.2c-.2-.1-.4-.2-.7-.2zm3-4.6c-1.1 0-1.9.8-1.9 1.8s.8 1.8 1.9 1.8c1.1 0 1.9-.8 1.9-1.8s-.8-1.8-1.9-1.8zm1.7 14.9V13.3h-3.2v10.2h3.2v-.1zM73.7 13c-1.6 0-2.8.7-3.6 1.7-.7-1.1-1.9-1.7-3.3-1.7-1.3 0-2.3.5-3 1.2v-.9h-3.2v10.2h3.2v-5c0-1.7.8-2.6 1.9-2.6 1 0 1.7.7 1.7 1.9v5.7h3.2v-5c0-1.7.8-2.6 2-2.6 1 0 1.7.7 1.7 1.9v5.7h3.2v-6.4c.1-2.5-1.6-4.1-3.8-4.1zm10.8 0c-1.3 0-2.4.4-3.2 1.1V8.9h-3.2v14.6h3.2v-.8c.8.7 1.8 1.1 3.2 1.1 2.7 0 5-2.2 5-5.4-.1-3.2-2.3-5.4-5-5.4zm-.7 8c-1.3 0-2.5-1.1-2.5-2.6 0-1.6 1.2-2.6 2.5-2.6 1.4 0 2.4 1.1 2.4 2.6s-1 2.6-2.4 2.6zm17.4-7.7H98v.8c-.8-.7-1.8-1.1-3.2-1.1-2.7 0-5 2.2-5 5.4s2.3 5.4 5 5.4c1.3 0 2.4-.4 3.2-1.1v.8h3.2V13.3zM95.5 21c-1.4 0-2.4-1.1-2.4-2.6 0-1.6 1-2.6 2.4-2.6 1.3 0 2.5 1.1 2.5 2.6S96.8 21 95.5 21z"/></svg>
<svg viewBox="0 0 24 24" class=" h-8 w-8 sm:hidden fill-current text-white hover:text-gray-500 cursor-pointer"><path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/></svg>
</nav>
<div class="my-4">
<h1 class="text-white text-2xl ">Want to learn Tailwind <span class="uppercase">css</span>?</h1>
<p class="text-white text-base mt-3">
Tailwind is the fastest growing utility-first CSS framework. Let's learn it step by step.
</p>
<div class="relative mt-4 flex justify-between">
<button class="uppercase text-sm font-medium text-white bg-pink-500 px-4 rounded-3xl py-2">enroll now</button>
<div class="absolute right-0 bg-white rounded-full flex justify-center items-center p-5 border-4 border-pink-500 mt-2">
<img class="w-16 h-16" src="images/tailwind-logo.png" />
</div>
</div>
</div>
</div>
</header>
<main class="mx-4 my-16">
<div class="max-w-4xl my-0 mx-auto">
<div class="flex-col justify-start">
<h2 class="pb-2 border-b-2 border-b-indigo-300 text-2xl font-bold text-indigo-800">How It Works</h2>
<p class="mt-2 text-gray-600">
Tailwind is designed for rapid development of modern applications. At its core, it is a robust mobile-first design system built with developer experience in mind. After using Tailwind CSS, you will find it difficult to go back to use anything else. Learn all about it in this all-inclusive course.
</p>
</div>
</div>
<div class="max-w-4xl mt-10 my-0 mx-auto">
<h2 class="capitalize pb-2 border-b-2 border-b-indigo-300 text-2xl font-bold text-indigo-800">advantages</h2>
<div class="grid md:grid-cols-3 mt-4 gap-4">
<div class="grid grid-cols-1 place-items-center gap-1 p-10 w-full bg-white rounded-lg">
<div class="bg-gray-300 p-3 rounded-full text-indigo-900">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-16 w-16 fill-current"><path d="M18.9 19.7l-6.9 2-6.9-2L3.7 3h16.7c-.5 5.6-1 11.1-1.5 16.7zM19.4 4H4.8l1.3 14.9 5.9 1.7 5.9-1.7L19.4 4zM8.1 13.8h2V15l2 .7 2-.7.1-2.2H9.9l-.1-2h4.5l.1-2H7.7l-.1-2h9l-.2 3.9-.4 5.8-3.9 1.3-3.9-1.3-.1-2.7z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
</div>
<h3 class="font-bold text-lg">No Custom CSS</h3>
<p class="text-center text-gray-600 font-medium">
Tailwind's advanced class extraction will leave your project free of custom CSS.
</p>
</div>
<div class="grid grid-cols-1 place-items-center gap-1 p-10 w-full bg-white rounded-lg">
<div class="bg-gray-300 p-3 rounded-full text-indigo-900">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-16 w-16 fill-current"><path d="M18.9 19.7l-6.9 2-6.9-2L3.7 3h16.7c-.5 5.6-1 11.1-1.5 16.7zM19.4 4H4.8l1.3 14.9 5.9 1.7 5.9-1.7L19.4 4zM8.1 13.8h2V15l2 .7 2-.7.1-2.2H9.9l-.1-2h4.5l.1-2H7.7l-.1-2h9l-.2 3.9-.4 5.8-3.9 1.3-3.9-1.3-.1-2.7z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
</div>
<h3 class="font-bold text-lg">Developer Experience</h3>
<p class="text-center text-gray-600 font-medium">
Tailwind is designed with your happiness in mind. The ease of performing changes is refreshing.
</p>
</div>
<div class="grid grid-cols-1 place-items-center gap-1 p-10 w-full bg-white rounded-lg">
<div class="bg-gray-300 p-3 rounded-full text-indigo-900">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-16 w-16 fill-current"><path d="M18.9 19.7l-6.9 2-6.9-2L3.7 3h16.7c-.5 5.6-1 11.1-1.5 16.7zM19.4 4H4.8l1.3 14.9 5.9 1.7 5.9-1.7L19.4 4zM8.1 13.8h2V15l2 .7 2-.7.1-2.2H9.9l-.1-2h4.5l.1-2H7.7l-.1-2h9l-.2 3.9-.4 5.8-3.9 1.3-3.9-1.3-.1-2.7z" fill-rule="evenodd" clip-rule="evenodd"/></svg>
</div>
<h3 class="font-bold text-lg">Mobile Friendly</h3>
<p class="text-center text-gray-600 font-medium">
Modern applications demand mobile-friendly & Tailwind's responsive modifiers make it easy.
</p>
</div>
</div>
</div>
</main>
<footer class="bg-gray-800 py-5">
<div class="max-w-xl my-0 mx-auto">
<h2 class="text-center text-white font-medium text-2xl mx-2 my-2">Sign up to download the free PDF</h2>
<form class="my-3 mx-3 grid place-items-center">
<div class="grid sm:grid-cols-2 place-items-center gap-2 max-w-xl w-full">
<input type="text" disabled class="w-full text-white px-2 py-2 rounded-lg" placeholder="First name">
<input type="text" disabled class="w-full text-white px-2 py-2 rounded-lg" placeholder="Last name">
<input type="text" disabled class="w-full text-white px-2 py-2 rounded-lg" placeholder="Email">
<input type="text" disabled class="w-full text-white px-2 py-2 rounded-lg" placeholder="Title">
</div>
<button class="w-full p-2 bg-blue-500 mt-3 text-white max-w-xl font-medium rounded-lg">Create account</button>
</form>
</div>
<h6 class="text-white text-center">Copyright © 2019 Scrimba</h6>
</footer>
<script>
const formEl = document.querySelector('form');
formEl.addEventListener('submit', (event) => {
event.preventDefault();
})
</script>
</body>
</html>