ok, so I got an assignment to make a 3 page website using css and html, and we have to use external style sheets, naturally I want to make my stuff look nice, HOWEVER we are only aloud to use our one external sheet, so I was wondering if and or how I would be able to call upon different images to set them as backgrounds, because right now I only have my one background image, and I would like to be able to call upon a different image and set it to the background for each of the 3 pages
-here is my style sheet I can also provide my html page though it is very bear bones and just references stuff from the style sheet, just let me know :)
body {
font-family: Arial, Helvetica, sans-serif;
font: sans-serif;
background-image: url(back1.PNG);
background-attachment: fixed;
background-color: #403f42;
}
h1 {
text-align: center;
color: #0a0068;
padding: 10px;
border-color: #0a0068;
border-style: ridge;
border-width: 10px;
margin: 1in;
background-color: #5184d133;
font-size: 50px;
}
h2 {
text-align: center;
background-color: #59696e71;
padding: 10px;
color: #0a0068;
border-color: #473e93;
border-style: solid;
border-width: 5px;
margin: .25in;
font-size: 40px;
}
h3 {
text-align: center;
color: #007517;
background-color: #62e47c5f;
border-color: rgb(10, 151, 10);
border-style: dashed;
padding: 10px;
border-width: 5px;
font-size: 40px;
margin: 2in;
}
h4 {
text-align: center;
color: #0092b0;
background-color: #62e2ff5f;
border-color: rgb(0, 217, 255);
border-style: double;
padding: 10px;
border-width: 5px;
font-size: 40px;
margin: 2in;
}
h5 {
text-align: center;
color: #580707;
background-color: #5c15155f;
border-color: #580707;
border-style: outset;
padding: 10px;
border-width: 5px;
font-size: 40px;
margin: 2in;
}
a:link {
color: #bf00ff;
}
a:visited {
color: #6d04a652;
}
a:hover {
color: rgb(42, 1, 80);
}
h6 {
font-family: Arial, Helvetica, sans-serif;
font: sans-serif;
background-image: url(armor.png);
background-attachment: fixed;
background-color: #403f42;
}
}
<html>
<link rel="stylesheet" href="style.css">
<head>
</head>
<body>
<h1>
<p>How to beat the ender dragon in Minecraft</p>
</h1>
<h2>
<p>This will be a simple step by step guide for defeating the ender dragon!</p>
<p>and yes, there will be pictures !</p>
</h2>
</body>
<h3>
Finding the End portal
</h3>
<h4>
Gearing Up
</h4>
<h5>
Combat
</h5>
</html>
the website had to use a theme or a tutorial of some kind... that it is why it is a guide on minecraft
I figured it out !
I had to id my bodies
so instead of just having
body in my external file
I needed to have another body in my css file
so in my html I had to do
<body id="body2" class="body2">
and in the css file
body.body2 {
font-family: Arial, Helvetica, sans-serif;
font: sans-serif;
background-image: url(end.PNG);
background-attachment: fixed;
background-color: #403f42;
}
all that it needed was identification,
Something cool you can do is use CSS variables to manage your backgrounds a little easier. It doesn't solve your problem, but it seems like you've got it already.
:root {
--background-1: (bck1.png);
--background-2: (bck2.png);
--background-3: (bck3.png);
}
#body1 {
background: var(--background-1);
}
#body2 {
background: var(--background-2);
}
#body3 {
background: var(--background-3);
}
Related
I tried to add a verticle bar thats stuck to the top right off my screen but it dosent show up for some reason, i tried everything i could. here is my code.
css: used for the style of my site, just uhh regular old code expect that it show anything thats located at the bottom of my website expressed by the overflow hidden thing. Anyways inspect element tells me that my gradient bar is at the bottom of the site even though its not supposed to be. see last couple lines of the css code for the bar.
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#gradient-bar {
background: linear-gradient(to right, #000000, #ffffff);
height: 20px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eaglercraft.xyz</title>
</head>
<body>
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div class="back">
<pi></pi>
</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="updates">
<div class="Texty">
<p> Be sure to join our discord!</p>
<div class="discord">
<ul style="color: black; font-weight: 100;"></ulstyle>Stay up to date with the latest news, contests, giveaways and other cool things: discord.gg :)</ul>
</div>
<div class"dickkord">
<p style="color: #298bc4"> Minecraft 1.8</p>
<ul style="color: black;"></ulstyle>Diorite: Crafted using 2 cobblestone and 2 Nether quartz in a checkerboard pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Andesite: Crafted using 1 cobblestone and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Granite: Crafted using 1 Nether quartz and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Coarse Dirt: Replaces grassless dirt found in mega taiga, mesa and savanna biomes. It is slightly darker than regular dirt. Tilling it with a hoe turns it to regular dirt. Can be crafted using dirt and gravel in a 2x2 checkered pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine: Generates in ocean monuments and can be crafted using prismarine shards. Cracks in prismarine slowly change color.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine Bricks: Generates in ocean monuments and can be crafted using prismarine shards.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Dark Prismarine: Generates in ocean monuments and can be crafted using prismarine shards and an ink sac.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Red Sandstone: Can be crafted using 4 red sand in a square. Comes in chiseled, smooth, stair, and slab forms. Generated only in Mesa biomes at cave entrances.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Iron Trapdoor: Can only be opened and closed using redstone. Crafted using iron ingots in a 2x2 pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Sea Lantern: Generates in ocean monuments and can be crafted using prismarine shards and prismarine crystals. Emits light and has an animated texture.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Wet Sponge: Obtained when a sponge soaks up water. Smelting yields a dry sponge. Emits water dripping particles. Dropped by elder guardians.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Slime Block: Crafted using 9 slime balls. Players and mobs bouncing on top. Pushes and pulls blocks when moved by a piston. Does not affect falling items.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Banners: Crafted like signs but using wool. Can be stacked to 16 and have up to 6 layers. Can be placed on walls or on the ground. Different patterns can be made using dyes and certain items.</ul>
</div>
</div>
</div>
<div id="baro">
<select id="menu1">
<option selected value="latest">Latest Releases</option>
<option value="1.5">1.5</option>
<option value="1.8">1.8</option>
</select>
<select id="menu2" style="display: none;">
</select>
<button id="play-button" style="background-color: #f0c43c; border-radius: 20%; align-content: center;">Play</button>
</div>
<script src="epic.js"></script>
</body>
</html>
Reasoning:
Due to the 'back' class div set to the height of '100vh' (Vertical Height), The following div with static positioning will sit just below the div with the class of 'back'
Solution:
Rearranging your code makes it visible just under the blue bar
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="back">
<pi></pi>
</div>
To put it in the very top of the page I used the following
HTML:
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="bar">
<div id="close-button" style="top: 20px">×</div>
<!-- style attr to fix the cross -->
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div class="back">
<pi></pi>
</div>
CSS:
#gradient-bar p {
margin-top: 0;
position: relative;
}
And to half it you could set #gradient-bar width to 50%
And to put it in the top right corner you could put
#gradient-bar {
position: absolute;
right: 0;
}
Hoped I helped in some way!
I created a simple network of HTML pages styled with SCSS but the SCSS rules aren't being applied!
Heres how my SCSS file looks like:
//SCSS variables
$Heading-size: 60px;
$Mobile-Heading-size: 40px;
$Mobile-Body-Size: 30px;
$Defualt-background: rgba(149, 149, 243, 0.616);
//SCSS Inheritance and .class selector
.nav{
#extend h1;
}
img{
width: 250px;
}
body {
color: black;
background-color: $Defualt-background;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
//SCSS Nesting
h1 {
text-align: center;
size: $Heading-size;
color: tomato;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: $Defualt-background;
}
}
table {
border-radius: 5px;
border-width: 5px;
th {
border-width: 4px;
}
td {
border-width: 2px;
}
}
//responsive #media query
#media only screen and (max-width: 768px){
h1 {
size: $Mobile-Heading-size;
}
body {
//The background is a test to see if it works :)
$Defualt-background: orange;
background-color: $Defualt-background;
size: $Mobile-Body-Size
}
}
And this is how I linked it to my html:
<link rel="stylesheet" href="./CSS/style.css">
Just to be clear im linking the CSS generated by my compiler not the original SCSS!
im currently working on my Personal Web Page. I have made a Starting page, that says my name and other stuff. I have a button, that I want to connect it to the Main Page. Here is the code: (It's Updated since the first code)
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patua+One"
rel="stylesheet">
</head>
<body>
<div class="heading">
<span class="title1">Alexandros Kordatzakis</span>
<span class="title2">Technology, Coding And More...</span>
<button class="continue">Continue Reading About Me</button>
<hr>
</div>
<div id=Copyright>Copyright ©2017 Alexandros Kordatzakis.</div>
</body>
</html>
And CSS:
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;
transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
outline-width: 0px;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 50px;
}
#Copyright{
clear: left;
background-color: #0053BC;
text-align: center;
padding: 12px;
height: 8px;
font-family: 'Patua One', cursive;
font-size: 18px;
}
Questions I have:
1) When the User press the button, "READ MORE ABOUT ME" it appears a blue line-border. Why?
2) How can I link this "Starting Page" to my main page?
Thanks!
**EDIT 1 : ** Some details, like Copyright and else, are not finished, so sorry for mistakes. Just help me with my questions! :)
**EDIT 2: ** I have thought about my page design and I think that it's better to make this code "Starting Page" and not allow the user to do anything else like rolling, then the user to press this button and "hide" this background and text and show my other content. My "biography". How can i do that? Thanks btw.
To remove the focus outline use something like this:
.continue:focus{
outline-width: 0px;
}
To link a page use href. Example
Your Text Here
EDIT 2:
To show content on button click I would do this:
First add a new div with your content inside like so, and another div to set the style of your info div:
<div id="yourInfo">
<p>Your Content Here</p>
<p>Your Content Here</p>
<p>Your Content Here</p>
</div>
<div id="yourInfoStyle"></div>
Then you want to add this to your css file:
#yourInfo{
display: none;
}
Lastly, we need to add a function to show and hide the div, so put this
script in your html file:
<script>
var shown = false;
function showContent(){
if(!shown){
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
shown = true;
} else {
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
shown = false;
}
}
</script>
So here's the full code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono"
rel="stylesheet">
<script>
var shown = false;
function showContent(){
if(!shown){
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
shown = true;
} else {
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
shown = false;
}
}
</script>
</head>
<body>
<div class="heading">
<span class="title1">Alexandros Kordatzakis</span>
<span class="title2">Technology, Coding And More...</span>
<button class="continue" onclick="showContent()">Continue Reading About Me</button>
<div id="yourInfo">
<p>Your Content Here</p>
<p>Your Content Here</p>
<p>Your Content Here</p>
</div>
<div id="yourInfoStyle"></div>
<hr>
<span class="copyright">Copyright</span>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;
transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
outline: none;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 100px;
}
.copyright{
}
#yourInfo{
display: none;
}
Hope this helped you! :D
To link your Starting page you can use the anchor tag. Ex in your Starting page:
(Name of the website).
For any help you can also visit w3shools. They provide the best tutorials.
Answer 1:
<button class="continue" style=".continue:focus{outline-width: 0px;}">Continue Reading About Me</button>
Answer 2:
example
I'm very begginer in HTML/CSS and I'm trying to set one line under my text, I used border-bottom in my CSS file, and it shows 2 lines under my text. I'm sure that I missed something but I just don't know what. I don't want to use text-decoration:underline because I need space between my text and my line. My problem is with the <h3></h3>
Thanks in advance!
This is my code:
CSS / HTML
body {
background-color: #0d0d0d;
}
.center {
margin: auto;
width: 50%;
}
h1 {
font-family: "Taviraj", serif;
color: white;
border-bottom: 3px solid #404040;
display: inline-block;
padding-bottom: 2px;
padding: 0px;
}
h3 {
font-family: "Taviraj", serif;
color: white;
border-bottom: 1px solid #404040;
}
p {
color: #cccccc;
font-family: "Taviraj", serif;
font-size: 23px;
margin: 0px;
}
span {
color: #ffff1a;
}
span:hover {
color: #808080;
}
<!--http://jonchretien.com/ -->
<head>
<title>Jon Chretien | Front End Enginner</title>
<link rel="stylesheet" type="text/css" href="jonchretiencom_style.css">
<link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet">
</head>
<body>
<div class="center">
<h1>Hello</h1>
<p>My name is Jon Chretien. I'm a <span>NYC</span> based front end<br>
engineer currently working on web apps for artists at<br>
<span>Spotify</span>. Previously at <span>The New York Times</span>.</p>
<h3>Selected Works<h3>
</div>
</body>
You forgot the / in the closing </h3> tag, so the browser made two h3s out of it, creating two lines. Just inserting that slash into </h3> fixes it.
body {
background-color: #0d0d0d;
}
.center {
margin: auto;
width: 50%;
}
h1 {
font-family: "Taviraj", serif;
color: white;
border-bottom: 3px solid #404040;
display: inline-block;
padding-bottom: 2px;
padding: 0px;
}
h3 {
font-family: "Taviraj", serif;
color: white;
border-bottom: 1px solid #404040;
}
p {
color: #cccccc;
font-family: "Taviraj", serif;
font-size: 23px;
margin: 0px;
}
span {
color: #ffff1a;
}
span:hover {
color: #808080;
}
<!--http://jonchretien.com/ -->
<head>
<title>Jon Chretien | Front End Enginner</title>
<link rel="stylesheet" type="text/css" href="jonchretiencom_style.css">
<link href="https://fonts.googleapis.com/css?family=Taviraj" rel="stylesheet">
</head>
<body>
<div class="center">
<h1>Hello</h1>
<p>My name is Jon Chretien. I'm a <span>NYC</span> based front end<br>
engineer currently working on web apps for artists at<br>
<span>Spotify</span>. Previously at <span>The New York Times</span>.</p>
<h3>Selected Works</h3>
</div>
</body>
Your problem is with your code you need to close the <h3></h3> observe the h3 is not close in your code
Currently, I'm working on a basic navigation bar that changes the color of the text when clicked to go to a new page (So text on one page is a different color than text on another). I started the project ultimately using multiple CSS files to get the result I am looking for but it is horrendously inefficient. Obviously "if" statements don't exist in CSS but are there a way to call on an action if a certain page is loaded.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Project</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="navigation">
<ul>
<li class="login">Login</li>
<li class="shop">Shop</li>
<li class="wname">Website Name</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
</div>
</div>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
}
.header {
text-align: center;
width: 100%;
}
li {
color: rgba(102, 102, 102, .5);
padding: 20px;
margin: 20px;
font-size: 16px;
font-family: "Open Sans Condensed", sans-serif ;
text-transform: uppercase;
display: inline-block;
}
.wname {
font-size: 32px;
color: #F68404;
font-weight: 200;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:active {
color: #F68404;
border-bottom: solid 1px;
border-bottom-color: #F68404;
}
li:hover {
color: #F68404;
font-weight: 300;
}
/*.jumbotron {
background: url("https://newevolutiondesigns.com/images/freebies/city-wallpaper-11.jpg") no-repeat top center;
background-size: cover;
height: 800px;
}
.main {
color: rgb(102, 102, 102);
font-family: "Open Sans Condensed", sans-serif;
text-align: center;
}
.btn-main {
font-size: 32px;
padding: 10px;
border: solid 1px #000;
background-color: aliceblue;
color: #000;
border-radius: 10%;
}
.btn-main:hover {
color: aliceblue;
background-color: #000;
border: solid 1px aliceblue;
}*/
/*Class Rules for all anchors/hyperlinks*/
a {
text-decoration: none;
color: inherit;
}
I would appreciate any help,
Jordan
Change this rule to add an active class as well:
li.active,
li:hover {
color: #F68404;
font-weight: 300;
}
And in your individual pages, use the class for the <li>. Let's say, in the Shop page, use this code:
<li class="shop active">Shop</li>
This is because, you aren't using anything that checks the location and does stuff. Also, you aren't using any back end applications, which generate dynamic header, based on the URL.