<!DOCTYPE html> <html> <head> <title>Tanveer Ahmed</title> <style type=\"text/cs
ID: 3778062 • Letter: #
Question
<!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.
Explanation / Answer
<!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">
</a>
<a href="https://twitter.com/?lang=en" target="_blank">
<img src="twitter.png">
</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>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.