Skip to content

Feature/ben #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feature/ben #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5ff193
GitHub Classroom Feedback
github-classroom[bot] May 6, 2024
327e001
Setting up GitHub Classroom Feedback
github-classroom[bot] May 6, 2024
68fccbe
feat:login page
benwata777 May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .github/.keep
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
63 changes: 50 additions & 13 deletions ex1-login-page/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Framework (Tailwind) Exercise 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Framework (Tailwind) Exercise 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
<!-- Start coding here -->
</body>

</html>
<body class="bg-slate-200 h-screen flex justify-center items-center">
<!-- Start coding here -->
<div
class="box px-[30px] mx-auto flex justify-start items-center flex-col bg-white w-80 rounded-lg p-[30px] border border-gray-300 border-xl"
>
<div class="head mb-4 self-start">
<p class="text-zinc-600 text-xl">Login to Website</p>
</div>
<div class="email mb-4 flex items-start w-full">
<label for="email" class="mr-2">Email:</label>
<input
type="email"
id="email"
name="email"
required
class="w-full h-10 border border-gray-300 rounded px-2 hover:border-violet-300 focus:border-violet-500 focus:outline-none"
/>
</div>
<div class="password mb-4 flex items-start w-full">
<label for="password" class="mr-2">Password:</label>
<input
type="password"
id="password"
name="password"
required
class="w-full h-10 border border-gray-300 rounded px-2 hover:border-violet-500 focus:border-violet-300 focus:outline-none"
/>
</div>
<div class="button flex justify-between">
<button
class="w-36 px-2 py-2 rounded-full bg-violet-500 text-white focus:outline-none focus:ring-2 focus:ring-violet-300 focus:ring-offset-2 focus:ring-offset-slate-400 active:bg-violet-600 hover:bg-violet-400"
>
Sign in
</button>
<button
class="w-36 px-2 py-2 rounded-full bg-white text-violet-600 focus:outline-none focus:ring-2 focus:ring-violet-300 focus:ring-offset-2 focus:ring-offset-slate-400 hover:bg-violet-100"
>
Sign up
</button>
</div>
</div>
</body>
</html>