Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
69 changes: 69 additions & 0 deletions Exercise_1/exercise1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 1: HTML Building-U</title>
</head>
<body>

<h1>Exercise 1: HTML Building-U</h1>
<h2>Date of Submission: April 6, 2025</h2>

<h3>Favorite Movies, Music, and Videos</h3>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Favorite Movie Image</th>
<th>Favorite Music Audio Sample</th>
<th>Favorite Video Sample</th>
</tr>
<tr>
<td>Alexandra</td>
<td>Popusoi</td>
<td><a href="https://en.wikipedia.org/wiki/Indiana_Jones" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/en/2/2d/Indiana_Jones_and_the_Last_Crusade.jpg" alt="Indiana Jones" width="100"></a></td>
<td><audio controls><source src="path_to_your_audio.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio></td>
<td><video width="100" controls><source src="path_to_your_video.mp4" type="video/mp4">Your browser does not support the video tag.</video></td>
</tr>

</table>

<h3>Feedback Form</h3>
<form>
<label for="fullName">Full Name:</label><br>
<input type="text" id="fullName" name="fullName" placeholder="Enter your full name"><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Enter your email address"><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password" placeholder="Enter your password"><br><br>

<label>Available Days:</label><br>
<input type="checkbox" id="monday" name="days" value="Monday">Monday<br>
<input type="checkbox" id="tuesday" name="days" value="Tuesday">Tuesday<br>
<input type="checkbox" id="wednesday" name="days" value="Wednesday">Wednesday<br>
<input type="checkbox" id="thursday" name="days" value="Thursday">Thursday<br>
<input type="checkbox" id="friday" name="days" value="Friday">Friday<br><br>

<label for="availableTime">Available Time:</label><br>
<select id="availableTime" name="availableTime">
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select><br><br>

<label>Working on a New Website?</label><br>
<input type="radio" id="yes" name="newWebsite" value="yes" checked> Yes<br>
<input type="radio" id="no" name="newWebsite" value="no"> No<br><br>

<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" placeholder="Add any comments or additional information"></textarea><br><br>

<button type="button">Submit</button>
<button type="button">Reset</button>
</form>

</body>
</html>
137 changes: 137 additions & 0 deletions Exercise_2/exercise2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkillsUSA California State Event</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
color: #333;
}
h1, h2, h3 {
color: #2c3e50;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #3498db;
color: white;
}
form {
margin-top: 20px;
background-color: #ecf0f1;
padding: 20px;
border-radius: 5px;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="text"], input[type="email"], textarea, select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
margin-right: 10px;
border: none;
border-radius: 4px;
background-color: #2ecc71;
color: white;
cursor: pointer;
}
button[type="button"] {
background-color: #e74c3c;
}
</style>
</head>
<body>

<h1>SkillsUSA California State Event 2025</h1>
<h2>Date: April 20-22, 2025</h2>

<h3>Event Details</h3>
<p>Join us for the annual SkillsUSA California State Event, where students from across the state will showcase their skills in various competitions. This event promotes career and technical education and provides students with the opportunity to exhibit their talents and gain recognition.</p>

<h3>Location</h3>
<p>The event will take place at:</p>
<p><strong>California State University, Sacramento</strong><br>
6000 J St, Sacramento, CA 95819</p>

<h3>Timings</h3>
<table>
<tr>
<th>Day</th>
<th>Event</th>
<th>Time</th>
</tr>
<tr>
<td>April 20</td>
<td>Opening Ceremony</td>
<td>10:00 AM - 12:00 PM</td>
</tr>
<tr>
<td>April 21</td>
<td>Competitions</td>
<td>9:00 AM - 5:00 PM</td>
</tr>
<tr>
<td>April 22</td>
<td>Awards Ceremony</td>
<td>1:00 PM - 3:00 PM</td>
</tr>
</table>

<h3>Who's Invited</h3>
<p>All students, teachers, and industry professionals are invited to attend. Come and support our talented participants!</p>

<h3>Contact Information</h3>
<p>If you have any questions, please contact:</p>
<p><strong>Alexandra Popusoi</strong><br>
Email: <a href="mailto:trainerh@skillsusa.org">trainer@skillsusa.org</a><br>
Phone: (555) 113-4667</p>

<h3>Event Highlights</h3>
<p>Check out this video to learn more about SkillsUSA:</p>
<video width="320" height="240" controls>
<source src="path_to_skillsusa_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<h3>Audio Message</h3>
<p>Listen to a message from our event coordinator:</p>
<audio controls>
<source src="path_to_audio_message.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

<h3>Feedback Form</h3>
<form>
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" placeholder="Enter your full name">

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email address">

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" placeholder="Any comments or questions"></textarea>

<button type="button">Submit</button>
</form>

</body>
</html>
140 changes: 140 additions & 0 deletions Exercise_3/index 5.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - BuildingU</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>

body {
background-color: #f8f9fa;
}
.hero {
background-color: #007bff;
color: white;
padding: 100px 0;
text-align: center;
}
.about, .projects {
padding: 60px 0;
}
.project-card {
margin-bottom: 30px;
}
</style>
</head>
<body>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">BuildingU</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</nav>


<header class="hero" id="home">
<h1>Welcome to My Portfolio</h1>
<p>Discover my projects and skills in web development.</p>
<a href="#portfolio" class="btn btn-light">View My Work</a>
</header>


<section class="about" id="about">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="path/to/profile_image.jpg" alt="Profile" class="img-fluid rounded-circle">
</div>
<div class="col-md-8">
<h2>About Me</h2>
<p>I'm a passionate web developer with a knack for building responsive and user-friendly websites.</p>
<h5>Key Skills:</h5>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>Bootstrap, React, Node.js</li>
<li>Responsive Design</li>
</ul>
</div>
</div>
</div>
</section>


<section class="projects" id="portfolio">
<div class="container">
<h2>My Projects</h2>
<div class="row">

<div class="col-md-4">
<div class="card project-card">
<img src="path/to/project_image1.jpg" class="card-img-top" alt="Project 1">
<div class="card-body">
<h5 class="card-title">My building-U projects</h5>
<p class="card-text">Unfortantely, I don't have any Building-U projects-YET! Check back later!.</p>
<button class="btn btn-primary" data-toggle="modal" data-target="#projectModal1">View Details</button>
</div>
</div>
</div>

<div class="modal fade" id="projectModal1" tabindex="-1" role="dialog" aria-labelledby="projectModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="projectModalLabel1">Project Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>No Building-U projects ready yet!</p>
<p><strong>Technologies I plan to use:</strong> HTML, CSS, JavaScript, Bootstrap</p>
<p>Check back later!</p>
</div>
</div>
</div>
</div>

</div>
</div>
</section>


<section id="contact" class="bg-light">
<div class="container">
<h2>Contact Me</h2>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</section>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Loading