Scribd
Upload
12 views4 pages

Act 10

Uploaded by

patialshiv44
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views4 pages

Act 10

Uploaded by

patialshiv44
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

<html>

<head>
<title>Riwick Smith - Web Developer & Designer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/al
l.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&disp
lay=swap" rel="stylesheet">
</head>
<body class="bg-gray-100 font-roboto text-red-600">
<header class="bg-white text-red-600 p-4">
<div class="container mx-auto text-center">
<h1 class="text-3xl font-bold text-blue-600">Riwick
Smith</h1>
<p class="text-sm">Web Developer & Designer</p>
</div>
</header>
<nav class="bg-gray-800 text-white p-2">
<div class="container mx-auto text-center">
<a href="#" class="mx-2">About</a>
<a href="#" class="mx-2">Projects</a>
<a href="#" class="mx-2">Contact</a>
</div>
</nav>
<main class="container mx-auto p-4">
<section class="mb-8">
<h2 class="text-2xl font-bold">About Me</h2>
<p class="mt-2">Hello! I'm Riwick Smith, a passionate
web developer with a love for creating beautiful and functional
websites. I have experience in HTML, CSS, JavaScript, and more.</p>
</section>
<section class="mb-8">
<h2 class="text-2xl font-bold">My Projects</h2>
<div class="mt-4">
<h3 class="text-xl font-bold">Project 1</h3>
<p class="mt-1">A description of Project 1. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold">Project 2</h3>
<p class="mt-1">A description of Project 2. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section class="mb-8">
<h2 class="text-2xl font-bold">Project Statistics</h2>
<table class="min-w-full bg-white mt-4 text-red-600">
<thead>
<tr>
<th class="py-2 px-4 border-b">Project</th>
<th class="py-2 px-4
border-b">Technologies</th>
<th class="py-2 px-4 border-b">Completion
Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-2 px-4 border-b">Project
1</td>
<td class="py-2 px-4 border-b">HTML, CSS,
JavaScript</td>
<td class="py-2 px-4 border-b">June
2024</td>
</tr>
<tr>
<td class="py-2 px-4 border-b">Project
2</td>
<td class="py-2 px-4 border-b">React,
Node.js</td>
<td class="py-2 px-4 border-b">August
2024</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 class="text-2xl font-bold">Contact Me</h2>
<form class="mt-4">
<div class="mb-4">
<label for="name" class="block">Name:</label>
<input type="text" id="name" class="w-full
border border-gray-300 p-2">
</div>
<div class="mb-4">
<label for="email" class="block">Email:</label>
<input type="email" id="email" class="w-full
border border-gray-300 p-2">
</div>
<div class="mb-4">
<label class="block">Preferred Contact
Method:</label>
<div class="flex items-center">
<input type="radio" id="emailContact"
name="contactMethod" class="mr-2">
<label for="emailContact"
class="mr-4">Email</label>
<input type="radio" id="phoneContact"
name="contactMethod" class="mr-2">
<label for="phoneContact">Phone</label>
</div>
</div>
<div class="mb-4">
<input type="checkbox" id="newsletter"
class="mr-2">
<label for="newsletter">Subscribe to
newsletter</label>
</div>
<button type="submit" class="bg-gray-800 text-white
py-2 px-4">Send</button>
</form>
</section>
</main>
</body>
</html>

You might also like