Div 隐藏在容器后面的新部分的元素
Div element for new section hidden behind container
我是 HTML 的新手，仍在学习，但现在我遇到了一些问题：
我完成了图像轮播的制作，但无法在轮播（它自己的部分）下添加第二个容器。第二个容器躲在第一个容器后面。
html, body {
background-color: rgba(206, 199, 199, 0.458);
height: 200%;
position:static;
font-family: sans-serif;
align-items: center;
max-width: 100%;
max-height: 100%;
margin: auto;
}
header {
position: absolute;
border: rgb(22, 19, 19) dotted 2px;
}
.logo {
position:absolute;
width: 130px;
height: 130px;
top: 7px;
left: 1%;
}
.logo2 {
position:absolute;
width: 550px;
height: 120px;
outline-style:groove;
outline-width: 3px;
outline-offset: -20px;
top: 10%;
left:9%;
}
h1 {
position:absolute;
text-align: center;
text-decoration:none;
font-family: 'Times New Roman', Times, serif;
font-size: 70px;
text-transform: capitalize;
text-shadow: red 400%;
left: 450px;
top: 240px;
border: rgb(37, 56, 184) dotted 3px;
}
#container{
background-color: rgb(253, 250, 250);
height: 20%;
width: 100%;
position:absolute;
left: 0%;
}
#main-menu .nav-bar {
position:absolute;
list-style:none;
top: 50px;
left: 95vh;
}
#main-menu .nav-bar li {
display:inline-block;
padding-right: 30px;
}
#main-menu .nav-bar li a {
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ccc;
font-size: 18px;
color: black;
background: transparent;
transition: 0.2s 0s;
display: inline-block;
}
#main-menu .nav-bar li a:hover{
cursor: pointer;
transform: scale(1.25);
}
Main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events:none;
top: 800px;
border: red dotted 5px;
}
body {
height: 200px;
margin: 0;
display: grid;
grid-template-rows: 940px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
border: rgb(56, 169, 44) dotted 5px;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-250px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
div.item:nth-of-type(1) {
--offset: 1;
background-image: url(photos/Alluredbyyou.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(2) {
--offset: 2;
background-image: url(photos/Notyourmarrysue.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(3) {
--offset: 3;
background-image: url(photos/thewolf.png);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(4) {
--offset: 4;
background-image: url(photos/adreamof.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(5) {
--offset: 5;
background-image: url(photos/EJ.png);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
cursor: pointer;
transform: scale(1.25);
}
input:nth-of-type(1):checked ~ main#carousel{
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="photos/ae_logo.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="container">
<img class="logo2" src="photos/title.png" alt="" srcset="">
<img class="logo" src="photos/ae_logo.png" alt="" srcset="">
<h1>NEW RELEASES</h1>
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><a href="#">Home</a></li>
<li class="nav-button-books"><a href="#">Books</a></li>
<li class="nav-button-authors"><a href="#">Authors</a></li>
<li class="nav-button-submissions"><a href="#">Submissions</a></li>
<li class="nav-button-contact"><a href="#">Contact US</a></li>
</ul>
</nav>
</div>
<main id="carousel">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</main>
</body>
<main>
<div class="container">
<div class="box">
<div class="photo"></div>
<div class="content">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</div>
</body>
</html>
我想我可以修复你的代码并实现你正在寻找的东西，在我修复了你的示例中的缩进之后。
缩进代码很重要
需要缩进元素以了解正在发生的事情。也许网站搞砸了你的缩进。如果不是，请尝试在将来正确缩进任何嵌套元素。在 why indentation is important.
上了解更多信息
我做了什么
- 我删除了一些额外的结束标签，例如
</body> 标签和一些 </div> 标签。
- 我已将绝对定位元素 h1 和 carousel 更改为相对定位元素，让您的布局“流动”。
在 when absolute positioned elements are useful 上了解更多信息。我把他们的固定定位换成了margin(top/rightbottom /left/) - 我喜欢这个“麻烦”助记符:)
获取上述结果的代码
html, body {
background-color: rgba(206, 199, 199, 0.458);
height: 200%;
position:static;
font-family: sans-serif;
align-items: center;
max-width: 100%;
max-height: 100%;
margin: auto;
}
header {
position: absolute;
border: rgb(22, 19, 19) dotted 2px;
}
.logo {
position:absolute;
width: 130px;
height: 130px;
top: 7px;
left: 1%;
}
.logo2 {
position:absolute;
width: 550px;
height: 120px;
outline-style:groove;
outline-width: 3px;
outline-offset: -20px;
top: 10%;
left:9%;
}
h1 {
position:relative;
text-align: center;
text-decoration:none;
font-family: 'Times New Roman', Times, serif;
font-size: 70px;
text-transform: capitalize;
text-shadow: red 400%;
margin: 200px 0 200px 0;
border: rgb(37, 56, 184) dotted 3px;
}
#container{
background-color: rgb(253, 250, 250);
height: 20%;
width: 100%;
position:absolute;
left: 0%;
}
#main-menu .nav-bar {
position:absolute;
list-style:none;
top: 50px;
left: 95vh;
}
#main-menu .nav-bar li {
display:inline-block;
padding-right: 30px;
}
#main-menu .nav-bar li a {
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ccc;
font-size: 18px;
color: black;
background: transparent;
transition: 0.2s 0s;
display: inline-block;
}
#main-menu .nav-bar li a:hover{
cursor: pointer;
transform: scale(1.25);
}
Main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events:none;
margin-top: 300px;
border: red dotted 5px;
}
body {
height: 200px;
margin: 0;
display: grid;
grid-template-rows: 940px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
border: rgb(56, 169, 44) dotted 5px;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-250px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
div.item:nth-of-type(1) {
--offset: 1;
background-image: url(photos/Alluredbyyou.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(2) {
--offset: 2;
background-image: url(photos/Notyourmarrysue.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(3) {
--offset: 3;
background-image: url(photos/thewolf.png);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(4) {
--offset: 4;
background-image: url(photos/adreamof.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(5) {
--offset: 5;
background-image: url(photos/EJ.png);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
cursor: pointer;
transform: scale(1.25);
}
input:nth-of-type(1):checked ~ main#carousel{
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="photos/ae_logo.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="container">
<img class="logo2" src="photos/title.png" alt="" srcset="">
<img class="logo" src="photos/ae_logo.png" alt="" srcset="">
<h1>NEW RELEASES</h1>
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><a href="#">Home</a></li>
<li class="nav-button-books"><a href="#">Books</a></li>
<li class="nav-button-authors"><a href="#">Authors</a></li>
<li class="nav-button-submissions"><a href="#">Submissions</a></li>
<li class="nav-button-contact"><a href="#">Contact US</a></li>
</ul>
</nav>
</div>
<main id="carousel">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</main>
<div class="container">
<div class="photo">div for photo</div>
<div class="box">
<div class="content">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</body>
</html>
我是 HTML 的新手，仍在学习，但现在我遇到了一些问题：
我完成了图像轮播的制作，但无法在轮播（它自己的部分）下添加第二个容器。第二个容器躲在第一个容器后面。
html, body {
background-color: rgba(206, 199, 199, 0.458);
height: 200%;
position:static;
font-family: sans-serif;
align-items: center;
max-width: 100%;
max-height: 100%;
margin: auto;
}
header {
position: absolute;
border: rgb(22, 19, 19) dotted 2px;
}
.logo {
position:absolute;
width: 130px;
height: 130px;
top: 7px;
left: 1%;
}
.logo2 {
position:absolute;
width: 550px;
height: 120px;
outline-style:groove;
outline-width: 3px;
outline-offset: -20px;
top: 10%;
left:9%;
}
h1 {
position:absolute;
text-align: center;
text-decoration:none;
font-family: 'Times New Roman', Times, serif;
font-size: 70px;
text-transform: capitalize;
text-shadow: red 400%;
left: 450px;
top: 240px;
border: rgb(37, 56, 184) dotted 3px;
}
#container{
background-color: rgb(253, 250, 250);
height: 20%;
width: 100%;
position:absolute;
left: 0%;
}
#main-menu .nav-bar {
position:absolute;
list-style:none;
top: 50px;
left: 95vh;
}
#main-menu .nav-bar li {
display:inline-block;
padding-right: 30px;
}
#main-menu .nav-bar li a {
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ccc;
font-size: 18px;
color: black;
background: transparent;
transition: 0.2s 0s;
display: inline-block;
}
#main-menu .nav-bar li a:hover{
cursor: pointer;
transform: scale(1.25);
}
Main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events:none;
top: 800px;
border: red dotted 5px;
}
body {
height: 200px;
margin: 0;
display: grid;
grid-template-rows: 940px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
border: rgb(56, 169, 44) dotted 5px;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-250px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
div.item:nth-of-type(1) {
--offset: 1;
background-image: url(photos/Alluredbyyou.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(2) {
--offset: 2;
background-image: url(photos/Notyourmarrysue.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(3) {
--offset: 3;
background-image: url(photos/thewolf.png);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(4) {
--offset: 4;
background-image: url(photos/adreamof.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(5) {
--offset: 5;
background-image: url(photos/EJ.png);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
cursor: pointer;
transform: scale(1.25);
}
input:nth-of-type(1):checked ~ main#carousel{
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="photos/ae_logo.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="container">
<img class="logo2" src="photos/title.png" alt="" srcset="">
<img class="logo" src="photos/ae_logo.png" alt="" srcset="">
<h1>NEW RELEASES</h1>
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><a href="#">Home</a></li>
<li class="nav-button-books"><a href="#">Books</a></li>
<li class="nav-button-authors"><a href="#">Authors</a></li>
<li class="nav-button-submissions"><a href="#">Submissions</a></li>
<li class="nav-button-contact"><a href="#">Contact US</a></li>
</ul>
</nav>
</div>
<main id="carousel">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</main>
</body>
<main>
<div class="container">
<div class="box">
<div class="photo"></div>
<div class="content">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</div>
</body>
</html>
我想我可以修复你的代码并实现你正在寻找的东西，在我修复了你的示例中的缩进之后。
缩进代码很重要
需要缩进元素以了解正在发生的事情。也许网站搞砸了你的缩进。如果不是，请尝试在将来正确缩进任何嵌套元素。在 why indentation is important.
上了解更多信息我做了什么
- 我删除了一些额外的结束标签，例如
</body>标签和一些</div>标签。 - 我已将绝对定位元素 h1 和 carousel 更改为相对定位元素，让您的布局“流动”。
在 when absolute positioned elements are useful 上了解更多信息。我把他们的固定定位换成了margin(top/rightbottom /left/) - 我喜欢这个“麻烦”助记符:)
获取上述结果的代码
html, body {
background-color: rgba(206, 199, 199, 0.458);
height: 200%;
position:static;
font-family: sans-serif;
align-items: center;
max-width: 100%;
max-height: 100%;
margin: auto;
}
header {
position: absolute;
border: rgb(22, 19, 19) dotted 2px;
}
.logo {
position:absolute;
width: 130px;
height: 130px;
top: 7px;
left: 1%;
}
.logo2 {
position:absolute;
width: 550px;
height: 120px;
outline-style:groove;
outline-width: 3px;
outline-offset: -20px;
top: 10%;
left:9%;
}
h1 {
position:relative;
text-align: center;
text-decoration:none;
font-family: 'Times New Roman', Times, serif;
font-size: 70px;
text-transform: capitalize;
text-shadow: red 400%;
margin: 200px 0 200px 0;
border: rgb(37, 56, 184) dotted 3px;
}
#container{
background-color: rgb(253, 250, 250);
height: 20%;
width: 100%;
position:absolute;
left: 0%;
}
#main-menu .nav-bar {
position:absolute;
list-style:none;
top: 50px;
left: 95vh;
}
#main-menu .nav-bar li {
display:inline-block;
padding-right: 30px;
}
#main-menu .nav-bar li a {
text-decoration: none;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ccc;
font-size: 18px;
color: black;
background: transparent;
transition: 0.2s 0s;
display: inline-block;
}
#main-menu .nav-bar li a:hover{
cursor: pointer;
transform: scale(1.25);
}
Main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events:none;
margin-top: 300px;
border: red dotted 5px;
}
body {
height: 200px;
margin: 0;
display: grid;
grid-template-rows: 940px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
border: rgb(56, 169, 44) dotted 5px;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-250px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
div.item:nth-of-type(1) {
--offset: 1;
background-image: url(photos/Alluredbyyou.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(2) {
--offset: 2;
background-image: url(photos/Notyourmarrysue.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(3) {
--offset: 3;
background-image: url(photos/thewolf.png);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(4) {
--offset: 4;
background-image: url(photos/adreamof.jpg);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
div.item:nth-of-type(5) {
--offset: 5;
background-image: url(photos/EJ.png);
height:100%;
background-size: cover;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
cursor: pointer;
transform: scale(1.25);
}
input:nth-of-type(1):checked ~ main#carousel{
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="photos/ae_logo.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="container">
<img class="logo2" src="photos/title.png" alt="" srcset="">
<img class="logo" src="photos/ae_logo.png" alt="" srcset="">
<h1>NEW RELEASES</h1>
<nav id="main-menu">
<ul class="nav-bar">
<li class="nav-button-home"><a href="#">Home</a></li>
<li class="nav-button-books"><a href="#">Books</a></li>
<li class="nav-button-authors"><a href="#">Authors</a></li>
<li class="nav-button-submissions"><a href="#">Submissions</a></li>
<li class="nav-button-contact"><a href="#">Contact US</a></li>
</ul>
</nav>
</div>
<main id="carousel">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</main>
<div class="container">
<div class="photo">div for photo</div>
<div class="box">
<div class="content">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</body>
</html>