Develop Reference

Failed deployment on vercel through github

I hosted a react project on github through vercel 2 weeks ago and yesterday I tried updating the files but it kept saying failed deployment and it keeps giving me this error failed deployment on vercel
I tried adding some space between the display and flex but nothing worked and when I tried updating another file I still got the same error

Try this css, you had the character U+00a0 multiple times which caused the parsing errors
.blogs-page{
display: flex;
flex-direction: column;
}
.blogs-page h1{
color: black;
text-align:center;
}
.form-blog-container input,
.form-blog-container textarea,
.form-blog-container label,
.form-blog-container select,
.form-blog-container button,
.form-blog-container header,
.form-blog-container p,
.form-blog-container option{
color:black;
}
.form-blog-container option{
background: black;
color: white;
}
.pop-up_box {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(38, 185, 190, 0.664);
z-index: 2;
}
.pop-up_box p,
.pop-up_box header {
color: black;
}
.pop-up_box .pop-up{
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
max-width: 400px;
width: 100%;
transform: translate(-50%, -40%);
}
.pop-up .content{
border-radius: 5px;
background: white;
padding:10px;
}
.content header,
.settings ul li{
display: flex;
align-items: center;
justify-content: space-between;
}
.pop-up .content header{
padding: 15px 25px;
border-bottom: 1px solid #ccc;
}
.content header p{
font-size: 20px;
font-weight: 500;
z-index: 5;
}
.content header i{
/* Temporary border */
padding: 20px;
color: red;
cursor: pointer;
font-size: 23px;
}
.content .form-blog-container {
margin: 15px 25px 35px;
}
.content .form-blog-container input{
margin-bottom: 10px;
height: 30px;
}
.content .form-blog-container textarea{
height: 150px;
resize: none;
padding: 8px 6px;
}
.form-blog-container label{
font-size: 18px;
margin-bottom:6px ;
}
.form-blog-container select{
border-radius: 5px;
outline: none;
margin-bottom: 6px;
}
.content .form-blog-container :where(input, textarea){
width:100%;
outline: none;
font-size: 17px;
padding: 0 5px;
border-radius: 4px;
border: 1px solid grey;
}
.content .form-blog-container .add_blog{
width: 100%;
height: 50px;
background: black;
color: white;
margin-top: 4px;
cursor: pointer;
font-size: 17px;
outline: none;
box-shadow: 5px 5px red;
margin-bottom: 20px;
border-radius: 5px;
z-index: 100;
transition: all .5s ease-in-out ;
}
.content .form-blog-container .add_blog:hover{
margin-top: 7px;
margin-left: 7px;
box-shadow: none;
transition: all .5s ease-in-out ;
}
.pop-up_box,
.pop-up_box .pop-up{
opacity: 0;
pointer-events: none;
transition: all .25s ease;
}
.pop-up_box.show,
.pop-up_box.show .pop-up{
opacity: 1;
pointer-events:auto;
}
.add{
color:#222;
cursor:pointer;
background:transparent;
border:1px solid black;
padding:15px;
transition:.3s ease-in-out;
display: flex;
align-self: center;
text-align: center;
margin: 1rem auto;
}
.add:hover{
background:#222;
color:white;
}
.categories{
display: flex;
justify-content: space-between;
background: transparent;
flex-wrap: wrap;
}
.cat{
text-align: center;
padding: 5px;
border: 1px solid black;
width: 70px;
height: 40px;
cursor: pointer;
margin-top: 1rem;
}
.cat:hover {
background: black;
border-color: white;
color: white;
transition: .3s ease-in-out;
}
.cat h6:hover{
color: white;
transition: .3s ease-in-out;
}
.cat h6{
margin-top: 12px;
}
.categories h6{
color: black;
}
.blogs-container{
display: flex;
flex-wrap: wrap;
width: 100rem;
}
.blog-post{
border: 1px solid black;
border-radius: 20px;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: 1rem;
background-image:linear-gradient(rgba(0, 0, 0, 0.432), rgba(0, 5, 5, 0.7)), url('../../../public/images/church5.jpg');
background-position:unset ;
background-size:cover ;
background-repeat: no-repeat;
}
.blog h1,
.blog h6{
color: white;
}
.blog h1{
text-align: center;
}
.blog h6{
align-self: flex-start;
margin-left: 15px;
}
.blog p{
text-align: center;
color: white;
width: 250px;
}
.blog h6{
padding-right: 30px;
}
.bottom{
display:flex;
/* justify-content: space-evenly; */
/* position: relative; */
/* top: 5rem; */
}
.blog .btn-blog{
color: white;
cursor: pointer;
outline: none;
border: 1px solid black;
text-align: center;
margin: 1rem auto;
padding: 10px;
border-radius: 5px;
background: linear-gradient(to bottom left, rgba(255, 0, 0, 0.432),rgba(255, 255, 255, 0.7));
display: flex;
justify-self: right;
}
.btn-blog:hover{
background: white;
color: black;
transition: .3s ease-in-out;
}
.blog-post i{
font-size:15px;
cursor: pointer;
padding:5px;
color:rgb(0, 0, 0);
z-index:50;
padding-right: 8px;
}
.blog-post-actions{
display:flex;
padding-top: 5px;
}
.blog-post-actions button{
margin-left: 10px;
list-style: none;
}
#media (max-width: 500px) {
.blogs{
/* justify-content: center;
align-items: center; */
width: 20rem;
}
}
#media (max-width: 600px) {
.blogs{
width: 30rem;
}
}

