Skip to content

Exercise #1 Upload #4

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
Shreyas-Hegde10 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Exercise #1 Upload #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8978418
Added submission1.html
Shreyas-Hegde10 Jul 11, 2024
0a5a562
Delete Submission1.html
Shreyas-Hegde10 Jul 13, 2024
5c8046c
Add files via upload
Shreyas-Hegde10 Jul 13, 2024
8cd3017
Added my html file, my css file, and 3 images for Exercise #4
Shreyas-Hegde10 Jul 15, 2024
35f6303
Added my html file and a js file
Shreyas-Hegde10 Jul 15, 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
123 changes: 123 additions & 0 deletions Exercise #1/Submission1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Building-U Lesson 1 Submission</title>
</head>
<body>
<!-- Header -->
<center><h1>Exercise 1 By Shreyas Hegde</h1></center>
<center><h4>Date of Submission: 2024-07-11</h4></center>

<!-- Table -->
<div>
<center><h3>Fun Facts About Me!</h3></center>
<table border="1" align="center">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Favourite Movie</th>
<th>Favourite Song</th>
<th>Favourite Video</th>
</tr>
<tr>
<td>Shreyas</td>
<td>Hegde</td>
<td><img src="https://resizing.flixster.com/-XZAfHZM39UwaGJIFWKAE8fS0ak=/v3/t/assets/p7825626_p_v8_ae.jpg" alt="Inception" width="100" height="150"></td>
<td>
<audio controls>
<source src="download.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<center><p>Skeletons by Travis Scott</p></center>
</td>
<td>
<video width="320" height="240" controls>
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</td>
</tr>
</table>
</div>

<!-- Form -->
<div style="text-align: center;">
<h4>Enter your details below:</h4>
<form style="display: inline-block; text-align: left;">

<!--Name Textfield-->
<div style="text-align: center;">
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name" placeholder="Enter your full name">
</div><br>

<!-- Email Address Textfield -->
<div style="text-align: center;">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="Enter your email address">
</div><br>

<!-- Password Textfield -->
<div style="text-align: center;">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
</div><br>

<!-- Available Meeting Times Checkbox -->
<div style="text-align: center;">
<label>Available Meeting Times:</label><br>
<div style="display: inline-block;">
<input type="checkbox" id="monday" name="available-days" value="Monday">
<label for="monday">Monday</label>
<input type="checkbox" id="tuesday" name="available-days" value="Tuesday">
<label for="tuesday">Tuesday</label>
<input type="checkbox" id="wednesday" name="available-days" value="Wednesday">
<label for="wednesday">Wednesday</label>
<input type="checkbox" id="thursday" name="available-days" value="Thursday">
<label for="thursday">Thursday</label>
<input type="checkbox" id="friday" name="available-days" value="Friday">
<label for="friday">Friday</label>
<input type="checkbox" id="saturday" name="available-days" value="Saturday">
<label for="saturday">Saturday</label>
<input type="checkbox" id="sunday" name="available-days" value="Sunday">
<label for="sunday">Sunday</label>
</div>
</div><br>

<!-- Available Time Drop Down List -->
<div style = "text-align: center;">
<label for="available-time">Available Time:</label>
<select id="available-time" name="available-time">
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
<option value="night">Night</option>
</select>
</div><br>

<!-- New Website Radiobutton -->
<div style="text-align: center;">
<label>Working on a New Website?:</label>
<input type="radio" id="yes" name="new-website" value="yes" checked>
<label for="yes">Yes</label>
<input type="radio" id="no" name="new-website" value="no">
<label for="no">No</label>
</div><br>

<!-- Additional Comments Textbox -->
<div style="text-align: center;">
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter any comments or additional information"></textarea>
</div><br>

