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;
}
Related
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.
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.
So, I'm making a website and in the navbar, I floated some of the links to the right. However, when I do this, the links leave the vertical center and drop downwards. When I apply padding though, nothing happens. I know there are other versions of this question on Stack Overflow, but I've tried the answers and they don't work. Here's my code
/* Start Variables */
:root {
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper {
width: 100%;
padding: 2% 10%;
box-shadow: 5px 10px 8px #888888;
}
.leftside {}
.rightside {
float: right;
}
.options {
text-decoration: none;
margin-bottom: 20%;
}
.linkhome {
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-bottom: 20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Example | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Our Work
About Us
Our Food
Culture
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>
Any help is greatly appreciated
Thanks!
Make your .navbar-wrapper a flexbox.
.navbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
I have been studying CSS, however i came across a weird behavior, there is this anchor element that i gave a class with name "sponsor-link", it does not show up in Firefox nor in Chrome(completely removed from the DOM tree), however if i name it something else(i.e. sponsor-link-btn) then it shows up.
Can anyone explain why using "sponsor-link" as class name can remove an element?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Franklin Running Club</h1>
</header>
<div class="container">
<main class="main">
<h2>Come join us!</h2>
<p>
The Franklin Running club meets at 6:00pm every Thursday
at the town square. Runs are three to five miles, at your
own pace.
</p>
</main>
<aside class="sidebar">
<a href="/twitter" class="button-link">
follow us on Twitter
</a>
<a href="/facebook" class="button-link">
like us on Facebook
</a>
<a href="/sponsors" class="sponsor-link">
become a sponsor
</a>
</aside>
</div>
</body>
</html>
CSS
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #eee;
font-family: Helvetica, Arial, sans-serif;
}
header {
color: #fff;
background-color: #0072b0;
border-radius: .5em;
padding: 1em 1.5em;
}
main {
display: block;
}
.container {
display: flex;
}
.main {
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
width: calc(30% - 1.5em);
margin-left: 1.5em;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}
.button-link {
display: block;
padding: 0.5em;
color: #fff;
background-color: #0090C9;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.button-link + .button-link {
margin-top: 1.5em;
}
.sponsor-link {
display: block;
color: #0072b0;
font-weight: bold;
text-decoration: none;
}
I found out now.
My browsers have AdBlock Plus plugins,
which hide the element.
I think ABP black listed the text "sponsor-link"