Hi, I’m a new web-designer still getting my feet wet. I’d love to get some pointers in my venture.
I’ve created a page with full-screen video background with a responsive menu. My hover links are now all over the place. I was trying to right-align my menu links by adding padding and now the hover link is also as big as the space between them. I’ve messed around with it a lot in Chrome and now I think I’m just making things worse.
My nav bar is somehow not covering my logo, it’s also making me tired fixing the nav bar so many times.
And in Microsoft Edge I’m getting a weird border around the page. Can someone please help me?
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Arks Digital Marketing</title>
<meta name="viewport" content="device-width", initial-scale=1, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay loop="loop" muted="muted">
<source src="video.mp4" type="video/mp4">
Video not supported
</video>
</div>
<nav>
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<ul>
<a class= "aimg" href="Index.html">
<img src="logo.png" alt="Arks Digital Marketing" class="logo">
<li><a href="Services.html">Services</a></li>
<li><a href="Blogs.html">Blogs</a></li>
<li><a href="AboutUs.html">About Us</a></li>
<li><a href="PartnerWithUs.html">Partner with Us</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu').click(function(){
$('ul').toggleClass('active');
})
})
</script>
<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;
}
nav {
width: 100%;
background-color: RGBA(0,0,0,0.2);
z-index: 10000;
padding-top: 50px;
}
ul {
width: 100%;
margin: 0 auto;
padding: 0;
text-align: right;
}
ul li {
list-style: none;
display: inline-block;
padding: 7px;
}
ul li:hover {
border-bottom: 6px solid #ff9d00;
border-radius: 22%;
color: #ff9d00;
padding: 7px;
}
ul li a {
text-decoration: none;
font-size: 2vh;
font-size: 2.3vw;
font-family: 'Freestyle Script';
font-weight: 900;
color: rgb(210, 21, 84);
padding-bottom: 0.2%;
}
.toggle {
width: 100%;
padding: 10px 20px;
background-color: RGBA(0,0,0,0.2);
text-align: right;
box-sizing: border-box;
color: #fff;
font-size: 30px;
display: none;
}
@media (max-width: 768px)
{
.toggle
{
display: block;
}
ul
{
width: 100%;
display: none;
}
ul li
{
display: block;
text-align: center;
}
.active
{
display: block;
}
}
.background-wrap {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: -1000;
}
#video-bg-elem {
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.logo {
position: absolute;
width: 10%;
top: 60px;
left: -10px;
margin-left: 6%;
margin-right: 20%;
margin-top: -5%;
}
#services{
border-bottom: 6px solid rgb(210, 21, 84);
border-radius: 22%;
}
#PartnerWithUs{
border-bottom: 6px solid rgb(210, 21, 84);
border-radius: 22%;
}
#blogs{
border-bottom: 6px solid rgb(210, 21, 84);
border-radius: 22%;
}
#AboutUs{
border-bottom: 6px solid rgb(210, 21, 84);
border-radius: 22%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
margin-top: 5%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
letter-spacing: 3px;
color: #aaa;
}
