I have coded a few times in an intro class in college but I recently picked it up using tutorials and I realize I love doing it. So please don’t judge me for my lack of experience.
I’m having two issues with my codes. The first one is my hover attributes are not working; recently I tried to add a responsive menu bar using javascript and somehow the hover elements in the existing nav-bar became inactive.
The second issue I’m having is checking the page in chrome looks perfect, but when I check it again in Microsoft Edge, the video doesn’t fill the page, it isn’t resizing, there’s a weird border happening on both sides. I’ve attached a screenshot of what it looks like in MS-Edge.
If you have any suggestions, please let me know. The codes are below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="">
<meta name="author" content="">
<title>Arks Digital Marketing</title>
<link rel= "stylesheet" href="style.css" />
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="video.mp4" type="video/mp4">
Video not supported
</video>
</div>
<div class="div2 absolute">
<nav class="animated fadeInDown">
<div class="toggle">
<i class="fas fa-bars"></i>
</div>
</nav>
<a class= "aimg" href="Index.html">
<img src="logo.png" alt="logo" class="logo">
<a href="ServicesOffered.html">Services Offered</a>
<a href="Blogs.html">Blogs</a>
<a href="AboutUs.html">About Us</a>
<a href="PartnerWithUs.html">Partner with Us</a>
</nav>
</div>
<div class="content">
<h1>Arks Digital Marketing</h1>
<p>Helping businesses reach new levels of growth!</p>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1000%;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
background-color: rgba(0,0,0,0.3);
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 20%;
margin-bottom: 10px;
z-index: -10000;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
.logo {
width: 10%;
margin-left: 6%;
margin-right: 25%;
}
#services-offered{
border-bottom: 6px solid #ff9d00;
border-radius: 22%;
}
#blogs{
border-bottom: 6px solid #ff9d00;
border-radius: 22%;
}
#AboutUs{
border-bottom: 6px solid #ff9d00;
border-radius: 22%;
}
#PartnerWithUs{
border-bottom: 6px solid #ff9d00;
border-radius: 22%;
}
a {
text-decoration: none;
font-size: 2vh;
font-size: 2.3vw;
font-family: 'Freestyle Script';
font-weight: 900;
margin-right: 5%;
color: rgb(210, 21, 84);
padding-bottom: 0.2%;
}
a:hover{
border-bottom: 6px solid #ff9d00;
border-radius: 22%;
color: #ff9d00;
}
.aimg:hover {
border-bottom: none;
}
.absolute {
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
}
.toggle {
width: 100%;
padding: 10px 20px;
background: #001f44;
text-align: right;
box-sizing: border-box;
color: #fff;
font-size: 30px;
display: none;
}
nav.animated.fadeInDown{
background-color: RGBA(0,0,0,0.2);
position: fixed;
padding: 75px 711px;
}
@media (max-width:768px)
{
.toggle
{
display: block;
}
a{
width: 100%;
}