Skip to content

Durga-html-project #528

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

Durga-html-project #528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa636fa
durga-html-advancedtags
Saidurgasatturi Sep 30, 2025
681814c
durga-html-project
Saidurgasatturi Sep 30, 2025
3bb2504
durga-html-project
Saidurgasatturi Sep 30, 2025
15f8934
durga-html-project
Saidurgasatturi Sep 30, 2025
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 css/advanced/Assignment-1/index.html
View file
Open in desktop
Empty file.
69 changes: 69 additions & 0 deletions css/advanced/Assignment-1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

header {
background: #0d0a99;
color: #fff;
padding: 20px;
text-align: center;
}

nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
}

nav a {
color: #fff;
text-decoration: none;
}

main {
display: flex;
padding: 20px;
gap: 20px;
}

article {
flex: 3;
background: #2c13a8;
color: #fff;
padding: 20px;
border-radius: 8px;
}

aside {
flex: 1;
background: #4d119b;
color: #fff;
padding: 20px;
border-radius: 8px;
}

footer {
background: #3f12ba;
color: #fff;
text-align: center;
padding: 15px;
margin-top: 20px;
bottom: auto;
}

@media (max-width: 768px) {
main {
flex-direction: column;
flex:1;
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The flex: 1 property here has no effect because the main element is not a flex item (its parent, body, is not a flex container). This line is redundant and can be removed without changing the layout.

}
}
60 changes: 60 additions & 0 deletions css/advanced/Assignment-2/animations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation & Media Queries</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.box {
width: 150px;
height: 150px;
background: #3498db;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
}
@media (max-width: 768px) {
.box {
width: 120px;
height: 120px;
font-size: 14px;
background: #e67e22;
}
}

@media (max-width: 480px) {
.box {
width: 90px;
height: 90px;
font-size: 12px;
background: #2ecc71;
}
}
</style>
Comment on lines +7 to +55
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The CSS styles are embedded within the HTML file using a <style> tag. According to the best practices mentioned in the PR description, CSS should be in separate files for better organization, reusability, and maintainability ('Use modular CSS files'). Please move these styles to an external .css file and link it using the <link> tag in the <head>.

</head>
<body>
<div class="box">Hello Guys..!</div>
</body>
</html>
54 changes: 54 additions & 0 deletions html/5-projects/Project-1/semantics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My personal Homepage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1> Sai Durga </h1>
<p> Solutions Engineer </p>
</header>
<section id="about">
<h2>About Me</h2>
<p>Enthusiastic web developer</p>
</section>
<section id="Education">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

It is a common convention to use lowercase for id and class attributes to ensure consistency across the codebase. Consider changing Education to education.

Suggested change
<section id="Education">
<section id="education">

<h2> Educational Details </h2>
<ul>
<li>Graduated in Sreenidhi institute of science and technologt (2021-2025)</li>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

There is a typo in "technologt". It should be "technology".

Suggested change
<li>Graduated in Sreenidhi institute of science and technologt (2021-2025)</li>
<li>Graduated in Sreenidhi institute of science and technology (2021-2025)</li>

<li>Narayana junior college (2019-2021)</li>
</ul>
</section>
<section id="skills">
<h2> Skills </h2>
<ul>
<li> Html, CSS, JavaScript</li>
<li>Java, Springboot framework, python, Sql</li>
</ul>
</section>
<section id="contact">
<h2> Contact form </h2>
<form action="semantics.html" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="phno">Phone Number:</label>
<input type="number" id="phno" name="phone number" required><br><br>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The name attribute for this input contains a space (phone number). While technically allowed, it's not a good practice as it can cause issues with form data processing on the server-side and with JavaScript. It's better to use a single word or use hyphens/camelCase, like phone-number or phoneNumber.

Suggested change
<input type="number" id="phno" name="phone number" required><br><br>
<input type="number" id="phno" name="phone-number" required><br><br>


<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="date">Date:</label>
<input type="date" id="date" name="date" required><br><br>

<label for="message">Message:</label>
<input type="text" id="message" name="message" required><br><br>
Comment on lines +36 to +48
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using <br> tags for spacing between elements is not a best practice. Layout and spacing should be handled by CSS using properties like margin or padding. This provides better control, is more maintainable, and separates structure (HTML) from presentation (CSS). Please remove the <br> tags and use CSS to style the form layout.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For a 'Message' field that expects multi-line input, it's more appropriate to use a <textarea> element instead of an <input type="text">. This improves the user experience.

Suggested change
<input type="text" id="message" name="message" required><br><br>
<textarea id="message" name="message" required></textarea><br><br>

<button type="submit">Send</button>
</form>
</section>
<footer> &copy; 2025 All rights reserved</footer>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

