Scribd
Upload
2 views

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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

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
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