<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Header, Body, Footer, background image</title>
<style>
* {box-sizing: border-box;}
body, html {
height: 100%;
min-height: 100vh;
margin: 0;
position: relative;
font-family: Times New Roman;
background: linear-gradient(#ffffff, #ff8cc4) fixed;
background-repeat: no-repeat;
padding-bottom: 30px;
}
.header {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://pbs.twimg.com/media/EwXqfRlVoAEM0zz?format=jpg&name=large");
height: 45%;
background-position: 55% 29.5%;
background-repeat: no-repeat;
position: relative;
}
.header-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 30px
}
.topnav {
overflow: hidden;
background-color: #ff9cbd;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #f779b6;
color: black;
}
.topnav a.active {
background-color: #d10065;
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
#container {
min-height: 100%;
#main {
overflow: auto;
padding-bottom: 100px;
h1 {
font-size: 80px;
}
h3 {
margin-top: -55px;
font-size: 30px;
}
p {
margin-left: 100px;
margin-right: 100px;
margin-bottom: 70px;
text-align: justify;
}
#footer {
position: relative;
height: 100px;
margin-top: -100px;
clear: both;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="https://ravenrose73.weebly.com/about.html" target="https://ravenrose73.weebly.com/about.html">About</a>
<a href="https://ravenrose73.weebly.com/contact.html" target="https://ravenrose73.weebly.com/contact.html">Contact</a>
<input type="text" placeholder="Search...">
</div>
<div class="header">
<hr width="1347" color="#ff007b" style="margin-top: 0px; size: 10px;" >
<div class="header-text">
<h1 style="font-family: Monotype Corsiva">♦Vanhl's Website ♦</h1>
<h3 style="font-family: Monotype Corsiva; margin-top: -30px;">Welcome to Vanhl's Website!</h3>
</div>
</div>
<div id="container">
<div id="main">
<hr width="1347" color="#ff007b" style="margin-top: 0px; size: 10px;" >
<a href="https://scontent.fmnl8-2.fna.fbcdn.net/v/t1.15752-9/p1080x2048/161170599_248579716924107_2812419539473435893_n.png?_nc_cat=109&ccb=1-3&_nc_sid=ae9488&_nc_ohc=HzYbfWpyRgcAX9XxAgJ&_nc_ht=scontent.fmnl8-2.fna&_nc_tp=30&oh=54482128ebd0e6f558ca4820af6b81f2&oe=60771576" target="_blank">
<img src="https://scontent.fmnl8-2.fna.fbcdn.net/v/t1.15752-9/p1080x2048/161170599_248579716924107_2812419539473435893_n.png?_nc_cat=109&ccb=1-3&_nc_sid=ae9488&_nc_ohc=HzYbfWpyRgcAX9XxAgJ&_nc_ht=scontent.fmnl8-2.fna&_nc_tp=30&oh=54482128ebd0e6f558ca4820af6b81f2&oe=60771576" alt="Vanhl" title="Vanhl" style="float:right;width:437px;height:625.5px;margin-right:100px;" hspace="15" vspace="15">
</a>
<h2 style="font-size: 30px;margin-left: 100px;font-family: Monotype Corsiva;"> Hello! My name is Vanhl (Va-ahl). </h2>
<p style="margin-left: 100px; margin-right: 100px; text-align: justify;"> I am Jil Paula Yago, a.k.a. "Vanhl" or "Raven Rose", and this website serves as an assignment for our Web Programming course subject. </p>
<p style="margin-left: 100px; margin-right: 100px; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id. Nascetur ridiculus mus mauris vitae ultricies leo integer. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lectus magna fringilla urna porttitor rhoncus dolor. Mauris pellentesque pulvinar pellentesque habitant morbi. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Rhoncus urna neque viverra justo nec. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Habitasse platea dictumst quisque sagittis purus. Iaculis at erat pellentesque adipiscing commodo elit. Vitae congue eu consequat ac. Mi sit amet mauris commodo quis imperdiet massa tincidunt. Enim lobortis scelerisque fermentum dui. Enim blandit volutpat maecenas volutpat blandit.
<br> <br> Nibh tortor id aliquet lectus proin nibh. Consequat mauris nunc congue nisi. Etiam dignissim diam quis enim lobortis. Eu nisl nunc mi ipsum faucibus. Magna fermentum iaculis eu non diam phasellus vestibulum lorem. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Nam at lectus urna duis convallis convallis tellus id. Arcu risus quis varius quam quisque id diam vel quam. Sapien faucibus et molestie ac feugiat sed. Sit amet facilisis magna etiam. Etiam dignissim diam quis enim lobortis.
<br> <br> Elit eget gravida cum sociis natoque penatibus et magnis. Vitae semper quis lectus nulla at volutpat diam. Massa sapien faucibus et molestie ac feugiat sed. Tempus imperdiet nulla malesuada pellentesque. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Nunc sed augue lacus viverra vitae congue eu. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Tellus id interdum velit laoreet id donec. Non consectetur a erat nam at lectus urna duis. Etiam tempor orci eu lobortis elementum nibh tellus molestie. At erat pellentesque adipiscing commodo elit at. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Nibh tellus molestie nunc non blandit massa enim. Velit scelerisque in dictum non consectetur a erat nam at. Id eu nisl nunc mi ipsum faucibus.
<br> <br> Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Amet facilisis magna etiam tempor. Lorem mollis aliquam ut porttitor leo a. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Senectus et netus et malesuada. Varius duis at consectetur lorem. Feugiat in ante metus dictum at tempor. Purus non enim praesent elementum facilisis leo. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. In hendrerit gravida rutrum quisque non tellus orci. Ut lectus arcu bibendum at varius vel pharetra. Tristique magna sit amet purus gravida quis blandit turpis cursus. Aliquam sem fringilla ut morbi tincidunt augue interdum. Tortor condimentum lacinia quis vel. Mattis aliquam faucibus purus in massa tempor. Nisl purus in mollis nunc sed id. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus.
<br> <br> Vitae congue mauris rhoncus aenean vel elit. Egestas integer eget aliquet nibh praesent tristique magna. Elementum curabitur vitae nunc sed velit dignissim. Libero justo laoreet sit amet cursus sit amet dictum sit. Commodo quis imperdiet massa tincidunt. Ornare massa eget egestas purus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Vitae tortor condimentum lacinia quis vel eros. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. At tellus at urna condimentum. Nulla aliquet porttitor lacus luctus accumsan. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Ultricies integer quis auctor elit sed vulputate mi.. </p>
<br> <br>
</div>
</div>
<footer id="footer" style="background-color: #520027;padding: 20px;">
<p style="margin-left: 65px;color:#ffffff;"> Vanhl's portfolios: </p>
<a href="https://jpgyago-mmaeducworks.weebly.com/" style= "margin-left:70px;color: #ffffff;"> ♦ Visit JPGY MMA Works! </a> <br>
<a href="https://ravenrose73.weebly.com/" style= "margin-left:70px;color: #ffffff;"> ♦ Visit Vanhl's Portfolio! </a> <br> <br> <br>
</footer>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Header, Body, Footer, background image</title>
<style>
* {box-sizing: border-box;}
body, html {
height: 100%;
min-height: 100vh;
margin: 0;
position: relative;
font-family: Times New Roman;
background: linear-gradient(#ffffff, #ff8cc4) fixed;
background-repeat: no-repeat;
padding-bottom: 30px;
}
.header {
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://pbs.twimg.com/media/EwXqfRlVoAEM0zz?format=jpg&name=large");
height: 45%;
background-position: 55% 29.5%;
background-repeat: no-repeat;
position: relative;
}
.header-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 30px
}
.topnav {
overflow: hidden;
background-color: #ff9cbd;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #f779b6;
color: black;
}
.topnav a.active {
background-color: #d10065;
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
#container {
min-height: 100%;
#main {
overflow: auto;
padding-bottom: 100px;
h1 {
font-size: 80px;
}
h3 {
margin-top: -55px;
font-size: 30px;
}
p {
margin-left: 100px;
margin-right: 100px;
margin-bottom: 70px;
text-align: justify;
}
#footer {
position: relative;
height: 100px;
margin-top: -100px;
clear: both;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="https://ravenrose73.weebly.com/about.html" target="https://ravenrose73.weebly.com/about.html">About</a>
<a href="https://ravenrose73.weebly.com/contact.html" target="https://ravenrose73.weebly.com/contact.html">Contact</a>
<input type="text" placeholder="Search...">
</div>
<div class="header">
<hr width="1347" color="#ff007b" style="margin-top: 0px; size: 10px;" >
<div class="header-text">
<h1 style="font-family: Monotype Corsiva">♦Vanhl's Website ♦</h1>
<h3 style="font-family: Monotype Corsiva; margin-top: -30px;">Welcome to Vanhl's Website!</h3>
</div>
</div>
<div id="container">
<div id="main">
<hr width="1347" color="#ff007b" style="margin-top: 0px; size: 10px;" >
<a href="https://scontent.fmnl8-2.fna.fbcdn.net/v/t1.15752-9/p1080x2048/161170599_248579716924107_2812419539473435893_n.png?_nc_cat=109&ccb=1-3&_nc_sid=ae9488&_nc_ohc=HzYbfWpyRgcAX9XxAgJ&_nc_ht=scontent.fmnl8-2.fna&_nc_tp=30&oh=54482128ebd0e6f558ca4820af6b81f2&oe=60771576" target="_blank">
<img src="https://scontent.fmnl8-2.fna.fbcdn.net/v/t1.15752-9/p1080x2048/161170599_248579716924107_2812419539473435893_n.png?_nc_cat=109&ccb=1-3&_nc_sid=ae9488&_nc_ohc=HzYbfWpyRgcAX9XxAgJ&_nc_ht=scontent.fmnl8-2.fna&_nc_tp=30&oh=54482128ebd0e6f558ca4820af6b81f2&oe=60771576" alt="Vanhl" title="Vanhl" style="float:right;width:437px;height:625.5px;margin-right:100px;" hspace="15" vspace="15">
</a>
<h2 style="font-size: 30px;margin-left: 100px;font-family: Monotype Corsiva;"> Hello! My name is Vanhl (Va-ahl). </h2>
<p style="margin-left: 100px; margin-right: 100px; text-align: justify;"> I am Jil Paula Yago, a.k.a. "Vanhl" or "Raven Rose", and this website serves as an assignment for our Web Programming course subject. </p>
<p style="margin-left: 100px; margin-right: 100px; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis pellentesque id. Nascetur ridiculus mus mauris vitae ultricies leo integer. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lectus magna fringilla urna porttitor rhoncus dolor. Mauris pellentesque pulvinar pellentesque habitant morbi. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Rhoncus urna neque viverra justo nec. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Habitasse platea dictumst quisque sagittis purus. Iaculis at erat pellentesque adipiscing commodo elit. Vitae congue eu consequat ac. Mi sit amet mauris commodo quis imperdiet massa tincidunt. Enim lobortis scelerisque fermentum dui. Enim blandit volutpat maecenas volutpat blandit.
<br> <br> Nibh tortor id aliquet lectus proin nibh. Consequat mauris nunc congue nisi. Etiam dignissim diam quis enim lobortis. Eu nisl nunc mi ipsum faucibus. Magna fermentum iaculis eu non diam phasellus vestibulum lorem. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Nam at lectus urna duis convallis convallis tellus id. Arcu risus quis varius quam quisque id diam vel quam. Sapien faucibus et molestie ac feugiat sed. Sit amet facilisis magna etiam. Etiam dignissim diam quis enim lobortis.
<br> <br> Elit eget gravida cum sociis natoque penatibus et magnis. Vitae semper quis lectus nulla at volutpat diam. Massa sapien faucibus et molestie ac feugiat sed. Tempus imperdiet nulla malesuada pellentesque. Porttitor leo a diam sollicitudin tempor id eu nisl nunc. Nunc sed augue lacus viverra vitae congue eu. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Tellus id interdum velit laoreet id donec. Non consectetur a erat nam at lectus urna duis. Etiam tempor orci eu lobortis elementum nibh tellus molestie. At erat pellentesque adipiscing commodo elit at. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Nibh tellus molestie nunc non blandit massa enim. Velit scelerisque in dictum non consectetur a erat nam at. Id eu nisl nunc mi ipsum faucibus.
<br> <br> Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Amet facilisis magna etiam tempor. Lorem mollis aliquam ut porttitor leo a. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Senectus et netus et malesuada. Varius duis at consectetur lorem. Feugiat in ante metus dictum at tempor. Purus non enim praesent elementum facilisis leo. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. In hendrerit gravida rutrum quisque non tellus orci. Ut lectus arcu bibendum at varius vel pharetra. Tristique magna sit amet purus gravida quis blandit turpis cursus. Aliquam sem fringilla ut morbi tincidunt augue interdum. Tortor condimentum lacinia quis vel. Mattis aliquam faucibus purus in massa tempor. Nisl purus in mollis nunc sed id. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus.
<br> <br> Vitae congue mauris rhoncus aenean vel elit. Egestas integer eget aliquet nibh praesent tristique magna. Elementum curabitur vitae nunc sed velit dignissim. Libero justo laoreet sit amet cursus sit amet dictum sit. Commodo quis imperdiet massa tincidunt. Ornare massa eget egestas purus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Vitae tortor condimentum lacinia quis vel eros. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. At tellus at urna condimentum. Nulla aliquet porttitor lacus luctus accumsan. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Ultricies integer quis auctor elit sed vulputate mi.. </p>
<br> <br>
</div>
</div>
<footer id="footer" style="background-color: #520027;padding: 20px;">
<p style="margin-left: 65px;color:#ffffff;"> Vanhl's portfolios: </p>
<a href="https://jpgyago-mmaeducworks.weebly.com/" style= "margin-left:70px;color: #ffffff;"> ♦ Visit JPGY MMA Works! </a> <br>
<a href="https://ravenrose73.weebly.com/" style= "margin-left:70px;color: #ffffff;"> ♦ Visit Vanhl's Portfolio! </a> <br> <br> <br>
</footer>
</body>
</html>