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 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...
I've got a problem, I wanted to place a text just next to the image, as shown in the picture. But it doesn't work. I'm just starting CSS and HTML journey so don't blame please if the mistake is shameful.
I haven't forgotten about float: left and clear: both lines so I guess it may mean that the width or the height is too small to fit the text.
I'll paste a stack snippet here. The zip pack with a picture will be included as well, in case you'd like to see it how it works.
body {
background-color: #444444;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: white;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
#logo {
text-align: center;
padding: 15px;
background-color: #303030;
color: white;
font-size: 30px;
font-weight: 900;
margin-bottom: 30px;
}
#navbar {
background-color: black;
margin-top: 20px;
padding: 10px;
}
.click {
float: left;
margin-left: 20px;
}
.click:hover {
cursor: pointer;
background-color: green;
}
#quote {
height: 230px;
width: 980px;
padding: 10px;
background-color: red;
margin-top: 20px;
margin-bottom: 25px;
}
#quoteL {
float: left;
width: 200px;
height: 250px;
}
#quoteR {
float: left;
width: 800px;
font-size: 16px;
text-align: justify;
}
.bigtitle {
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Angielski - Nauka angielskiego dla zainteresowanych</title>
<meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
pomoc, jak" />
<meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&subset=latin-ext" rel="stylesheet"> </head>
<body>
<div id="container">
<div id="logo">English 4 Everyone :D</div>
<div id="navbar">
<div class="click">TO BE</div>
<div class="click">TO HAVE/TO HAVE GOT</div>
<div class="click">PRESENT SIMPLE</div>
<div style="clear:both;"></div>
</div>
<div id="quote">
<div id="quoteL">
<img src="swan.jpg" />
</div>
<div id="quoteR">
<span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
Pictures:
HTML, CSS and jpg file inside a zip file on Google Drive.
Change the width of #quoteL+#quoteR<=#quote
and if you want that img do not out of red section change the height to be smaller then #quote height
body {
background-color: #444444;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: white; }
#container {
margin-left: auto;
margin-right: auto;
width: 1000px; }
#logo {
text-align: center;
padding: 15px;
background-color: #303030;
color: white;
font-size: 30px;
font-weight: 900;
margin-bottom: 30px; }
#navbar {
background-color: black;
margin-top: 20px;
padding: 10px; }
.click {
float: left;
margin-left: 20px; } .click:hover {
cursor: pointer;
background-color: green; }
#quote {
height: 230px;
width: 980px;
padding: 10px;
background-color: red;
margin-top: 20px;
margin-bottom: 25px; }
#quoteL {
float: left; width: 180px;
height: 180px; }
#quoteR {
float: left;
width: 800px; font-size: 16px; text-align: justify; }
#quoteL img{ height: 210px;}
.bigtitle {
font-size: 32px; font-weight: 900; letter-spacing: 2px;
display: block;
}
<!DOCTYPE HTML> <html> <head>
<meta charset="utf-8" />
<title>Angielski - Nauka angielskiego dla zainteresowanych</title>
<meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
pomoc, jak" />
<meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&subset=latin-ext"
rel="stylesheet"> </head> <body>
<div id="container">
<div id="logo">English 4 Everyone :D</div>
<div id="navbar">
<div class="click">TO BE</div>
<div class="click">TO HAVE/TO HAVE GOT</div>
<div class="click">PRESENT SIMPLE</div>
<div style="clear:both;"></div>
</div>
<div id="quote">
<div id="quoteL">
<img src="https://i.stack.imgur.com/8hZeG.jpg" />
</div>
<div id="quoteR">
<span class="bigtitle">Quote to success:</span>
"Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A
(what the student knows) to B (what we want him/her to know next). If
the bridge is too long it will collapse." ~Michael Swan
source: https://mikeswan.net/some-things-i-believe/
</div>
<div style="clear: both;"></div>
</div>
</div> </body> </html>
Add this to ur quoteR
#quoteR {
float: left;
width: calc(100% - 200px); /*200px is width of image*/
font-size: 16px;
text-align: justify;
padding-left: 10px;
box-sizing: border-box;
}
Using calc, u can subtract the width of the image from the parent's width. the value of calc will be assigned to the #quoteR
body {
background-color: #444444;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: white;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
#logo {
text-align: center;
padding: 15px;
background-color: #303030;
color: white;
font-size: 30px;
font-weight: 900;
margin-bottom: 30px;
}
#navbar {
background-color: black;
margin-top: 20px;
padding: 10px;
}
.click {
float: left;
margin-left: 20px;
}
.click:hover {
cursor: pointer;
background-color: green;
}
#quote {
/*height: 230px;*/
width: 980px;
padding: 10px;
background-color: red;
margin-top: 20px;
margin-bottom: 25px;
clear: both;
}
#quoteL {
float: left;
width: 200px;
height: 250px;
}
#quoteR {
float: left;
width: calc(100% - 200px);
font-size: 16px;
text-align: justify;
padding-left: 10px;
box-sizing: border-box;
}
.bigtitle {
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Angielski - Nauka angielskiego dla zainteresowanych</title>
<meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
pomoc, jak" />
<meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&subset=latin-ext" rel="stylesheet"> </head>
<body>
<div id="container">
<div id="logo">English 4 Everyone :D</div>
<div id="navbar">
<div class="click">TO BE</div>
<div class="click">TO HAVE/TO HAVE GOT</div>
<div class="click">PRESENT SIMPLE</div>
<div style="clear:both;"></div>
</div>
<div id="quote">
<div id="quoteL">
<img src="https://i.stack.imgur.com/8hZeG.jpg]" />
</div>
<div id="quoteR">
<span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
You can use a table to take that whole description to the right of the image. Refer the following html code.
<div id="logo">English 4 Everyone :D</div>
<div id="navbar">
<div class="click">TO BE</div>
<div class="click">TO HAVE/TO HAVE GOT</div>
<div class="click">PRESENT SIMPLE</div>
<div style="clear:both;"></div>
</div>
<table id="quote">
<tr>
<td>
<div id="quoteL">
<img src="swan.jpg" />
</div>
</td>
<td>
<div id="quoteR">
<span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
</div>
</td>
</tr>
<div style="clear: both;"></div>
</table>
the sum of quoteL and quoteR is not equal to quote, you can change him or if you want you can do % instead of px for see better the size :)
#quote
{
height: 230px;
width: 100%;
padding: 10px;
background-color: red;
margin-top: 20px;
margin-bottom: 25px;
}
#quoteL
{
float: left;
width: 20%;
height: 250px;
}
#quoteR
{
float: left;
margin-left: 5%;
width: 70%;
font-size: 16px;
text-align: justify;
}
#logo
{
text-align: center;
padding: 10px;
background-color: #303030;
color: white;
font-size: 30px;
font-weight: 900;
margin-bottom: 30px;
width:100%;
}
#navbar
{
background-color: black;
margin-top: 20px;
padding: 10px;
width:100%;
}
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>
I'm trying to change the text color in a menu, I have tried the color tag and the text-decoration-color tag, but neither of them work. Here is what I am working on, in CSS
#meny {
position: absolute;
top: 201px;
left: 290px;
width: 800px;
height: 50px;
text-align: center;
position: fixed;
top: 201px;
width: 60%;
display: flex;
font-weight: bold;
font-size: smaller;
color: #cccccc !important;
}
#meny a {
line-height: 50px;
flex: 1 0 auto;
font-family: verdana;
text-decoration: none
}
<!doctype html>
<html>
<head>
<title>Markveien legesenter</title>
<meta charset="utf-8">
<link href="medic.ico" rel="icon" type="image/x-icon" />
<link href="stil.css" rel="stylesheet">
</head>
<body>
<div id="header">
<img src="del2.jpg">
</div>
<div id="bilde">
<img src="del1.jpg">
</div>
<div id="meny"> HJEMOM OSSSLIK BESTILLER DUINFORMASJONLENKER
</div>
</body>
</html>
You should override the color of a, but you are putting the color on the container:
#meny a {
line-height: 50px;
flex: 1 0 auto;
font-family: verdana;
text-decoration: none;
color: #ccc; /*add color here*/
}
You should also reset color for the links:(as i commented earlier :) )
#meny {
position: absolute;
top: 201px;
left: 290px;
width: 800px;
height: 50px;
text-align: center;
position: fixed;
top: 201px;
width: 60%;
display: flex;
font-weight: bold;
font-size: smaller;
color: #cccccc !important;
}
#meny a {
color:inherit;
line-height: 50px;
flex: 1 0 auto;
font-family: verdana;
text-decoration: none
}
<!doctype html>
<html>
<head>
<title>Markveien legesenter</title>
<meta charset="utf-8">
<link href="medic.ico" rel="icon" type="image/x-icon" />
<link href="stil.css" rel="stylesheet">
</head>
<body>
<div id="header">
<img src="del2.jpg">
</div>
<div id="bilde">
<img src="del1.jpg">
</div>
<div id="meny"> HJEMOM OSSSLIK BESTILLER DUINFORMASJONLENKER
</div>
</body>
</html>