Tanveer Ahmed margin0 pedding0 body fontfamilycalibri san

<!DOCTYPE html>
<html>
<head>
   <title>Tanveer Ahmed</title>
   <style type=\"text/css\">
*{
margin:0;
pedding: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 {
position:absolute;
top:0;
left:0;
min-height: 100%;
min-width: 100%
}
.content {
position: absolute;
width:100%;
min-height:100%;
z-index:1000;
  
}
.content h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
font-weight: 300;
color:black;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 20px;
  
letter-spacing: 3px;
color:black;

}
.content img {
border-image-width: 20px;
}

  

  
}
   </style>

</head>
<body>

<div class=\"background-wrap\">
<video id=\"video-bg-elm\" preload=\"auto\" autoplay=\"true\" loop=\"loop\" muted=\"muted\" >
<source src=\"video.mp4\" type=\"video/mp4\">
video not supported
</video>


</div>

<div class=\"content\">


<h1> Beneath The Surface </h1>
<p>Let\'s see the world <a href=\"https://www.youtube.com/watch?v=vlDzYIIOYmM\" target=\"_blank\"> Together </a>
</p>

<a href=\"https://www.facebook.com/shahriar.mahfuz\" target=\"_blank\">
<img src=\"facebook.png\">
</a>
<a href=\"https://twitter.com/?lang=en\" target=\"_blank\">
<img src=\"twitter.png\">
</a>
  


</div>


</body>

</html>

how can I embed those social media icons in the middle and underneath the paragraph. also how can i embed a youtube video in the bottom right corner? please provide the optimized code for this.

Solution

<!DOCTYPE html>
<html>
<head>
    <title>Tanveer Ahmed</title>
    <style type=\"text/css\">
*{
    margin:0;
    pedding: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 {
    position:absolute;
    top:0;
    left:0;
    min-height: 100%;
    min-width: 100%
}

.content {
    position: absolute;
    width:100%;
    min-height:100%;
    z-index:1000;
}

    .content #ytvideo{

      position: absolute;
      bottom: 5em;
      right: 5em;
    }
.content h1 {
    text-align: center;
    font-size: 65px;
    text-transform: uppercase;
    font-weight: 300;
    color:black;
    padding-top: 15%;
    margin-bottom: 10px;
}

.content p {
    text-align: center;
    font-size: 20px;
    letter-spacing: 3px;
    color:black;
   }

   .content img {
    border-image-width: 20px;
   }
}
</style>

</head>
<body>

   <div class=\"background-wrap\">
    <video id=\"video-bg-elm\" preload=\"auto\" autoplay=\"true\" loop=\"loop\" muted=\"muted\" >
    <source src=\"video.mp4\" type=\"video/mp4\">
    video not supported
    </video>

   </div>

   <div class=\"content\">


   <h1> Beneath The Surface </h1>
      <p>Let\'s see the world <a href=\"https://www.youtube.com/watch?v=vlDzYIIOYmM\" target=\"_blank\"> Together </a>
      </p>
    <br/></br/>
   <center>
    <img src=\"facebook.png\" style=\"height:3em;\">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <a href=\"https://twitter.com/?lang=en\" target=\"_blank\">
    <img src=\"twitter.png\" style=\"height:3em;\">
</a>
    </center>
    <iframe id=\"ytvideo\" width=\"420\" height=\"315\" src=\"https://www.youtube.com/embed/vlDzYIIOYmM\"></iframe>
    <a href=\"https://www.facebook.com/shahriar.mahfuz\" target=\"_blank\">
</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <title>Tanveer Ahmed</title> <style type=\
<!DOCTYPE html> <html> <head> <title>Tanveer Ahmed</title> <style type=\
<!DOCTYPE html> <html> <head> <title>Tanveer Ahmed</title> <style type=\
<!DOCTYPE html> <html> <head> <title>Tanveer Ahmed</title> <style type=\

Get Help Now

Submit a Take Down Notice

Tutor
Tutor: Dr Jack
Most rated tutor on our site