I have been trying to align the text "TRANSCEND ENGINEERS" placed inside h1 vertically to the center. I am considerably new to building webpages with HTML and CSS so looking forward to the answer to the solution. Also, the Navigation links are aligned independently. Is there any way I can align them with respect to the navbar?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Transcend Engineers</title>
</head>
<body>
<div class="navbar">
<a class="navbar-logo" href="#">
<img src="C:\Users\Zain\Desktop\Transcend Engineers Website\logo.jpg" height="80" width="80" alt="">
</a>
<h1>TRANSCEND ENGINEERS</h1>
<li class="nav-link"><a href="#page-1">NavLink 4</a></li>
<li class="nav-link"><a href="#page-2">NavLink 3</a></li>
<li class="nav-link"><a href="#page-3">NavLink 2</a></li>
<li class="nav-link"><a href="#page-4">NavLink 1</a></li>
</div>
<div class="start-content">
<h4>Summary</h4>
</div>
<div class="summary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non scelerisque orci. Aliquam aliquet dui dignissim ex blandit, porta malesuada massa tincidunt. Nulla nec tellus ornare, egestas lorem ut, auctor massa. In euismod leo arcu, in vehicula odio volutpat sed. Aliquam erat volutpat. Nulla ex augue, gravida sed sapien bibendum, consequat consequat enim. Fusce lacinia nisi faucibus, scelerisque mi a, volutpat justo.
Proin porttitor luctus felis sit amet lacinia. Donec consequat scelerisque rhoncus. Praesent eu dapibus est, quis sollicitudin tortor. Sed tellus ligula, egestas nec tortor varius, egestas pharetra augue. Quisque ultricies gravida lorem, eu pretium sapien consequat sit amet. Duis vel nibh ullamcorper, accumsan ipsum non, auctor sapien. Vivamus sed dolor nec libero cursus porttitor cursus in mauris. In hac habitasse platea dictumst. Proin pulvinar justo et ex dapibus, in tempor urna lobortis. Vestibulum pharetra eros at mi eleifend, ut facilisis elit interdum. Etiam porta ligula sollicitudin leo luctus maximus. Quisque sodales massa eros, interdum consequat libero facilisis id. Phasellus maximus ut orci eget eleifend. Phasellus nisl est, consequat sed lorem eu, lacinia lobortis nisi. Suspendisse rutrum dui at lectus finibus molestie.</p>
</div>
<div id="footer">
<p>©Transcend Engineers 2022</p>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
scroll-behavior: smooth;
box-sizing: border-box;
}
body{
display: block;
}
h1{
padding-left: 75px;
display: inline-flex;
color: white;
font-size: 28px;
font-weight: bold;
font-family: Helvetica;
}
h4{
padding-top: 150px;
padding-left: 50px;
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
position: relative;
}
.summary{
margin: auto;
width: 75%;
padding-top: 30px;
text-align: center;
}
.navbar{
background-color: teal;
position: relative;
width: 100%;
}
.nav-link{
padding-top: 50px;
float: right;
list-style: none;
font-size: 18px;
font-weight: bold;
font-family: Helvetica;
}
.nav-link a{
text-decoration: none;
color: white;
padding: 20px;
}
.nav-link a:hover{
background-color: white;
color: black;
}
#footer{
padding-top: 380px;
text-align: center;
height: 15px;
color: black;
}
I used flexbox and some positioning on the navbar to get the results you're looking for. I cleaned up the HTML a bit and made a lot of changes to the CSS
HTML:
<head>
<link rel="stylesheet" href="styles.css">
<title>Transcend Engineers</title>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a href="" class="navbar-logo">
<img src="C:\Users\Zain\Desktop\Transcend Engineers Website\logo.jpg" height="80" width="80" alt="">
</a>
<h1>TRANSCEND ENGINEERS</h1>
<div class="nav-link-container">
<li class="nav-link"><a href="#page-1">NavLink 4</a></li>
<li class="nav-link"><a href="#page-2">NavLink 3</a></li>
<li class="nav-link"><a href="#page-3">NavLink 2</a></li>
<li class="nav-link"><a href="#page-4">NavLink 1</a></li>
</div>
</div>
</nav>
<div class="summary">
<h4>Summary</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non scelerisque orci. Aliquam aliquet dui dignissim ex blandit, porta malesuada massa tincidunt. Nulla nec tellus ornare, egestas lorem ut, auctor massa. In euismod leo arcu, in vehicula odio volutpat sed. Aliquam erat volutpat. Nulla ex augue, gravida sed sapien bibendum, consequat consequat enim. Fusce lacinia nisi faucibus, scelerisque mi a, volutpat justo.
Proin porttitor luctus felis sit amet lacinia. Donec consequat scelerisque rhoncus. Praesent eu dapibus est, quis sollicitudin tortor. Sed tellus ligula, egestas nec tortor varius, egestas pharetra augue. Quisque ultricies gravida lorem, eu pretium sapien consequat sit amet. Duis vel nibh ullamcorper, accumsan ipsum non, auctor sapien. Vivamus sed dolor nec libero cursus porttitor cursus in mauris. In hac habitasse platea dictumst. Proin pulvinar justo et ex dapibus, in tempor urna lobortis. Vestibulum pharetra eros at mi eleifend, ut facilisis elit interdum. Etiam porta ligula sollicitudin leo luctus maximus. Quisque sodales massa eros, interdum consequat libero facilisis id. Phasellus maximus ut orci eget eleifend. Phasellus nisl est, consequat sed lorem eu, lacinia lobortis nisi. Suspendisse rutrum dui at lectus finibus molestie.</p>
</div>
<div id="footer">
<p>©Transcend Engineers 2022</p>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
box-sizing: border-box;
}
body {
display: block;
width: 100vw;
height: 100vh;
}
h1 {
color: white;
font-size: 28px;
font-weight: bold;
font-family: Helvetica;
width: 100%;
display: flex;
justify-content: center;
margin-right: 40px;
}
h4 {
padding-top: 20px;
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
position: relative;
}
.summary {
margin: auto;
width: 75%;
text-align: center;
}
.nav-container {
display: flex;
align-items: center;
}
.navbar {
background-color: teal;
}
.nav-link-container {
display: flex;
align-items: center;
justify-content: flex-end;
width: max-content;
position: absolute;
right: 60px;
top: -20px;
}
.nav-link {
padding-top: 60px;
list-style: none;
font-size: 18px;
font-weight: bold;
font-family: Helvetica;
position: relative;
}
.nav-link a {
text-decoration: none;
color: white;
padding: 20px;
}
.nav-link a:hover {
background-color: white;
color: black;
}
.navbar-logo {
margin: 10px;
}
#footer {
padding-top: 380px;
text-align: center;
height: 15px;
color: black;
}