I'm a beginner at web design and just tackled at designing my own website. I'm a graphic designer and designed a mock-up of what I want the site to look like. I got most of it done except for this part I got stuck on, getting my < h1 > header to remain on top of my < h2 > header.Both of these headers are on top of a video background playing in a loop. Right now they are side by side. I also wanted to add a horizontal line between the two headers - part of my design. Below are my HTML & CSS codes. I also attached an image of my design vs what I have now. Thank you in advance.
Also if anyone has any tips for me or know the best video tutorials that can help me, i'd greatly appreciate it. Thanks!
The H1 & H2 are in the class=section under "Video Section".
CSS Code & HTML
@font-face{
src: url(fonts/KeepCalm-Medium.ttf);
font-family: keepcalm;}
@font-face{
src: url(fonts/GOTHIC.TTF);
font-family: centurygothic;}
body {
margin: 0px;
padding: 0px;}
/**Video Section**/
.section {
position: relative;
text-transform: uppercase;
width: 100%;
height: 534px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;}
.section h1 {
text-align: center;
justify-content: center;
height: 108px;
width:342px;
font-family: keepcalm;
font-size:36px;
color: #ffffff;
font-weight:500;
line-height: 60px;
transform: scale(1.189,1.189);
letter-spacing: 15px;
margin: 0px;
padding: 0px;
z-index: 1; }
.section span { font-size: 48px;}
hr {
display: block;
z-index: 1;}
.section h2{
width: 181px;
height: 22px;
font-family: centurygothic;
color: #ffffff;
font-size:35px;
font-weight: 400;
letter-spacing: 9px;
z-index:2;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;}
/*Topbar Section*/
.topbar {
margin: 0px;
}
.topbar {
background-color: #e8e8e8;
font-family: KeepCalm;
font-size: 14px;
align-items:flex-start;
color: #000000;
list-style: none;
text-decoration: none;
text-align: left;
padding: 0px 0 0px 70px;}
.topbar > li {
display: inline-block;
padding: 0 20px 0 20px;}
.topbar > li > a {
text-decoration: none;
color: #000000;}
.phone {
width:20px;
padding: 4px 0 0px 4px }
.mail {
height: 14px;
}
/**Logo Section**/
.logo{
float:left;
padding-bottom: 10px;
padding-left: 20px;}
/**Logo Text**/
.logotext {
font-size: 14px;
position: absolute;
left: 140px;
font-family: KeepCalm;
float:left;
padding-bottom: 10px;
}
.logotext span {
font-size: 14px;
display: block;
line-height: 14px;
font-family: CenturyGothic;
font-weight: 400;
}
.logotext span span {
font-size: 14px;
display: inline;
line-height: 14px;
font-family: CenturyGothic;
font-weight: 400;
background: #e8e8e8;
}
/*Navigation Responsive*/
.selector-for-some-widget {
box-sizing: content-box;}
.nav-item {
background-color: #fff;
font-family: KeepCalm;
font-size: 14px;
align-items:flex-start;
color: #000000;
list-style: none;
text-align: right;
padding: 20px 0 20px 0px;}
.nav-item {
display: inline-block;
padding: 0 20px 0 20px;}
.nav-item {
text-decoration: none;
color: #000000;}
.navbar-light .navbar-nav .nav-item .nav-link:hover {
color: #e8e8e8;}
/*Topbar & Navigation Responsive*/
@media (max-width: 768px){
.logo{
width:5em;
padding-bottom: 1px;
padding-left: 0px;
}
.logotext {
font-size: 0.7em;
line-height: 9pt;
padding-bottom: 1px;
padding-right: 100px;}
.logotext span {
line-height: 9pt;
font-size: 0.8em;
}
.logotext span span {
background: #FFFFFF;
font-size: 1em;
}
.video-container {display: none;}
}
@media (max-width: 580px){
.mail{width: 0px;}
.hotmail{font-size: 0px;}
.video-container {display: none;}
}
@media (max-width: 350px){
.topbar {font-size: 0px;}
.phone{ width:0px;}
.mail {display: 0px;}
.logotext { font-size: 0px;}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="testtry.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>testtry</title>
</head>
<body>
<!--Topbar-->
<div class="topbar">
<ul class="topbar">
<img src="Images/phone.png" alt="Call me at" class="phone">
<li class="topbar topbartext">416-948-2164</li>
<img src="mail1.png" alt="Email me at" class="mail">
<li class="hotmail"><a href="">[email protected]</a></li>
</ul>
</div>
<!--Navbar Responsive-->
<div class="Navcontainer">
<nav class="navbar navbar-expand-lg navbar-light">
<a href="#"><img src="Logo1.png" alt="Micaela Butron Logo" class="logo"></a>
<h1 class="logotext">
I'm Micaela Butron.
<span>an <span>Urban Designer</span>, + Graphic Designer.</span>
</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item active"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item active"><a class="nav-link active" href="#">Resume</a></li>
<li class="nav-item active"><a class="nav-link active" href="#">Portfolio</a></li>
<li class="nav-item active"><a class="nav-link active" href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!--VideoSection-->
<div class="section">
<h1>Micaela <span>Butron</span></h1>
<h2>Designer</h2>
<div class="video-container">
<video autoplay loop muted>
<source src="Images/Videos/Video.mp4" type="video/mp4">
</video>
</div>
</div>
<!--Bootstrap Javascript Link-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html> <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="testtry.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>testtry</title>
</head>
<body>
<!--Topbar-->
<div class="topbar">
<ul class="topbar">
<img src="Images/phone.png" alt="Call me at" class="phone">
<li class="topbar topbartext">416-948-2164</li>
<img src="mail1.png" alt="Email me at" class="mail">
<li class="hotmail"><a href="">[email protected]</a></li>
</ul>
</div>
<!--Navbar Responsive-->
<div class="Navcontainer">
<nav class="navbar navbar-expand-lg navbar-light">
<a href="#"><img src="Logo1.png" alt="Micaela Butron Logo" class="logo"></a>
<h1 class="logotext">
I'm Micaela Butron.
<span>an <span>Urban Designer</span>, + Graphic Designer.</span>
</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item active"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item active"><a class="nav-link active" href="#">Resume</a></li>
<li class="nav-item active"><a class="nav-link active" href="#">Portfolio</a></li>
<li class="nav-item active"><a class="nav-link active" href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!--VideoSection-->
<div class="section">
<div>
<h1>Micaela <span>Butron</span></h1>
</div>
<hr>
<span class="line"></span>
<h2>Designer</h2>
<div class="video-container">
<video autoplay loop muted>
<source src="Images/Videos/Video.mp4" type="video/mp4">
</video>
</div>
</div>
<!--Bootstrap Javascript Link-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
CSS
@font-face{
src: url(fonts/KeepCalm-Medium.ttf);
font-family: keepcalm;}
@font-face{
src: url(fonts/GOTHIC.TTF);
font-family: centurygothic;}
body {
margin: 0px;
padding: 0px;}
hr{
border-top-color: black;
}
/**Video Section**/
.section {
position: relative;
text-transform: uppercase;
width: 100%;
height: 534px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-direction: column;
}
.section h1 {
text-align: center;
justify-content: center;
height: 108px;
width:342px;
font-family: keepcalm;
font-size:36px;
color: #000;
font-weight:500;
line-height: 60px;
transform: scale(1.189,1.189);
letter-spacing: 15px;
margin: 0px;
padding: 0px;
z-index: 1;
display: block;
padding-bottom: 150px;
}
hr{
border-top: 1px solid red !important;
}
.section span { font-size: 48px;}
/* hr {
display: block;
z-index: 1;} */
.section h2{
width: 181px;
height: 22px;
font-family: centurygothic;
color: #000;
font-size:35px;
font-weight: 400;
letter-spacing: 9px;
z-index:2;
display: block;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;}
/*Topbar Section*/
.topbar {
margin: 0px;
}
.topbar {
background-color: #e8e8e8;
font-family: KeepCalm;
font-size: 14px;
align-items:flex-start;
color: #000000;
list-style: none;
text-decoration: none;
text-align: left;
padding: 0px 0 0px 70px;}
.topbar > li {
display: inline-block;
padding: 0 20px 0 20px;}
.topbar > li > a {
text-decoration: none;
color: #000000;}
.phone {
width:20px;
padding: 4px 0 0px 4px }
.mail {
height: 14px;
}
/**Logo Section**/
.logo{
float:left;
padding-bottom: 10px;
padding-left: 20px;}
/**Logo Text**/
.logotext {
font-size: 14px;
position: absolute;
left: 140px;
font-family: KeepCalm;
float:left;
padding-bottom: 10px;
}
.logotext span {
font-size: 14px;
display: block;
line-height: 14px;
font-family: CenturyGothic;
font-weight: 400;
}
.logotext span span {
font-size: 14px;
display: inline;
line-height: 14px;
font-family: CenturyGothic;
font-weight: 400;
background: #e8e8e8;
}
/*Navigation Responsive*/
.selector-for-some-widget {
box-sizing: content-box;}
.nav-item {
background-color: #fff;
font-family: KeepCalm;
font-size: 14px;
align-items:flex-start;
color: #000000;
list-style: none;
text-align: right;
padding: 20px 0 20px 0px;}
.nav-item {
display: inline-block;
padding: 0 20px 0 20px;}
.nav-item {
text-decoration: none;
color: #000000;}
.navbar-light .navbar-nav .nav-item .nav-link:hover {
color: #e8e8e8;}
/*Topbar & Navigation Responsive*/
@media (max-width: 768px){
.logo{
width:5em;
padding-bottom: 1px;
padding-left: 0px;
}
.logotext {
font-size: 0.7em;
line-height: 9pt;
padding-bottom: 1px;
padding-right: 100px;}
.logotext span {
line-height: 9pt;
font-size: 0.8em;
}
.logotext span span {
background: #FFFFFF;
font-size: 1em;
}
.video-container {display: none;}
}
@media (max-width: 580px){
.mail{width: 0px;}
.hotmail{font-size: 0px;}
.video-container {display: none;}
}
@media (max-width: 350px){``
.topbar {font-size: 0px;}
.phone{ width:0px;}
.mail {display: 0px;}
.logotext { font-size: 0px;}
}