Why is "keyframes method" not working the way it should in my css?

In the keyframes part, my PC doesn't recognize the from part. If it would, it would be blue and the opacity command would be grey. But as you see none of them is correct and I don't know why. Because of this little error, my HTML website is not working the way it should. Can anyone please help me? I would like to finish my HTML website.
body {
margin: 0;
padding: 0;
animation: bgcolor infinite 20s;
}
h1 {
font-family: 'Yeseva One', cursive;
font-size: 4em;
margin: 0;
color: #fff;
}
#keyframes bgcolor {
0% {
background: #f1c40f;
}
10% {
background: #f39c12;
}
20% {
background: #e67e22;
}
30% {
background: #d35400;
}
40% {
background: #e74c3c;
}
50% {
background: #c0392b;
}
60% {
background: #e74c3c;
}
70% {
background: #d35400;
}
80% {
background: #e67e22;
}
90% {
background: #f39c12;
}
100% {
background: #f1c40f;
}
}
h2 {
font-family: 'IM Fell DW Pica', serif;
font-size: 3em;
margin: 0;
color: #fff;
}
p {
font-family: 'Clicker Script', cursive;
font-size: 2em;
margin: 0;
color: #fff;
}
button {
font-family: 'Playfair Display SC', serif;
font-size: 1em;
}
button {
margin: 0;
border: none;
background: #ea1538;
padding: 12px 30px;
border-radius: 30px;
color: white;
font-weight: bold;
box-sizing: border-box;
transition: .3s
}
button:hover {
transform: scale(1.3);
cursor: pointer;
}
.hero {
height: 100vh;
width: 100%;
}
nav {
display: flex;
align-items: center;
min-height: 8vh;
justify-content: space-between;
padding-left: 25%;
padding-right: 10%;
}
.logo {
color: white;
font-size: 28px;
}
.nav-links {
display: flex;
justify-content: space-between;
}
.nav-links a {
text-decoration: none;
letter-spacing: 1px;
}
.line {
width: 100%;
height: 3px;
background-color: white;
margin: 5px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
}
span {
color: #000000;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
font-size: 19px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
color: #000000;
transition: .2s;
}
#media screen and (max-width:1024px) {
.nav-links {
display: flex;
justify-content: space-between;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
background-color: #ffeaa7;
/*just to see if the slider works*/
right: 0px;
height: 100vh;
top: 18vh;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
padding-left: 100%;
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}

I'm not sure I fully understand your question, it might be helpful to reframe it, with a minimal reproducible example. See StackOverflows MRE
I don't see you calling the animation anywhere in your code. You need to target the nav links, and tell it to use the animation navLinkFade.
Here is an example of a super simple animation.
ul {
animation: fade 3s forwards;
}
#keyframes fade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
<ul>
<li>Test</li>
<li>Test</li>
</ul>

Elements shifting when screen is resized

I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.

From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox

