为什么缩小屏幕时会自动弹出移动版导航栏？
Why does the mobile-version navbar pops up automatically when downsizing screen?
我正在做一个关于电影网站的副项目。我设计了一个 RWD 导航栏如下。当我将屏幕缩小到576px的断点时，移动版导航栏会自动弹出然后隐藏。如果 运行 片段然后展开并折叠 window，则可以看到结果。我猜复选框会导致此问题，但不确定。有人可以帮我解决这个问题吗？谢谢！
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar{
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: .5s;
z-index: 999;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
@media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar{
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar">
<a href="#">About</a>
<a href="./explore.html">Explore</a>
<a href="#social-media">Contact us</a>
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p> / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola@jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
这是由于.navbar中的CSS transition: .5s;；当您到达断点时，您正在更改 right 位置并且 CSS 正在为其设置动画。为避免这种情况，请在显示菜单之前指定要设置动画的属性或使用 JavaScript 添加 transition 属性。例如，使用 jQuery:
$(".navbar").css("transition", ".5s");
编辑：我错过了导致动画的 CSS 选择器，因此假设它是 jQuery。
要解决仅 HTML/CSS 的问题，您可以创建导航栏的副本并使用 display: none;。以下代码段应该有效；我添加了导航栏的副本并添加了 类 .navbar-big 和 .navbar-small。这允许我们使用 display 属性 根据断点隐藏我们不想显示的导航栏，并设置 transition: right .5s; 为 .navbar-small.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
transition: .5s;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar {
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 999;
}
.navbar-small {
transition: right .5s;
}
.navbar-big {
display: none;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
@media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar {
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.navbar-small {
display: none;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar navbar-big">
<a href="#">About</a>
<a href="./explore.html">Explore</a>
<a href="#social-media">Contact us</a>
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
<nav class="navbar navbar-small">
<a href="#">About</a>
<a href="./explore.html">Explore</a>
<a href="#social-media">Contact us</a>
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p> / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola@jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
我正在做一个关于电影网站的副项目。我设计了一个 RWD 导航栏如下。当我将屏幕缩小到576px的断点时，移动版导航栏会自动弹出然后隐藏。如果 运行 片段然后展开并折叠 window，则可以看到结果。我猜复选框会导致此问题，但不确定。有人可以帮我解决这个问题吗？谢谢！
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar{
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: .5s;
z-index: 999;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
@media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar{
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar">
<a href="#">About</a>
<a href="./explore.html">Explore</a>
<a href="#social-media">Contact us</a>
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p> / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola@jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>
这是由于.navbar中的CSS transition: .5s;；当您到达断点时，您正在更改 right 位置并且 CSS 正在为其设置动画。为避免这种情况，请在显示菜单之前指定要设置动画的属性或使用 JavaScript 添加 transition 属性。例如，使用 jQuery:
$(".navbar").css("transition", ".5s");
编辑：我错过了导致动画的 CSS 选择器，因此假设它是 jQuery。
要解决仅 HTML/CSS 的问题，您可以创建导航栏的副本并使用 display: none;。以下代码段应该有效；我添加了导航栏的副本并添加了 类 .navbar-big 和 .navbar-small。这允许我们使用 display 属性 根据断点隐藏我们不想显示的导航栏，并设置 transition: right .5s; 为 .navbar-small.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
}
.wrap {
width: 100%;
}
header {
height: 100px;
background: #000;
padding: 0 10px;
color: #fff;
display: flex;
align-items: center;
position: relative;
}
#checked {
visibility: hidden;
z-index: -9999;
position: absolute;
}
#checked:checked ~.navbar {
right: 0;
transition: .5s;
}
.logo {
height: 60%;
vertical-align: middle;
}
.navbar {
margin-left: auto;
font-size: 0;
position: fixed;
width: 100%;
height: 100vh;
background: #000;
right: -100%;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 999;
}
.navbar-small {
transition: right .5s;
}
.navbar-big {
display: none;
}
.navbar a {
display: block;
margin: 20px 0;
transition: .4s;
}
.navbar a:hover, .hideBtn:hover {
color: #3498db;
}
.navbar a,
.hideBtn, .showBtn {
font-size: 20px;
padding: 0 10px;
text-decoration: none;
color: #fff;
}
.showBtn {
position: absolute;
top: 37px;
right: 10px;
}
.showcase {
position: relative;
background: url("./image/photo-1517604931442-7e0c8ed2963c.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: calc(100vh - 60px);
display: flex;
justify-content: center;
align-items: center;
}
.showcase .mask {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1;
opacity: 0.5;
}
.showcase .txt,
.showcase .slogan {
position: absolute;
color: #fff;
z-index: 2;
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 3em;
}
.showcase .slogan {
font-size: 1.2em;
bottom: 35%;
}
.service {
display: grid;
grid-template-rows: repeat(3, 1fr);
background-color: #000;
grid-gap:20px;
padding: 30px 50px;
}
.service a {
display: flex;
width: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.service a img {
width: 30%;
}
.service a p {
color: #fff;
font-size: 1.5em;
font-weight: bolder;
margin: 10px;
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr;
grid-gap: 0px;
}
.content div {
width: 100%;
text-align: center;
font-size: 1.5em;
}
.content div:nth-child(even) {
background-color: #000;
color: #fff;
}
.content div img {
width: 100%;
}
.content div p {
padding: 10px;
}
footer {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-info {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #000;
}
.contact-txt {
display: flex;
flex-flow: column nowrap;
width: 50%;
color: #fff;
}
footer #social-media img{
width: 30px;
margin: 0 5px;
}
.copyright {
text-align: center;
}
@media screen and (min-width: 576px) {
.showBtn, .navbar .hideBtn {
display: none;
}
.navbar {
margin-left: auto;
font-size: 0;
position: relative;
width: auto;
height: 100%;
background: #000;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: row;
transition: none;
z-index: 0;
}
.navbar-small {
display: none;
}
.showcase .txt {
font-size: 4em;
}
.showcase .slogan {
font-size: 2em;
}
.service {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr);
}
.content {
display: grid;
grid-template-rows: repeat(3, 1fr);
}
.content div {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
font-size: 1.2em;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<header>
<img class="logo" src="./image/media.svg" />
<input type="checkbox" id="checked">
<label for="checked" class="showBtn">
<i class="fas fa-bars"></i>
</label>
<nav class="navbar navbar-big">
<a href="#">About</a>
<a href="./explore.html">Explore</a>
<a href="#social-media">Contact us</a>
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
<nav class="navbar navbar-small">
<a href="#">About</a>
<a href="./explore.html">Explore</a>
<a href="#social-media">Contact us</a>
<label for="checked" class="hideBtn">
<i class="fas fa-times"></i>
</label>
</nav>
</header>
<div class="showcase">
<div class="mask"></div>
<h1 class="txt">HOME CINEMA</h1>
<h2 class="slogan">Experience Cinema at home</h2>
</div>
<div class="service">
<a href="#subscribe-info">
<img src="./image/communications.svg" alt="">
<p> / month</p>
</a>
<a href="#vr-info">
<img src="./image/electronics.svg" alt="">
<p>Virtual Reality</p>
</a>
<a href="#unlimited-info">
<img src="./image/arrows.svg" alt="">
<p>Unlimited Watch</p>
</a>
</div>
<div class="content">
<div id="subscribe-info">
<img src="./image/photo-1543536448-d209d2d13a1c.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis necessitatibus ratione, ut sunt
voluptatibus totam a repudiandae enim nihil beatae ducimus aliquid! Et, beatae reprehenderit aspernatur est
hic commodi expedita.</p>
</div>
<div id="vr-info">
<img src="./image/pexels-photo-3391378.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque possimus facere ipsum unde saepe maxime
voluptatem tempora sint pariatur at, nobis ipsam necessitatibus similique maiores, reiciendis repudiandae
voluptatum, cumque repellat.</p>
</div>
<div id="unlimited-info">
<img src="./image/pexels-photo-3912397.jpeg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, nesciunt veniam, reprehenderit, fugiat nemo
fugit natus dicta maxime delectus ut quos et mollitia obcaecati pariatur. Rerum minima delectus sint ex?</p>
</div>
</div>
<footer>
<div class="contact-info">
<div class="contact-txt">
<p>hola@jamondetaiwan.com</p>
<p>+886 2771 5412</p>
<p>2F., No. 2, Ln. 179, Kanghu Rd., Neihu Dist., Taipei City 114, Taiwan (R.O.C.)</p>
</div>
<div id="social-media">
<img src="./image/fb.svg" alt="">
<img src="./image/ig.svg" alt="">
<img src="./image/youtube.svg" alt="">
</div>
</div>
<div class="copyright">
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>
</html>