I am having a rough time with a strange problem related to background-color. Upon viewing the html file in a browser like chrome or firefox the background-color is not applying to the shop link(in the .header__shop selector). But when I inspect it and hover over the element, the background color suddenly appears in chrome and firefox.
HTML:
<!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
href="https://fonts.cdnfonts.com/css/helvetica-neue-9?styles=49034,49031,49033,49035,49032,49036,49038,49040,49042,49044,49037,49039,49041,49043,49045,49046"
rel="stylesheet"
crossorigin
/>
<link rel="stylesheet" href="style.css" />
<title>Assignment 4</title>
</head>
<body>
<header class="header">
<div class="header__top-ribbon">
<a href="#" class="header__logo margin-left-small margin-right-small"
><img src="./images/logo.png" alt="Motorolo logo"
/></a>
Explore
<a class="header__shop" href="#">Shop</a>
Customer Hub
</div>
</header>
</body>
</html>
CSS:
:root {
--header-active-background: #f2f2f2;
--header-link-color: #00000099;
--black: #000000;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
font-size: 62.5%;
}
header a:link,
header a:visited {
display: block;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
color: var(--header-link-color);
font-size: 1.2rem;
padding: 0 1.2rem;
letter-spacing: 0.03125rem;
}
header a:link {
transition: all 0.5s;
}
header a:hover {
color: rgba(0, 0, 0, 0.95);
}
/* UTILS */
.margin-left-small {
margin-left: 2rem !important;
}
.margin-right-small {
margin-right: 2rem !important;
}
/* header */
.header__logo img {
height: 45%;
}
.header {
position: fixed;
top: 0;
}
.header__top-ribbon {
height: 6.4rem;
display: flex;
align-items: center;
gap: 1rem;
}
.header__shop {
background-color: var(--header-active-background);
font-weight: bold;
color: var(--black) !important;
}
.header__logo {
padding: 0 !important;
}
I have tried putting !important in
background-color: var(--header-active-background);
in the
.header__shop
selector and it didn't work. Tried taking screenshot and snipping tool but the taken screenshot shows up the background color even if it is not there as seen by eyes!
The background color showed up first time for me. Browsers cache pages and content (including CSS) and sometimes it helps to force refresh (Ctrl+Shift+R, or Ctrl+Click on refresh button) instead of normal refresh. Inspecting may have made the browser reload the files.
Related
I'm trying to make the center blue div expand until it touches an edge of a screen. I would like it to expand the font size of all subtexts and the size of the discord iframe embed so that it is relatively the same size on any device. I'm not sure if this is even possible without javascript.
you can see the site at https://duelcraft.games/
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email user#example.com for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
from your last comment,
I know the solution.
add this to your HTML <head> element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this makes the website responsive for mobile versions.
this code is automatically generated in most of the IDEs (like vscode)
but in your case, there isn't so just add it
also for not having the margin on top and bottom,
use margin: 0 to the <body> selector
adding a small space in every part (top, left, right) is by adding this code:
the trick there is box-sizing: border-box;
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test {
width: 100%;
}
}
in this photo I added a padding of 1rem (~16px),
if you want less padding, just change the value
I used a #media because we want that: the code we will use works only on mobile, so on the desktop will be centered, and on mobile there is padding.
for making the discord iframe responsive use width:100% so it will use the maximum space it can have from the parent div.
.test, iframe {
width: 100%;
}
I wrote a comma here to avoid repeating the code multiple times.
for making the <h1> responsive we will use the vw unit in CSS.
h1 {
font-size: 12vw;
}
vw is the width_screen/100
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
margin: 0;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test,
iframe {
width: 100%;
}
h1 {
font-size: 12vw;
}
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email support#duelcraft.games for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
I attached an image here but I want to attach a video.
I tried but was not able to maintain the same width and length and the page getting disproportionate. All i want to attach is a mute video file from youtube or local in place the image with autoplay in the loop and no controls.
Here I have uploaded the HTML and CSS I have created to give a minimal reproducible example.
HTML
<!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">
<title>VRT</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="1home_style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<!-- custom js file link -->
<script src="js/script.js" defer></script>
</head>
<body>
<!-- home section starts -->
<section class="home" id="home">
<div class="content">
<span data-aos="fade-up" data-aos-delay="150">follow us</span>
<h3 data-aos="fade-up" data-aos-delay="300">To The City Of Joy</h3>
<p data-aos="fade-up" data-aos-delay="450">The possibilities for virtual reality are endless. Have you found your VR destiny? Virtual Reality trip, down a virtual rabbit hole. Jump in and explore, fully-immersed soul of kolkkata </p>
<a data-aos="fade-up" data-aos-delay="600" href="#" class="btn">book now</a>
</div>
</section>
<!-- home section ends -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
AOS.init({
duration: 800,
offset:150,
});
</script>
</body>
</html>
CSS
/*# sourceMappingURL=style.css.map */#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600&display=swap");
* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 9rem;
}
html::-webkit-scrollbar {
width: 1rem;
}
html::-webkit-scrollbar-track {
background: #111;
}
html::-webkit-scrollbar-thumb {
background: #29d9d5;
border-radius: 5rem;
}
body {
background: #111;
overflow-x: hidden;
}
.home {
margin: 0 auto;
margin-top: 9rem;
width: 90%;
border-radius: 1rem;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(https://media.istockphoto.com/photos/wizard-falls-on-the-metolius-river-autumn-in-oregon-picture-id1282389397?b=1&k=20&m=1282389397&s=170667a&w=0&h=stKW8obWC5j7xyeFHikgDHsqoZQ0B4WJN_9MBGCxVQw=) no-repeat;
background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(https://media.istockphoto.com/photos/wizard-falls-on-the-metolius-river-autumn-in-oregon-picture-id1282389397?b=1&k=20&m=1282389397&s=170667a&w=0&h=stKW8obWC5j7xyeFHikgDHsqoZQ0B4WJN_9MBGCxVQw=) no-repeat;
background-size: cover;
background-position: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 80vh;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 5rem;
}
.home .content {
text-align: center;
}
.home .content span {
font-weight: bolder;
color: transparent;
-webkit-text-stroke: 0.1rem #fff;
font-size: 4vw;
display: block;
}
.home .content h3 {
font-size: 6vw;
color: #fff;
}
.home .content p {
max-width: 60rem;
margin: 1rem auto;
font-size: 1.4rem;
color: #aaa;
line-height: 2;
}
/*# sourceMappingURL=style.css.map */
What you can do is add a locally stored video in the html file and add the attributes muted and autoplay in the video tag after this you can make its display: absolute and then set its top, bottom, left, right values to make it align as per your need and after it you can set z-index to -1 or a lower value. If you want to change its width and height you will loose your video quality, so I would prefer to just adjust the other elements or objects on the page because loosing your video quality would definitely decrease the user experience of the website.
I wanted to start creating a simple website and I am working on the navigation bar and the body now.
Here is the code and later on I will explain the issues.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
#p1 {
float: right;
}
#p2 {
float: right;
}
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<header>
<div id="navbar">
page1
page2
</div>
</header>
<div id="logospace"></div>
<body>
<div id="main-content-wrapper">
b
</div>
</body>
</html>
ISSUE 1:
The links are swapped, no matter what I did. Navigation link 1 and 2 are floated right, but navigation link 1 always ends up on the right, no matter how much I twist and turn the code.
ISSUE 2:
The navigation is clearly outside of the body but it still floats at the right side of the body and not of the entire html tag or the website.
ISSUE 3:
The body appears over the navigation bar, although it should definetely be under it.
This is driving me absolutely insane and i am looking for solutions.
Thanks in advance
You have some elements outside of <body></body>
do you really need float: right for the inside the .navbar?
since you are using percentage dimensions for the body, you'll need specify size of it's parent html element as well.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
/*
#p1 {
float: right;
}
#p2 {
float: right;
}
*/
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}
/* added */
#navbar {
display: flex; /* removes gap between children */
}
html
{
width: 100vw;
height: 100vh;
background-color: pink;
}
body
{
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="navbar">
page1
page2
</div>
</header>
<div id="logospace"></div>
<div id="main-content-wrapper">
b
</div>
</body>
</html>
I am looking to reproduce a style of site and I would like to do for the background like them that is to say alternate the design: printed circuit boards, dark gray backgrounds, printed circuit boards, dark gray fonts, but I do not see how to do in my case someone could help me please?
The site : https://hydra.bot/ (screen of what I want to reproduce : https://prnt.sc/13kmrkc)
I attach below my code:
<!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">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Support
</div>
<div class="right"> <!-- Socials -->
Social 1
Social 2
</div>
</nav>
</header>
</head>
<body>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
font-weight: 500;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%; /* new */
}
.topbar nav {
display: flex;
width: 100%; /* new */
}
/* new class */
.middle {
margin: 0 auto;
}
/* end new */
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
}
.topbar nav a:hover, .topbar nav a.active {
color: #000;
}
.header-logo {
cursor: pointer;
width: 25vh;
}
h1 {
text-align: center;
color: #fff;
}
I was thinking of creating a div containing my background in order to define a precise style in my css, but I never did that so I don't really know how to do it (How to do it the right way). For the moment I was trying in my css thanks to my body class but it's not famous. If someone has an idea I'm interested. I would like that it is responsive at most of course because I try to respect the responsive since the beginning of the creation of my site
Your initial idea of using DIVs is indeed correct.
HTML
<div class="circuit"> Some content for the first part of the page</div>
<div class="dark"> Some content for the second part of the page</div>
<div class="circuit"> Some content for the third part of the page</div>
CSS
.circuit {
background-image:url(URL_OF_THE_IMAGE);
}
.dark {
background-color:#HEXCODE;
}
Alrighty. I'm making a website, and I'm already screwing up. In the process of making a navbar, the animation I'm trying to make is not working correctly.
* {
margin: 0;
padding: 0;
font-family: Roboto;
}
header {
box-sizing: border-box;
max-height: 50px;
}
nav {
position: sticky;
top: 0;
padding: 7.5px;
}
.link {
padding: 7.5px;
display: inline-block;
font-size: 15px;
color: black;
text-decoration: none;
border-radius: 10px;
background-color: white;
transition-duration: 0.75s;
}
.linkanim {
padding: 7.5px;
display: inline-block;
font-size: 15px;
color: black;
text-decoration: none;
border-radius: 10px;
}
.linkanim:hover {
background-color: grey;
}
.icocredit {
position: absolute;
top: 97.5%;
font-size: small;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
<title>Test</title>
</head>
<body>
<header>
<nav>
<a class="link linkanim" href="#test">Test</a>
</nav>
</header>
<main>
</main>
<footer>
<div class="icocredit">Icons made by Freepik from www.flaticon.com</div>
</footer>
</body>
</html>
The button is only supposed to show an animation when a mouse hovers over it.
However, the Button does some weird movement on page load.
I found out that it's either an issue with the font or with me loading the HTML file locally in chrome, on a real web server this isn't an issue. I'll mark this as the answer and thereby close this question.