我制作了一个响应式网站并包含一个切换菜单,但它不起作用
I made a responsive website and included a toggle menu, but it does not function
我正在尝试制作一个带有切换菜单的响应式网站,但事实证明这很困难。因为我是编程的初学者,所以我已经包含了迄今为止我编写的所有代码。这是我的 HTML header,其中还包括其他部分和 div,以及汉堡菜单的按钮:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/0b2eeb2fd2.js" crossorigin="anonymous"></script>
<!-- <link rel="script" href="script.js"> -->
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="./image/logo.png" alt="logo"></a>
<div class="nav-links" id="navLinks">
<i class="fas fa-bars" onclick="hideMenu()"></i>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu"></i>
</nav>
<div class="text-box">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum explicabo ipsam quis, numquam voluptatem recusandae, repudiandae animi eligendi culpa provident soluta Repudiandae repellat adipisci ratione asperiores</p>
<a href="#" class="hero-btn">similique rerum evenietodio?</a>
</div>
</section>
<!-- Services -->
<section class="services">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, dolorem.</p>
<div class="row">
<div class="img">
<img src="https://images.unsplash.com/photo-1518614368389-5160c0b0de72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8a2lkcyUyMHBsYXlpbmclMjBiYXNrZXRiYWxsfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
</div>
<div class="text">
<small>Build a foundation</small>
<h3>Remedial Education</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem reprehenderit magni maiores aperiam, esse facere perspiciatis saepe alias, non laudantium qui earum cupiditate consequuntur! Natus quam vitae fugit? Eveniet, distinctio.</p><br>
<div class="button">
<button class="sec1don">Donate₹</button>
<button class="sec1vol">Volunteer</button>
</div>
</body>
</html>
此外,这是我正在尝试实现的 CSS:
* {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
font-family: 'Source Code Pro', monospace;
}
/* BANNER */
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./eduford_img/banner.png);
background-position: center;
background-size: cover;
}
/* NAVBAR */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
}
.nav-links ul li:hover::after {
width: 100%;
transition: 0.5s;
}
/* TEXTBOX DIV */
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-family: 'Source Code Pro', monospace;
font-size: 62px;
}
.text-box p {
margin: 10px 0 40px;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 1px solid #f44336;
background: #f44336;
}
nav .fas {
display: none;
}
/* Services section */
.services {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.services h1 {
font-size: 48px;
font-weight: 700;
font-family: 'Source Code Pro', monospace;
}
.services p {
color: #777;
font-size: 18px;
font-weight: 300;
line-height: 22px;
}
/* service section div 1*/
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
img {
width: 25rem;
}
.text {
display: block;
margin: auto;
padding: 0 0 0 2rem;
text-align: left;
}
.text small {
font-size: 1.5rem;
color: rgb(155, 155, 155);
text-transform: capitalize;
}
.text h3 {
font-size: 3rem;
font-family: 'Source Code Pro', monospace;
}
.text p {
font-family: 'Open Sans', sans-serif;
letter-spacing: .5px;
}
.text .button {
text-align: center;
}
.button button {
font-size: 22px;
color: #777;
background-color: #fff;
border: 1px solid #777;
border-radius: 5px;
padding: 5px;
}
.button button:hover {
color: #fff;
background-color: #777;
border: 1px solid #fff;
}
hr {
margin-left: -40px;
margin-right: -40px;
}
/* media queries */
@media(max-width: 700px) {
.text-box h1 {
font-family: Source Code Pro;
font-size: 20px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 10px;
}
/* navbar */
.nav-links ul li {
display: block;
}
.nav-links {
position: absolute;
background: rgb(255, 255, 255, 0.2);
height: 100vh;
width: 200px;
top: 0px;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fas {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
我尝试了以下 JS 函数:
// javascript for toggle menubar
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}
我不确定答案是什么;任何帮助将不胜感激,请帮助我作为菜鸟程序员。
你能试试下面的 hidemenu() 函数代码吗?
function hideMenu() {
document.getElementById('navLinks').style.display='none';
}
你的开关不起作用的原因是你忘记了 onclick="showMenu"
上的 '()',像你对 onclick="hideMenu()"
所做的那样将它变成 onclick="showMenu()"
它应该可以工作!
祝网站好运!
所做的更改:
要切换的单个函数。
function toggleMenu() {
navLinks.classList.toggle("show");
}
添加了一些 css 更改。
.toggle-menu {
z-index: 3;
}
.nav-links ul {
margin-top: 30px;
}
// javascript for toggle menubar
var navLinks = document.getElementById("navLinks");
function toggleMenu() {
navLinks.classList.toggle("show");
}
* {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
font-family: 'Source Code Pro', monospace;
}
/* BANNER */
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./eduford_img/banner.png);
background-position: center;
background-size: cover;
}
/* NAVBAR */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul {
margin-top: 30px;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
}
.nav-links ul li:hover::after {
width: 100%;
transition: 0.5s;
}
.toggle-menu {
z-index: 3;
}
/* TEXTBOX DIV */
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-family: 'Source Code Pro', monospace;
font-size: 62px;
}
.text-box p {
margin: 10px 0 40px;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 1px solid #f44336;
background: #f44336;
}
nav .fas {
display: none;
}
/* Services section */
.services {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.services h1 {
font-size: 48px;
font-weight: 700;
font-family: 'Source Code Pro', monospace;
}
.services p {
color: #777;
font-size: 18px;
font-weight: 300;
line-height: 22px;
}
/* service section div 1*/
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
img {
width: 25rem;
}
.text {
display: block;
margin: auto;
padding: 0 0 0 2rem;
text-align: left;
}
.text small {
font-size: 1.5rem;
color: rgb(155, 155, 155);
text-transform: capitalize;
}
.text h3 {
font-size: 3rem;
font-family: 'Source Code Pro', monospace;
}
.text p {
font-family: 'Open Sans', sans-serif;
letter-spacing: .5px;
}
.text .button {
text-align: center;
}
.button button {
font-size: 22px;
color: #777;
background-color: #fff;
border: 1px solid #777;
border-radius: 5px;
padding: 5px;
}
.button button:hover {
color: #fff;
background-color: #777;
border: 1px solid #fff;
}
hr {
margin-left: -40px;
margin-right: -40px;
}
/* media queries */
@media(max-width: 700px) {
.text-box h1 {
font-family: Source Code Pro;
font-size: 20px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 10px;
}
/* navbar */
.nav-links ul li {
display: block;
}
.nav-links {
position: absolute;
background: rgb(255, 255, 255, 0.2);
height: 100vh;
width: 200px;
top: 0px;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fas {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
.show {
right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/0b2eeb2fd2.js" crossorigin="anonymous"></script>
<!-- <link rel="script" href="script.js"> -->
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="./image/logo.png" alt="logo"></a>
<div class="nav-links" id="navLinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<i class="fas fa-bars toggle-menu" onclick="toggleMenu()"></i>
</nav>
<div class="text-box">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum explicabo ipsam quis, numquam voluptatem recusandae, repudiandae animi eligendi culpa provident soluta Repudiandae repellat adipisci ratione asperiores</p>
<a href="#" class="hero-btn">similique rerum evenietodio?</a>
</div>
</section>
<!-- Services -->
<section class="services">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, dolorem.</p>
<div class="row">
<div class="img">
<img src="https://images.unsplash.com/photo-1518614368389-5160c0b0de72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8a2lkcyUyMHBsYXlpbmclMjBiYXNrZXRiYWxsfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
</div>
<div class="text">
<small>Build a foundation</small>
<h3>Remedial Education</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem reprehenderit magni maiores aperiam, esse facere perspiciatis saepe alias, non laudantium qui earum cupiditate consequuntur! Natus quam vitae fugit? Eveniet, distinctio.</p><br>
<div class="button">
<button class="sec1don">Donate₹</button>
<button class="sec1vol">Volunteer</button>
</div>
</body>
</html>
我正在尝试制作一个带有切换菜单的响应式网站,但事实证明这很困难。因为我是编程的初学者,所以我已经包含了迄今为止我编写的所有代码。这是我的 HTML header,其中还包括其他部分和 div,以及汉堡菜单的按钮:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/0b2eeb2fd2.js" crossorigin="anonymous"></script>
<!-- <link rel="script" href="script.js"> -->
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="./image/logo.png" alt="logo"></a>
<div class="nav-links" id="navLinks">
<i class="fas fa-bars" onclick="hideMenu()"></i>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu"></i>
</nav>
<div class="text-box">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum explicabo ipsam quis, numquam voluptatem recusandae, repudiandae animi eligendi culpa provident soluta Repudiandae repellat adipisci ratione asperiores</p>
<a href="#" class="hero-btn">similique rerum evenietodio?</a>
</div>
</section>
<!-- Services -->
<section class="services">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, dolorem.</p>
<div class="row">
<div class="img">
<img src="https://images.unsplash.com/photo-1518614368389-5160c0b0de72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8a2lkcyUyMHBsYXlpbmclMjBiYXNrZXRiYWxsfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
</div>
<div class="text">
<small>Build a foundation</small>
<h3>Remedial Education</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem reprehenderit magni maiores aperiam, esse facere perspiciatis saepe alias, non laudantium qui earum cupiditate consequuntur! Natus quam vitae fugit? Eveniet, distinctio.</p><br>
<div class="button">
<button class="sec1don">Donate₹</button>
<button class="sec1vol">Volunteer</button>
</div>
</body>
</html>
此外,这是我正在尝试实现的 CSS:
* {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
font-family: 'Source Code Pro', monospace;
}
/* BANNER */
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./eduford_img/banner.png);
background-position: center;
background-size: cover;
}
/* NAVBAR */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
}
.nav-links ul li:hover::after {
width: 100%;
transition: 0.5s;
}
/* TEXTBOX DIV */
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-family: 'Source Code Pro', monospace;
font-size: 62px;
}
.text-box p {
margin: 10px 0 40px;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 1px solid #f44336;
background: #f44336;
}
nav .fas {
display: none;
}
/* Services section */
.services {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.services h1 {
font-size: 48px;
font-weight: 700;
font-family: 'Source Code Pro', monospace;
}
.services p {
color: #777;
font-size: 18px;
font-weight: 300;
line-height: 22px;
}
/* service section div 1*/
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
img {
width: 25rem;
}
.text {
display: block;
margin: auto;
padding: 0 0 0 2rem;
text-align: left;
}
.text small {
font-size: 1.5rem;
color: rgb(155, 155, 155);
text-transform: capitalize;
}
.text h3 {
font-size: 3rem;
font-family: 'Source Code Pro', monospace;
}
.text p {
font-family: 'Open Sans', sans-serif;
letter-spacing: .5px;
}
.text .button {
text-align: center;
}
.button button {
font-size: 22px;
color: #777;
background-color: #fff;
border: 1px solid #777;
border-radius: 5px;
padding: 5px;
}
.button button:hover {
color: #fff;
background-color: #777;
border: 1px solid #fff;
}
hr {
margin-left: -40px;
margin-right: -40px;
}
/* media queries */
@media(max-width: 700px) {
.text-box h1 {
font-family: Source Code Pro;
font-size: 20px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 10px;
}
/* navbar */
.nav-links ul li {
display: block;
}
.nav-links {
position: absolute;
background: rgb(255, 255, 255, 0.2);
height: 100vh;
width: 200px;
top: 0px;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fas {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
我尝试了以下 JS 函数:
// javascript for toggle menubar
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}
我不确定答案是什么;任何帮助将不胜感激,请帮助我作为菜鸟程序员。
你能试试下面的 hidemenu() 函数代码吗?
function hideMenu() {
document.getElementById('navLinks').style.display='none';
}
你的开关不起作用的原因是你忘记了 onclick="showMenu"
上的 '()',像你对 onclick="hideMenu()"
所做的那样将它变成 onclick="showMenu()"
它应该可以工作!
祝网站好运!
所做的更改:
要切换的单个函数。
function toggleMenu() {
navLinks.classList.toggle("show");
}
添加了一些 css 更改。
.toggle-menu {
z-index: 3;
}
.nav-links ul {
margin-top: 30px;
}
// javascript for toggle menubar
var navLinks = document.getElementById("navLinks");
function toggleMenu() {
navLinks.classList.toggle("show");
}
* {
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
font-family: 'Source Code Pro', monospace;
}
/* BANNER */
.header {
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./eduford_img/banner.png);
background-position: center;
background-size: cover;
}
/* NAVBAR */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul {
margin-top: 30px;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: #fff;
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after {
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
}
.nav-links ul li:hover::after {
width: 100%;
transition: 0.5s;
}
.toggle-menu {
z-index: 3;
}
/* TEXTBOX DIV */
.text-box {
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-family: 'Source Code Pro', monospace;
font-size: 62px;
}
.text-box p {
margin: 10px 0 40px;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 1px solid #f44336;
background: #f44336;
}
nav .fas {
display: none;
}
/* Services section */
.services {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.services h1 {
font-size: 48px;
font-weight: 700;
font-family: 'Source Code Pro', monospace;
}
.services p {
color: #777;
font-size: 18px;
font-weight: 300;
line-height: 22px;
}
/* service section div 1*/
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
}
img {
width: 25rem;
}
.text {
display: block;
margin: auto;
padding: 0 0 0 2rem;
text-align: left;
}
.text small {
font-size: 1.5rem;
color: rgb(155, 155, 155);
text-transform: capitalize;
}
.text h3 {
font-size: 3rem;
font-family: 'Source Code Pro', monospace;
}
.text p {
font-family: 'Open Sans', sans-serif;
letter-spacing: .5px;
}
.text .button {
text-align: center;
}
.button button {
font-size: 22px;
color: #777;
background-color: #fff;
border: 1px solid #777;
border-radius: 5px;
padding: 5px;
}
.button button:hover {
color: #fff;
background-color: #777;
border: 1px solid #fff;
}
hr {
margin-left: -40px;
margin-right: -40px;
}
/* media queries */
@media(max-width: 700px) {
.text-box h1 {
font-family: Source Code Pro;
font-size: 20px;
}
.text-box p {
margin: 10px 0 40px;
font-size: 10px;
}
/* navbar */
.nav-links ul li {
display: block;
}
.nav-links {
position: absolute;
background: rgb(255, 255, 255, 0.2);
height: 100vh;
width: 200px;
top: 0px;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav .fas {
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul {
padding: 30px;
}
}
.show {
right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/0b2eeb2fd2.js" crossorigin="anonymous"></script>
<!-- <link rel="script" href="script.js"> -->
</head>
<body>
<section class="header">
<nav>
<a href="index.html"><img src="./image/logo.png" alt="logo"></a>
<div class="nav-links" id="navLinks">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<i class="fas fa-bars toggle-menu" onclick="toggleMenu()"></i>
</nav>
<div class="text-box">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum explicabo ipsam quis, numquam voluptatem recusandae, repudiandae animi eligendi culpa provident soluta Repudiandae repellat adipisci ratione asperiores</p>
<a href="#" class="hero-btn">similique rerum evenietodio?</a>
</div>
</section>
<!-- Services -->
<section class="services">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, dolorem.</p>
<div class="row">
<div class="img">
<img src="https://images.unsplash.com/photo-1518614368389-5160c0b0de72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8a2lkcyUyMHBsYXlpbmclMjBiYXNrZXRiYWxsfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
</div>
<div class="text">
<small>Build a foundation</small>
<h3>Remedial Education</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem reprehenderit magni maiores aperiam, esse facere perspiciatis saepe alias, non laudantium qui earum cupiditate consequuntur! Natus quam vitae fugit? Eveniet, distinctio.</p><br>
<div class="button">
<button class="sec1don">Donate₹</button>
<button class="sec1vol">Volunteer</button>
</div>
</body>
</html>