One Api request for an image works but a copy of it in another HTML file in the same folder doesnt work

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
menu.addEventListener('click', function() {
menu.classList.toggle('is-active');
menuLinks.classList.toggle('active');
});
var req = new XMLHttpRequest();
var url = "https://api.nasa.gov/planetary/apod?api_key=";
var api_key = "Q6LCLptEevXBK9pvwj1GeEsPbM4mmv6ywTmfw0Nc";
req.open("GET", url + api_key);
req.send();
req.addEventListener("load", function() {
if (req.status == 200 && req.readyState == 4) {
var response = JSON.parse(req.responseText);
document.getElementById("title").textContent = response.title;
document.getElementById("date").textContent = response.date;
document.getElementById("pic").src = response.hdurl;
document.getElementById("explanation").textContent = response.explanation;
}
})
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: darkred;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin-right: auto;
margin-left: auto;
padding-right: 50px;
padding-left: 50px;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.fa-gem {
margin-right: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.btnclick {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}
.button:hover {
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #f77062;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
}
.navbar__menu.active {
background: #131313;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Main Content CSS */
.main {
background-color: #131313;
}
.main__container {
display: grid;
grid-template-columns: auto auto;
align-items: Left;
justify-self: Left;
margin: 100px;
height: 90vh;
background-color: #131313;
z-index: 1;
width: 100%;
max-width: 1300px;
padding-right: 0px;
padding-left: 0px;
}
.main__content {
color: #fff;
width: 100%;
}
.main__content h1 {
font-size: 4rem;
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content h2 {
font-size: 4rem;
margin-top: 10px;
background-color: #ff8177;
background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content p {
margin-top: 1rem;
font-size: 2rem;
font-weight: 700;
}
.main__btn {
font-size: 1rem;
background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #fff;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}
.main__btn a {
position: relative;
z-index: 2;
color: #fff;
text-decoration: none;
}
.main__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #4837ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover {
color: #fff;
}
.main__btn:hover:after {
width: 100%;
}
.main__img--container {
text-align: center;
}
#main__img {
height: 80%;
width: 80%;
}
/* Mobile Responsive */
#media screen and (max-width: 768px) {
.main__container {
display: grid;
grid-template-columns: auto;
align-items: center;
justify-self: center;
width: 100%;
margin: 0 auto;
height: 90vh;
}
.main__content {
text-align: center;
margin-bottom: 4rem;
}
.main__content h1 {
font-size: 2.5rem;
margin-top: 2rem;
}
.main__content h2 {
font-size: 3rem;
}
.main__content p {
margin-top: 1rem;
font-size: 1.5rem;
}
}
#media screen and (max-width: 480px) {
.main__content h1 {
font-size: 2rem;
margin-top: 3rem;
}
.main__content h2 {
font-size: 2rem;
}
.main__content p {
margin-top: 2rem;
font-size: 1.5rem;
}
.main__btn {
padding: 12px 36px;
margin: 2.5rem 0;
}
}
/* Services Section */
.services {
background: #131313;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.services h1 {
background-color: #ff8177;
background-image: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 5rem;
font-size: 2.5rem;
}
.services__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.services__card {
margin: 1rem;
height: 525px;
width: 400px;
border-radius: 4px;
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.6) 100%), url('/images/pic3.jpg');
background-size: cover;
position: relative;
color: #fff;
}
.services__card:before {
opacity: 0.2;
}
.services__card:nth-child(2) {
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.9) 100%), url('/images/pic4.jpg');
}
.services__card h2 {
position: absolute;
top: 350px;
left: 30px;
}
.services__card p {
position: absolute;
top: 400px;
left: 30px;
}
.services__card button {
color: #fff;
padding: 10px 20px;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
position: absolute;
top: 440px;
left: 30px;
font-size: 1rem;
}
.services__card button:hover {
cursor: pointer;
}
.services__card:hover {
transform: scale(1.075);
transition: 0.2s ease-in;
cursor: pointer;
}
#media screen and (max-width: 960px) {
.services {
height: 1600px;
}
.services h1 {
font-size: 2rem;
margin-top: 12rem;
}
}
#media screen and (max-width: 480px) {
.services {
height: 1400px;
}
.services h1 {
font-size: 1.2rem;
}
.services__card {
width: 300px;
}
}
/* Footer CSS */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items>h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.social__icons {
display: flex;
justify-content: space-between;
align-items: center;
width: 240px;
}
.social__logo {
color: #fff;
justify-self: start;
margin-left: 20px;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
margin-bottom: 16px;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
margin-bottom: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet" />
</head>
<body style="background-color:#131313;">
<div class="grid-container">
<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span> <span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
<li class="navbar__item">
Coming Soon
</li>
</ul>
</div>
</nav>
</div>
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nick</p>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title" /h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="30%">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML CSS Website</title>
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap"
rel="stylesheet"
/>
</head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
padding: 10px;
}
.grid-container > div {
text-align: Left;
padding: 20px 0;
font-size: 30px;
}
</style>
<body style="background-color:#131313;">
<div class="grid-container">
<div class="item1">
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Starfield</h1>
<h2>Explore Images from NASA</h2>
<p>By Nikunj Patel</p></div>
</div>
</div>
</div>
<div class="main__content">
<div class="main__container">
<div class="item2">
<h1>NASA Astronomy Picture Of The Day</h1>
<h2 id="title"></h2>
<h3>Date: <span id="date"></span></h3>
<img id="pic" src="" alt="NASA Picture Of The Day" width="100%">
<p id="explanation"></p>
</div>
</div>
</div>
<div class="item3">3</div>
<div class="item4">4</div>
</div>
<script src="app.js"></script>
</body>
</html>
So why does the first html produce an image and the second doesnt but both return the Error:
(Both HTMLs use the same CSS and Js files)
"{
"message": "Uncaught TypeError: Cannot set properties of null (setting 'textContent')",
"filename": "https://stacksnippets.net/js",
"lineno": 680,
"colno": 56
}"
i want to use the formatting of this second html file instead of the first and i was surprised no image was produced