It's a good practice to wrap text content within a block-level element like <p> inside a <footer>. This improves the semantic structure of the document.

Suggested change
<footer> &copy; 2025 All rights reserved</footer>
<footer><p> &copy; 2025 All rights reserved</p></footer>

</body>
</html>
115 changes: 115 additions & 0 deletions html/5-projects/Project-1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}

h1, h2 {
color: #2c3e50;
}

a {
color: #3498db;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

header {
background: #3498db;
color: #fff;
padding: 2rem;
text-align: center;
}

header h1 {
margin: 0;
font-size: 2.5rem;
}

header p {
margin-top: 0.5rem;
font-size: 1.2rem;
}


section {
padding: 2rem;
max-width: 800px;
margin: auto;
background: #fff;
margin-bottom: 1.5rem;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

section h2 {
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}

ul {
list-style-type: square;
margin-left: 1.5rem;
}


form {
display: flex;
flex-direction: column;
}

label {
margin-top: 0.5rem;
font-weight: bold;
}

input, text, button {
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The text selector is not a valid HTML element selector. If you intended to style a multi-line text input, you should use the textarea selector. I've also recommended changing the message field in semantics.html from an <input> to a <textarea>.

Suggested change
input, text, button {
input, textarea, button {

margin-top: 0.3rem;
padding: 0.7rem;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}

text {
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

Similar to the previous comment, the text selector here is invalid. This should be textarea to correctly apply styles to a <textarea> element.

Suggested change
text {
textarea {

resize: vertical;
}

button {
margin-top: 1rem;
background: #3498db;
color: #fff;
border: none;
cursor: pointer;
transition: background 0.3s ease;
}

button:hover {
background: #2980b9;
}


footer {
text-align: center;
padding: 1rem;
background: #2c3e50;
color: #fff;
}


@media (max-width: 600px) {
header h1 {
font-size: 2rem;
}

section {
padding: 1rem;
}
}
83 changes: 83 additions & 0 deletions html/5-projects/Project-2/productlanding.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
</head>
<body>

<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#plans">Plans</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<header>
<h1>SuperProduct 2025</h1>
<p>The ultimate solution for productivity and efficiency</p>
</header>

<section id="features">
<h2>Features</h2>
<p>SuperProduct 2025 is designed to simplify your workflow and maximize productivity. With cutting-edge tools and an intuitive interface, you’ll accomplish tasks faster and smarter.</p>
<ul>
<li>Easy-to-use dashboard</li>
<li>Cross-platform compatibility</li>
<li>Advanced analytics and reporting</li>
<li>24/7 customer support</li>
</ul>
</section>

<section id="video">
<h2>See SuperProduct in Action</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"
title="Product Demo" frameborder="0" allowfullscreen></iframe>
Comment on lines +37 to +38
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The frameborder attribute is obsolete in HTML5. The modern approach is to control element borders using CSS. I recommend creating a stylesheet for this project and adding a rule like iframe { border: none; } to remove the border.

</section>

<section id="plans">
<h2>Choose Your Plan</h2>
<table border="1">
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The border attribute on the <table> element is obsolete in HTML5. All styling, including borders, should be handled with CSS for better separation of concerns and maintainability. Please create and link a stylesheet to style the table borders. You could add rules like table, th, td { border: 1px solid black; } and table { border-collapse: collapse; } to achieve a similar visual effect.

<caption>SuperProduct Pricing Plans</caption>
<thead>
<tr>
<th>Plan</th>
<th>Price</th>
<th>Features</th>
</tr>
</thead>
<tbody>
<tr>
<td>Basic</td>
<td>$10/month</td>
<td>Core features, Email support</td>
</tr>
<tr>
<td>Pro</td>
<td>$25/month</td>
<td>All Basic features + Advanced tools + Priority support</td>
</tr>
<tr>
<td>Enterprise</td>
<td>$50/month</td>
<td>All Pro features + Custom integrations + Dedicated support</td>
</tr>
</tbody>
</table>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>Email: support@superproduct.com</p>
<p>Phone: +1 234 567 890</p>
</section>

<footer>
<p>&copy; 2025 SuperProduct Inc. All rights reserved.</p>
</footer>

</body>
</html>
4 changes: 4 additions & 0 deletions html/5-projects/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,10 @@ <h2>Assignments</h2>
<summary onclick="showContent(event)">Supriya</summary>
<iframe data-src="./supriya/index.html"></iframe>
</details>
<details>
<summary onclick="showContent(event)">SaiDurga</summary>
<iframe data-src="./saidurga/index.html"></iframe>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The path data-src="./saidurga/index.html" points to a file that does not exist in this pull request. This will result in a broken iframe when this content is loaded. Please ensure the path is correct and that the target file is included in the project structure.

</details>
</div>
</div>
<footer>
Expand Down