<!-- Nonfunctional Submit & Reset Buttons -->
<div style="text-align: center;">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
</div>
</body>
</html>
Binary file added Exercise #1/download.mp3
View file
Open in desktop
Binary file not shown.
Binary file added Exercise #1/mov_bbb.mp4
View file
Open in desktop
Binary file not shown.
Binary file added Exercise #4/HTML5_logo_and_wordmark.svg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
190 changes: 190 additions & 0 deletions Exercise #4/Submission4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exercise # 4</title>
<meta charset="utf-8">
<!-- Including Bootstrap CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<!-- Building a Bootstrap Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Submission4.html">Building-U</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="Submission4.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!-- Buidling a Bootstrap Hero Section -->
<section class = "hero-section">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-12">
<h1 class = "hero-heading">Welcome to My Portfolio</h1>
<p class="hero-intro">Discover my work, projects, and passion for web development.</p>
<a href="#" class="btn btn-primary hero-button">View My Work</a>
</div>
</div>
</div>
</section>

<!-- About Me Section -->
<section id="about" class="about-section">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h2 class="about-heading">About Me</h2>
<p class="about-bio">Hi, I'm a Machine Learning and Web Development enthusiast with a passion for creating innovative solutions.
With a background in computer science and hands-on experience in building webpages and machine learning models, I strive to combine the best of both worlds to deliver impactful projects.
</p>
<h3 class="skills-heading">Key Skills & Achievements:</h3>
<ul class="skills-list">
<li>Developed a machine learning model for predicting rainful in Australia with 85% accuracy.</li>
<li>Created a webpage called EcoMate using Flask,HTML,Bootstrap, & Javascript.</li>
<li>Developed a machine learning model for predicting insurance costs.</li>
<li>Experienced in PyTorch for deep learning projects.</li>
</ul>
</div>
<div class="col-md-4 text-center">
<img src="one beer_left_1.jpg" alt="Profile Image" class="img-circle profile-image">
</div>
</div>
</div>
</section>

<!-- Projects Section-->
<section id = "projects" class = "projects-section">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-12 text-center">
<h2 class = "projects-heading">My Building-U Projects</h2>
</div>
</div>
<!-- Project No.1-->
<div class = "row">
<div class = "col-md-6">
<div class = "card">
<img src = "HTML5_logo_and_wordmark.svg.png" alt = "HTML 5 Logo" class = "card-img-top">
<div class = "card-body">
<h4 class = "card-title">Project No.1: HTML</h4>
<p class = "card-text">A static webpage that was coded using only basic HTML. Click the button to learn more about the project.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#project1Modal">Learn More</button>
</div>
</div>
</div>

<!--Project No.2-->
<div class = "col-md-6">
<div class = "card">
<img src = "bootstrapphoto.png" alt = "HTML 5 Logo" class = "card-img-top">
<div class = "card-body">
<h4 class = "card-title">Project No.2: HTML + Bootstrap</h4>
<p class = "card-text">A portfolio webpage that was created using HTML & Bootstrap CSS. Click the button to learn more about the project.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#project2Modal">Learn More</button>
</div>
</div>
</div>

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

<!-- Modal for Project No.1 -->
<div id = "project1Modal" class = "modal fade" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title text-center">Project No.1</h4>
</div>
<div class = "modal-body">
<p>The webpage contained a table with the following columns: first name, last name, favourite movie image, favourite song, & favourite video. It also contained a form with the following fields: full name, email, password, available days, & available time.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!--Modal for Project No.2-->
<div id = "project2Modal" class = "modal fade" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title text-center">Project No.2</h4>
</div>
<div class = "modal-body">
<p>The webpage was created using Bootstrap's grid system. There were 4 grids in total: Hero Section, About Me Section, Portfolio Section, Contact Section. It also contains a Bootstrap navbar & a Bootstrap Form.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!--Contact Section-->
<section id = "contact" class = "contact-section">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-8">
<h2 class = "contact-heading">Contact Me</h2>
</div>
</div>
</div>
<form>
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder="Enter your full name" required>
</div>
<div class = "form-group">
<label for = "email">Email</label>
<input type = "text" class = "form-control" id = "email" placeholder="Enter your email address" required>
</div>
<div class = "form-group">
<label for = "message">Message</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder = "Enter your comment here" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block" data-toggle="modal" data-target="#formsubmissionModal">Submit</button>
</form>

</section>

<!--Contact Form Modal-->
<div id = "formsubmissionModal" class = "modal fade" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title text-center">Success!</h4>
</div>
<div class = "modal-body">
<p>Your message has been successfully sent!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

</body>
</html>
Binary file added Exercise #4/bootstrapphoto.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Exercise #4/one beer_left_1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading