Skip to content

New one #2

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

New one #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05a5d2c
New one
NirmalKBandara Jan 2, 2025
e4a240c
Update tets.html
NirmalKBandara Jan 2, 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
225 changes: 225 additions & 0 deletions hotelWebProject.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<html>
<head>
<title>Nirmal_02</title>
<style>
*{
font-family: 'Times New Roman', Times, serif;
}
body{
background-image: url(image_01.jpg);
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
background-color:lightblue;
}
.logo{
position: absolute;
float: left;
top: 50px;
left: 50px;
}
.logoLink{
position: absolute;
display: block;
float: left;
top: 100px;
left: 120px;
width: 30px;
height: 30px;
}
#header{
position: absolute;
top: 65%;
left: 25%;
width: 50%;
justify-items: center;
font-size: 2.75vh;
background-color: rgba(255, 255, 255, 0.6);
}
#navbar{
position: absolute;
left: 16.5vw;
text-align: center;

}
#navbar ul{
list-style-type: none;
display: flex;
}
#navbar li{
background-color: rgba(255, 255, 255, 0);
width: 15vw;
}
#navbar a{
text-decoration: none;
color: white;
font-size: 4vh;
transition: color 0.5s ease;
}
#link_01:hover{
color: lightblue;

}
.section_01:hover #dropbtn_01{
color: lightblue;
}
#dropbtn_01{
background-color: rgba(255, 255, 255, 0);
color: white;
border: none;
cursor: pointer;
transition: color 0.5s ease;
font-size: 4vh;
}
.section_01:hover #content_01{
display: block;
}
.section_01 #content_01{
position: absolute;
width: 25%;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10%;
display: none;
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.26);

}
.section_01 #content_01 a{
display: block;
border-radius: 15%;

}
#data_01:hover{
color: rgba(0, 0, 255, 0.6);
background-color: rgba(255, 255, 255, 0.75);
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.downbar{
position: absolute;
top: 90vh;
left: 5vw;
text-align: center;
}
.downbar ul{
list-style-type: none;
display: flex;
}
.downbar li{
color: white;
background-color: rgba(0, 0, 0, 0);
width: 15vw;
}
.downbar a{
text-decoration: none;
font-size: 4vh;
color: white;
background-color: rgba(255, 255, 255, 0);
transition: color 0.5s ease;
}
.content_02, .content_03, .content_04{
position: absolute;
width: 25%;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10%;
display: none;
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.25);

}
.data_02, .data_03, .data_04{
display: block;
}
.data_02:hover, .data_03:hover, .data_04:hover{
color: darkblue;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15%;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);

}
.upbtn_02, .upbtn_03, .upbtn_04{
font-size: 4vh;
border: none;
background-color: rgba(255, 255, 255, 0);
color: white;
cursor: pointer;
transition: color 0.5s ease;
}
.upbtn_02:hover, .upbtn_03:hover, .upbtn_04:hover{
color: rgb(28, 70, 84);
}
.link_02:hover, .link_03:hover{
color: rgb(28, 70, 84)
}
.section_02:hover .content_02, .section_03:hover .content_03, .section_04:hover .content_04{
display: block;

}



</style>
</head>
<body>
<div class="logo">
<img src="logo_01.png" width="150px">
</div>
<div class="logoLink">
<P><a href="">A</a></P>
</div>
<header id="header">
<h1>OCEAN LINE HOTEL</h1>
<p>This is a good hotel.</p>
</header>
<nav id="navbar">
<ul>
<li><a href="###" id="link_01">Home</a></li>
<li><a href="###" id="link_01">Home</a></li>
<li><a href="###" id="link_01">Home</a></li>
<div class="section_01">
<li><button id="dropbtn_01">Drop</button></li>
<div id="content_01">
<a id="data_01" href="####">Link 01</a>
<a id="data_01" href="####">Link 02</a>
<a id="data_01" href="####">Link 03</a>
</div>
</div>
<div class="section_01">
<li><button id="dropbtn_01">Drop</button></li>
<div id="content_01">
<a id="data_01" href="####">Link 01</a>
<a id="data_01" href="####">Link 02</a>
<a id="data_01" href="####">Link 03</a>
</div>
</div>
</ul>
</nav>
<nav class="downbar">
<ul>
<li><a href="###" class="link_02">Home</a></li>
<div class="section_02">
<li><button class="upbtn_02">Drop</button></li>
<div class="content_02">
<a class="data_02" href="####">Link 01</a>
<a class="data_02" href="####">Link 02</a>
<a class="data_02" href="####">Link 03</a>
</div>
</div>
<div class="section_03">
<li><button class="upbtn_03">Drop</button></li>
<div class="content_03">
<a class="data_03" href="####">Link 01</a>
<a class="data_03" href="####">Link 02</a>
<a class="data_03" href="####">Link 03</a>
</div>
</div>
<div class="section_04">
<li><button class="upbtn_04">Drop</button></li>
<div class="content_04">
<a class="data_04" href="####">Link 01</a>
<a class="data_04" href="####">Link 02</a>
<a class="data_04" href="####">Link 03</a>
</div>
</div>
<li><a href="###" class="link_03">Home</a></li>
</ul>
</nav>
</body>
</html>
Binary file added image_01.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.
Binary file added image_03.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.
Binary file added image_04.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.
Binary file added image_05.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.
Binary file added logo_01.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.
88 changes: 88 additions & 0 deletions tets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Example</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to My Website</h1>
<p>Your go-to platform for quality content.</p>
</header>

<!-- Navigation Section -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<!-- Main Content Section -->
<main>
<section id="home">
<h2>Home</h2>
<p>Welcome to our homepage. Stay tuned for updates!</p>
</section>

<section id="about">
<h2>About Us</h2>
<p>We are a company committed to delivering exceptional service.</p>
</section>

<section id="services">
<h2>Our Services</h2>
<ul>
<li>Consulting</li>
<li>Development</li>
<li>Support</li>
</ul>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>Feel free to reach out at contact@example.com.</p>
</section>
</main>

<!-- Footer Section -->
<footer>
<p>&copy; 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Fading with Transition</title>
<style>
.fade-box {
width: 200px;
height: 100px;
background-color: blue;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
text-align: center;
transition: background-color 1s ease, color 1s ease; /* Smooth fade */
}

.fade-box:hover {
background-color: red; /* New color */
color: yellow; /* Text color fade */
}
</style>
</head>
<body>
<div class="fade-box">Hover me!</div>
</body>
</html>