Creative Website Concept Current Progress Snapshot
The initial image showcases the desired appearance for my website. The title is positioned in the center of the header elements and features a sleek black border. Below the header and title, there is an image with a similar black border surrounding it. In the middle section, I envision a search bar also bordered in black. Following that, a section displaying a preview of what the website offers should be visible. However, the second image represents the current state of my progress. I am encountering difficulties, particularly with aligning the title and the header correctly. Any assistance or guidance would be greatly appreciated!
body {
margin: 0;
font-family: Cambria;
height: 757.58px;
width: 1100px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.header-container {
display: flex;
align-items: center;
background-color: #FFFFFF;
padding: 20px 0;
font-size: 28px;
position: relative;
top: 5px
}
.header {
text-align: center;
position: absolute;
top: 0px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
nav ul li {
margin: 0 10px;
position: relative;
top: 0px;
}
nav ul li a {
text-decoration: none;
color: #91CDB7;
position: relative;
top: 0px;
}
.main-content {
margin: 0 20px;
text-align: center;
position: relative;
top: -10px;
}
.main-content span {
display: inline-block;
width: 388px;
height: 93px;
border: 2px solid black;
padding: 10px;
color: #91CDB7;
font-size: 58px;
line-height: 73px;
position: relative;
top: 0px;
left: 100px;
}
.header-container:nth-child(1) {
justify-content: flex-start;
position: relative;
left: 10px;
top: 10px
/* Align first header-container to the left */
}
.header-container:nth-child(2) {
justify-content: flex-end;
position: relative;
right: 10px;
top: 10px;
/* Align second header-container to the right */
}<div class="header-container">
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Music</a></li>
</ul>
</nav>
</header>
</div>
<div class="header-container">
<header>
<nav>
<ul>
<li><a href="#">Contests</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<span>Music Bakery</span>
</div>The provided code reflects my current progress. Although I had hoped it would address the issues with the title and header layout, it unfortunately falls short.