Scribd
Upload
3 views3 pages

Htmlssss HTML

The document is an HTML template for a webpage titled 'Home' featuring a sidebar and a main content area. The sidebar includes navigation links for Home, Gallery, Profile, and About, while the main content displays the title 'Far Eastern University' and a placeholder text. The page is styled with CSS for layout, colors, and hover effects.

Uploaded by

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

Htmlssss HTML

The document is an HTML template for a webpage titled 'Home' featuring a sidebar and a main content area. The sidebar includes navigation links for Home, Gallery, Profile, and About, while the main content displays the title 'Far Eastern University' and a placeholder text. The page is styled with CSS for layout, colors, and hover effects.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}

body {
background-image:
url("https://www.pacu.org.ph/wordpress/wp-content/uploads/2017/05/FEU-Facade-
photo.jpg");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
}

/* Sidebar styling */
.sidebar {
width: 250px;
background-color: rgb(255, 155, 25);
color: white;
height: 100%;
position: fixed;
padding-top: 30px;
text-align: center;
}

.sidebar ul {
padding-left: 0;
}

.sidebar ul li {
padding: 15px;
border-bottom: 1px solid #fff;
}

.sidebar ul li a {
color: black;
font-size: 24px;
font-family: Calibri;
text-decoration: none;
}

.sidebar ul li:hover {
background-color: rgba(0, 0, 0, 0.1);
}

.sidebar ul li:hover a {
color: yellow;
}

/* Main content styling */


.content {
margin-left: 250px;
padding: 20px;
width: 100%;
}

.menuBar {
height: 60px;
width: 100%;
background-color: rgb(255, 155, 25);
}

.menuBar ul {
list-style: none;
}

.menuBar ul li {
float: left;
margin-left: 80px;
margin-top: 10px;
}

.menuBar ul li a {
color: black;
font-size: 24px;
font-family: Calibri;
}

.menuBar ul li:hover a {
color: yellow;
}

.mainDiv {
height: 60%;
width: 60%;
position: absolute;
top: 20%;
left: 20%;
border-radius: 10px;
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.mainDiv .mainArt {
width: 100%;
}

.mainDiv .mainArt .mainTitle {


font-size: 60px;
color: black;
margin-top: 10px;
}

.mainDiv .mainArt .maincont {


font-size: 24px;
margin-top: 10px;
}

</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

<!-- Content Section -->


<div class="content">
<div class="menuBar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

<div class="mainDiv">
<div class="mainArt">
<h1 class="mainTitle">Far Eastern University</h1>
<p class="maincont">Ocs.</p>
</div>
</div>
</div>

</body>
</html>

You might also like