How to fix this nav menu burger button?

I have trouble with my header, when I open this website in a mobile, and click in the burger button the nav menu can't be responsive at all.
The menu is in "position: fixed", and depending on the diferents mobiles I need to change the "top: n%", so I don't know how this can be responsive.
picture of the problem https://i.gyazo.com/7ca78e79ced8784c8e72ebc7090920d3.png
picture image of the problem https://i.gyazo.com/4cda3f4bc256719a4d565e74d131e7a0.png
Link of the website http://maderines.000webhostapp.com/
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: fixed;
background-color: rgba(0, 0, 0, 0.692);
top: 12%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 12%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 14%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 14vh;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>

If I understood what you try to do, you can just change the menu class from position: fixed; to position: absolute; and set top: 97% to all media sizes, so you should have:
const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
ipad.addListener(validation)
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(ipad);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
/* start HEADER */
.header {
background-color: rgba(0, 0, 0, 0.692);
color: white;
display: flex;
height: 80px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
position: fixed;
z-index: 2;
}
.header figure {
justify-self: center;
padding-top: 5px;
}
.menu {
height: inherit;
}
.header ol {
font-family: inherit;
display: flex;
height: inherit;
font-size: 17px;
}
.header ol li {
height: inherit;
}
.header a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
height: inherit;
padding: 0 10px;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}
.header ol a:hover {
transform: scale(1.2);
opacity: 1;
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
.burger-button {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
display: none;
position: fixed;
left: 10px;
top: 20px;
color: white;
font-size: 28px;
}
/* end HEADER */
/* start Responsive */
#media screen and (max-width:781px) {
.header {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: auto;
align-items: center;
}
}
#media screen and (max-width:658px) {
.burger-button {
display: block;
position: fixed;
z-index: 3;
justify-content: center;
align-self: center;
top: 15px;
}
.header ol {
display: block;
font-size: 20px;
}
.header ol li {
height: 40px;
}
.menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.692);
top: 97%;
left: -300px;
height: auto;
transition: .3s;
}
.menu.is-active {
left: 0;
}
}
#media screen and (max-width:480px) {
.burger-button {
top: 10px;
}
.menu {
top: 97%;
}
}
#media screen and (max-width:425px) {
.menu {
top: 97%;
}
}
#media screen and (max-width:320px) {
.menu {
top: 97%;
}
.burger-button {
line-height: 40px;
width: 40px;
height: 40px;
left: 10px;
top: 15px;
font-size: 20px;
}
}
<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
<header class="header">
<figure class="logo ">
<img src="http://maderines.000webhostapp.com/images/log3o.png" alt="Logo Carpinteria Mader Ranch">
</figure>
<nav class="menu">
<ol>
<li>Inicio</li>
<li>Nuestros trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
</div>