I am currently attempting to increase the width of the back-drop filler effect and I am confused on how to do it. The first picture is what I have and the second is what it should look like. I feel it possibly has something to do with increasing the width and height of my nav but when I tried it didn't work out. Could also have something to do with the fact I used absolute with the nav instead of using float but im so copnfused. Thanks.
This is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellefair&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
This is the CSS code
body {
background-image: url(assets/home/background-home-desktop.jpg);
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
}
Hello i have rewrite your code to make an clean code on my version.
body {
background-color: black;
}
.wrapper_navbar {
display: flex;
flex-direction:row;
align-items: center;
}
.logo_navbar {
display: flex;
}
.img_logo {
width: 60px;
height: 60px;
}
hr {
width: 100%;
display: inline-block;
top: 75px;
}
.hr_line{
display:flex;
flex:auto;
}
.navbar {
display: flex;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
padding: 10px 17px;
justify-content: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
text-decoration: none;
color: #ccc;
}
li a {
display: block;
padding: 8px;
}
.item_nav {
margin: 0 5px;
}
<div class="wrapper_navbar">
<div class="logo_navbar">
<div class="logo">
<img src="https://img1.pngdownload.id/20171220/dxq/google-png-5a3aafee6ff5c8.9595681415137955664586.jpg" class="img_logo" />
</div>
</div>
<div class="hr_line">
<hr />
</div>
<div class="navbar">
<ul>
<li class="item_nav">Item 1</li>
<li class="item_nav">Item 2</li>
<li class="item_nav">Item 3</li>
</ul>
</div>
</div>
https://jsfiddle.net/dimaswahyu/ntg09e5b/86/
Here's a simple explanation. Every picture paints a thousand words...
Related
I'm trying to remove the space on top right on corner next to "Contact Me" And I can't figure out why it's there. I tried pushing it there but it still doesn't work. I'm still new and trying to learn.
Code:
body{
font-family: 'Poppins', sans-serif;
margin: 0;
overflow-y: hidden;
overflow-x: hidden;
}
section {
background-color: gray;
}
.hero {
background-color: #1c1d25;
height: 100vh;
color: white;
font-size: 40px;
}
nav {
display: flex;
justify-content: space-between;
}
ul {
display: flex;
list-style-type: none;
width: 500px;
justify-content: space-around;
font-size: 20px;
}
li {
text-decoration: none;
}
h1 {
font-size: 90px;
margin: 0;
}
p{
margin: 0;
font-size: 30px;
font-weight: 300;
}
.logo {
height: 100px;
margin: 30px;
}
.home {
text-decoration: none;
color: white;
}
.myw {
text-decoration: none;
color: white;
}
.cm {
text-decoration: none;
color: white;
}
.logo2{
width: 400px;
position: relative;
margin-top: 200px;
margin-left: -200px;
border: 5px dotted purple;
}
p {
display: flex;
font-family: 'Poppins', sans-serif;
font-size: 1.5vw;
position: absolute;
left: 40vw;
bottom: 40vh;
width:50%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="src/aboutMeStyle.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Poppins&display=swap" rel="stylesheet">
<title>About Me</title>
<meta charset="UTF-8">
</head>
<body>
<section class="hero">
<nav>
<img class="logo" src="images/pack.png" alt="Futsunohitos Logo">
<img class="logo2" src="images/32x_ava.png" alt="Futsunohitos Logo">
<div></div>
<ul>
<li> Home </li>
<li> My Work </li>
<li> Contact Me </li>
</ul>
<div class= "glow">
<p class="Description">Hello Im Oleg. Im 18 years old. I like to draw and make cool art. I take orders and can make you a custom avatar or anything you ask for. Ofcourse its gonna be really cheap I just want to start my own little business. I hope you enjoy my art (and maybe hire me). Have a great day!</p>
</div>
</nav>
<script>
"src/app.js"
</script>
</body>
</html>
You have justify-content: space-around; on flex ul that gives some space around the flex items.
justify-content: space-between might be something you are looking for.
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
I want the header which is position:fixed to not move when I put a margin on the #main section. I have seen to try and add padding to the top element, but that did not help. I even tried giving the #email-section some top-margin, but that did not work either. It's almost like the header and main elements are attached. I am a self-taught and self-learning website developer. I'm sorry if this does not make sense. I will try and help you out with any information you want to know about the code. Thank you.
body {
background: url(marble_background_backup.jpg);
}
header {
position: fixed;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
}
header #header-img {
width: 100px;
margin-left: 20px;
}
header h1 {
font-family: "Abril Fatface";
font-size: 42px;
margin-left: 2%;
width: 60%;
}
#media (max-width: 1550px) {
header h1 {
width: 40%;
}
}
header li {
display: inline;
font-size: 30px;
font-weight: 500;
font-family: "Abril Fatface";
}
header li a {
text-decoration: none;
color: brown;
}
#main {
width: 100%;
margin-top: 100px;
}
#main #email-section {
width: 20%;
margin: 0 auto;
text-align: center;
font-family: "Bebas Neue";
font-size: 30px;
}
#main #email-section h2 {
margin-bottom: 0px;
letter-spacing: 0.05em;
}
#main #email-section input {
width: auto;
margin: auto;
font-size: 20px;
margin-top: 15px;
border: 3px solid brown;
color: brown;
border-radius: 5px;
display: block;
}
#main #email-section input[type=submit] {
background-color: lightyellow;
}
#main #email-section input:hover, #main #email-section input:focus {
background-color: blanchedalmond;
}
#facts {
display: flex;
flex-direction: column;
width: 50%;
margin: 8% auto 0 auto;
font-size: 28px;
}
#facts .facts-boxes {
display: flex;
flex-direction: row;
margin: 3%;
}
#facts .facts-boxes img {
width: 100px;
margin-right: 5%;
}
#facts .facts-boxes #bean-pic {
border-radius: 50%;
}
#facts .liner {
width: 50%;
height: 6px;
background-color: brown;
margin: 0 0 0 auto;
padding: 0;
transform: skewX(-40deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/styler.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>Lion's Club Product Page</title>
</head>
<body>
<header>
<img id='header-img' src="lion1.png">
<h1>Lions Club Coffee House</h1>
<ul>
<li>| Learn</li>
<li> | Pricing</li>
<li> | About |</li>
</ul>
</header>
<main id="main">
<section id="email-section">
<h2>Know where your coffee comes From</h2>
<form action="#">
<input type="email" id="email" placeholder="Enter your email">
<input type="submit" id="submit" value="keep me informed">
</form>
</section>
<section id="facts">
<div class="facts-boxes"><img src="/plant.svg" alt="plant picture"><h3>Ethically sourced from trusted coffee farms</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/coffee_bean.jpg" id="bean-pic"><h3>New Varieties Weekly</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/trophy.svg"><h3>Trained Baristas inhouse</h3></div>
<hr class="liner">
<div class="facts-boxes"><img src="/medal_first.svg"><h3>Quality Unmatched</h3></div>
<hr class="liner">
</section>
set top:0; to your header
it will probably fixed, if not try adding another element with same height as your header... an empty div can help and it won't be visible because it will be under header only works as you want
The fixed <header> element is getting its default position based on the layout of the page (which includes the margins). If you want to explicitly specify its position, you can just do:
header {
top: 0;
}
I have a question. I am wondering how can I create a border that increases the width for my button on hover. I tried to create a border but what happened is it created a border on the inside of my button. The image shows what is supposed to happen. I began thinking it had something to with padding but even if that is the case I have no idea how I would go about doing it.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellefair&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
CSS code:
body {
background-image: url('../assets/home/background-home-desktop.jpg');
background-repeat: no-repeat;
background-size: cover;
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
width:250px;
height:250px;
border-radius: 50%;
border:none;
background-color:white;
font-family: 'Bellefair', serif;
font-size: 2rem;
font-weight: normal;
text-transform: uppercase;
}
.btn:hover {
}
You can use outline:
outline: 40px #25252e solid;
You mean like this??
body {
background-image: url('../assets/home/background-home-desktop.jpg');
background-repeat: no-repeat;
background-size: cover;
background-color: black;
color: #FFFFFF;
}
hr {
width: 40%;
display: inline-block;
position: absolute;
top: 75px;
}
a {
text-decoration: none;
}
h1 {
margin: 0;
font-size: 9.375rem;
font-family: 'Bellefair', serif;
text-transform: uppercase;
font-weight: normal;
}
h2 {
font-size: 6.25rem;
}
h3 {
font-size: 3.5rem;
font-family: 'Bellefair', serif;
font-weight: normal;
}
h4 {
font-size: 2rem;
font-family: 'Bellefair', serif;
}
h5 {
margin: 0 0 0 10px;
font-size: 1.75rem;
letter-spacing: 4.75px;
font-family: 'Barlow Condensed', sans-serif;
font-weight: normal;
color: #D0D6F9;
}
p {
width: 32%;
font-family: 'Barlow', sans-serif;
line-height: 2;
color: #D0D6F9;
}
.logo {
margin-right: 70px;
}
.top-logo {
margin: 53px 0 0 50px;
display: inline-block;
}
.nav > a {
color: grey;
margin-right: 40px;
}
.nav-number {
color: white;
margin-right: 8px;
}
.nav {
display: inline-block;
position: absolute;
top: 74px;
right: 230px;
background: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(1rem);
}
.description-container {
position: absolute;
bottom: 150px;
left: 150px;
}
.btn {
position: absolute;
bottom: 150px;
right: 150px;
width:250px;
height:250px;
border-radius: 50%;
border:none;
background-color:white;
font-family: 'Bellefair', serif;
font-size: 2rem;
font-weight: normal;
text-transform: uppercase;
}
.btn:hover {
outline:50px solid gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bellefair&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<title>Frontend Mentor | Space tourism website</title>
</head>
<body>
<div class="top-logo">
<img class="logo" src="assets/shared/logo.svg" alt="logo">
<hr>
</div>
<div class="nav">
<span class="nav-number">00</span>Home
<span class="nav-number">01</span>Destination
<span class="nav-number">02</span>Crew
<span class="nav-number">03</span>Technology
</div>
<div class="description-container">
<h5>So, you want to travel to</h5>
<h1>Space</h1>
<p>Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!</p>
</div>
<button class="btn">Explore</button>
</body>
</html>
I have made this website as a practice portfolio website for myself and my website is pushed to the left whenever its smaller than particular size. it used to be around 600px but I removed the whole code and rewrote the website again but I checked it at early phases and still suffers from this problem which I cant find the reason for it. so I stopped coding and came straight here for help.
please help me this is the third time I'm trying to build this website and still have this problem.
something else i noticed is that althoug i have scroll x hidden i still have this tiny scroll to left when resizing the website.enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: visible;
overflow-x: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
color: rgb(218, 214, 214);
font-family: "Montserrat", sans-serif;
font-size: 1rem;
}
/*NAVBAR----------------------------------------------------------------------------------------*/
.navbar {
width: 100vw;
height: auto;
font-family: "Poppins", sans-serif;
font-weight: 500;
padding: 7px;
background-color: rgba(85, 85, 85, 0.116);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.icon-list {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.icon-list li {
text-align: center;
margin: 0 15px;
}
.icon-list a {
text-decoration: none;
color: rgb(180, 148, 158);
}
.icon-list a:hover {
opacity: 0.7;
}
.images {
width: 40px;
height: 40px;
}
/*INFO---------------------------------------------------------------------------------*/
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px;
text-align: center;
}
.info p {
margin: 0 40px;
line-height: 20px;
}
.info h1 {
font-weight: 600;
color: rgb(177, 164, 164);
font-weight: 300;
margin-bottom: 5px;
}
.info h2 {
color: rgb(192, 184, 153);
font-weight: 400;
}
.info h3 {
color: crimson;
font-weight: 500;
margin-top: 30px;
margin-bottom: 10px;
}
.shadow {
width: 80vw;
background-color: rgba(34, 33, 33, 0.336);
padding: 10px;
border-radius: 10px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,600;0,700;0,800;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashkan Naeimipoor</title>
</head>
<link rel="stylesheet" href="./main.css">
<body>
<nav class="navbar">
<ul class="icon-list">
<li><img class="images" src="./images/navbar/home.png" alt=""><br>HOME</li>
<li><img class="images" src="./images/navbar/resume.png" alt=""><br>GET RESUME</li>
<li><img class="images" src="./images/navbar/about.png" alt=""><br>ABOUT</li>
<li><img class="images" src="./images/navbar/contact-book.png" alt=""><br>CONTACT</li>
</ul>
</nav>
<div class="container">
<div class="info">
<div class="shadow">
<h1>Ashkan Naeimipoor</h1>
<h2>Front-End Developer</h2>
<h3>Objective</h3>
<p>As a Front-End Developer, to be responsible for
producing high quality solutions for company customers; bringing growing understanding of Modern HTML, JavaScript, and CSS, and passionate ability to learn and develope
while working in the team of experts under a
skillful and talented management.</p>
</div>
</div>
</div>
</body>
</html>
Check your .info class, you are using 100px on padding. That's too large in smaller screen. You can reduce it using media query.
I'll also suggest changing .info class into:
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px 0;
text-align: center;
max-width: 1060px;
margin: 0 auto;
}
So everywhere i go to this code does something weird with the vertical scrollbar. If you know what it is tell me the error and how i can solve it.
The error is probably in the css but I included all the code just so you can take a look.
I'll just give all the code and you tell me what's wrong. Thx
I need to write some random words so I can post this.
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
#font-face {
font-family: 'watchmen';
src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: red;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#titletext {
font-family: watchmen;
color: #FEEE2E;
font-size: 6.5vw;
}
#logo_span {
color: #146EAD;
}
#linktotwo {
text-decoration: none;
color: #146EAD;
}
#title {
position: absolute;
width: 82vw;
height: 12vh;
text-align: center;
line-height: 12vh;
top: 50%;
left: 50%;
margin-top: -6vh;
margin-left: -41vw;
}
#one {
background-color: #030200;
background-size: cover;
width:100vw;
height: 100vh;
}
#two {
height: 100vh;
width: 100vw;
background-color: #0B4F77;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul > li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
position: absolute;
font-size: 48px;
left: 50%;
padding: 15px;
width: 600px;
height: 50vh;
margin-left: -316px;
overflow: hidden;
top: 150vh;
margin-top: -32vh;
background-color: #0A4366;
}
#flash {
color: #FF4500;
}
#bat {
color: #000;
}
#arrow {
color: green;
}
#manh {
color: #1580c1;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images > img {
width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<title>I Love DC Comics</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta name="description"
content="I just love DC Comics and I write some stuff on this Website"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jumpto.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">¤</a></span> COMICS!</p>
</div>
</div>
<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The <span id="flash">Flash</span></li>
<li><span id="bat">Batman</span></li>
<li><span id="arrow">Green</span> Arrow</li>
<li>Dr. <span id="manh">Manhattan</span></li>
</ul>
<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>
</div>
</div>
</body>
</html>
#one {
width: 100%;
}
#two {
width: 100%;
}
First of all vw is not the same as %. Have a look at this explanation:
Difference between Width:100% and width:100vw?
So you have to use % instead of vw and also I would give #fav box-sizing: border-box:
*::selection {
background: #333;
}
*::-moz-selection {
background: #333;
}
#font-face {
font-family: 'watchmen';
src: url('--watchmen---webfont.woff2') format('woff2'),url('--watchmen---webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-color: red;
font-family: 'Hind', sans-serif;
}
* {
padding: 0;
margin: 0;
}
#titletext {
font-family: watchmen;
color: #FEEE2E;
font-size: 6.5vw;
}
#logo_span {
color: #146EAD;
}
#linktotwo {
text-decoration: none;
color: #146EAD;
}
#title {
position: absolute;
width: 82vw;
height: 12vh;
text-align: center;
line-height: 12vh;
top: 50%;
left: 50%;
margin-top: -6vh;
margin-left: -41vw;
}
#one {
background-color: #030200;
background-size: cover;
width:100%;
height: 100vh;
}
#two {
height: 100vh;
width: 100%;
background-color: #0B4F77;
}
#favul {
list-style-type: decimal;
font-family: 'Josefin Sans', sans-serif;
padding-left: 8vw;
margin: 6.5vh auto;
}
#favul > li {
margin: 1vw 0;
}
#favtit {
text-align: center;
}
#fav {
border: 1px solid #000;
position: absolute;
font-size: 48px;
left: 50%;
padding: 15px;
width: 600px;
height: 50vh;
margin-left: -302px;
overflow: hidden;
top: 150vh;
margin-top: -32vh;
background-color: #0A4366;
box-sizing: border-box;
}
#flash {
color: #FF4500;
}
#bat {
color: #000;
}
#arrow {
color: green;
}
#manh {
color: #1580c1;
}
#images {
position: absolute;
bottom: 0%;
left: 0%;
}
#images > img {
width: 100%;
}
<html lang="en">
<!DOCTYPE html>
<html>
<head>
<title>I Love DC Comics</title>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<meta name="description"
content="I just love DC Comics and I write some stuff on this Website"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Hind:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jumpto.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="one">
<div id="title">
<p id="titletext">ONLY DC <span id="logo_span"><a id="linktotwo" href="#two">¤</a></span> COMICS!</p>
</div>
</div>
<div id="two">
<div id="fav">
<p id="favtit">My Favorite Characters</p>
<ul id="favul">
<li>The <span id="flash">Flash</span></li>
<li><span id="bat">Batman</span></li>
<li><span id="arrow">Green</span> Arrow</li>
<li>Dr. <span id="manh">Manhattan</span></li>
</ul>
<div id="images">
<img src="characters.jpeg" alt="characters"/>
</div>
</div>
</div>
</body>
</html>