I am following a web development tutorial to create a landing page. I'm using a combination of CSS, HTML, and JS. My site will not detect a navigation bar that I have attempted to draw with SCSS. It's meant to be dark blue and sit on the top right. Below is the code for the project this far.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/dist/style.css">
<title>Frontend Mentor | Easybank landing page</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header class="header">
<nav class="flex flex-jc-sb">
<a href="/" class="header__logo">
<img src="images/logo.svg" alt="Easybank" />
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
</nav>
</header>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</div>
<script src="/app/js/script.js"></script>
</body>
</html>
style.scss
#import "variables";
#import "globals";
#import "header";
_globals.scss
hmtl {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Public Sans', sans-serif;
line-height: 1.3;
}
/// Flexbox
.flex {
display: flex;
&-jc-sb {
justify-content: space-between;
}
&-jc-c {
justify-content: center;
}
&-ai-c {
align-items: center;
}
}
_headers.scss
.header {
nav {
padding: 24px;
}
&__menu { // Mobile Menu
> span {
display: block;
width: 26px;
height: 2px;
background-color: $darkBlue;
&:not(:last-child){
margin-bottom: 3px;
}
}
}
}
Related
I have a problem. I want to use a cookie banner for my website.
I have the problem that I built my website with Boostrap. And as soon as I insert this code into my real website, the banner is displayed at the top and no longer in the style.
So it's displayed above stored. How can I insert this code so that it works properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Consent Banner</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
style.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
script.js
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
<link rel="stylesheet" href="assets/css/style.css" />
/>
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<div id="cookiePopup" class="hide">
<img src="assets/img/cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
</section>
<section class="mb-5"></section>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
If your banner is displayed at the top and no longer in the style it could be some problem in the css;
Try commenting out these css one at a time, and by reloading the page you can see if one of them is the culprit:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
Alternatively, you can put the css "style.css" inside the html code and add !important
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"><!--EDIT for coding-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"/>
<!--<link rel="stylesheet" href="assets/css/style.css" />-->
</head>
<!-- Stylesheet on the html -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
</style>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<!--COOKIES-->
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
<!--Section-->
<section class="mb-5"></section>
<!--Footer-->
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<!-- Script -->
<script>
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
</script>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script><!--EDIT for coding-->
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
In my browser works fine
I am trying to develop a rating site which is a part of Frontend Mentor Challenge(https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI) in which I am facing the following problems:-
On clicking submit button it gives a null error. Why is it happening and how can I fix this?
Should I use a modal box for thank you page or is it ok to make a different HTML page to handle the thank you page?
How can I access the 'numbers' class and use it on the 'thank you.html' page?
const numberClicked = document.querySelectorAll(".number")
const submitBtn = document.getElementById("submit-btn")
numberClicked.forEach(function(oneNumbreClicked) {
oneNumbreClicked.addEventListener('click', function() {
console.log(oneNumbreClicked.innerText)
})
})
submitBtn.addEventListener('click', function() {
document.getElementById("final-rating").innerText = `You selected ${oneNumbreClicked.innerText} out of 5`
})
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
font-family: 'Overpass', sans-serif;
background-color: hsl(216, 12%, 8%);
}
.container {
color: white;
width: 35%;
background-color: hsl(213, 19%, 18%);
border-radius: 10px;
box-shadow: 0 10px hsl(216, 12%, 8%);
margin: 3em auto;
padding: 2em;
}
.thank-you-container {
text-align: center;
}
.star {
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
padding: 10px;
}
.numbers {
margin: 0 auto;
}
.number {
display: inline-block;
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
text-align: center;
padding: 10px;
width: 40px;
font-size: 1em;
margin: 0 0.423em;
opacity: 0.5;
border: none;
color: inherit;
}
.submit-btn {
background-color: hsl(25, 97%, 53%);
color: white;
padding: .8em 2em;
width: 100%;
border-radius: 1.5em;
border: none;
margin-top: 1.5em;
font-weight: 400;
font-size: 1.1em;
}
.number:hover {
opacity: 1;
background-color: hsl(217, 12%, 63%);
}
.submit-btn:hover {
opacity: 0.5;
}
.submit-btn:focus,
.number:focus {
opacity: 1;
background-color: white;
color: hsl(25, 97%, 53%);
}
.final-rating {
background-color: hsl(229.4, 14.3%, 23.3%);
color: hsl(25, 97%, 53%);
border-radius: 1.5em;
padding: 0.4em;
margin: 1.3em auto;
width: 12.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.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=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component | Rating Page</title>
<style>
.attribution {
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main>
<!-- Rating state start -->
<section class="container">
<img class="star" src="images/icon-star.svg" alt="">
<h2>How did we do?</h2>
<p>
Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
</p>
<div class="numbers" id="numbers">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
</div>
<a href="thank.html" target="_self">
<button class="submit-btn" id="submit-btn">Submit</button>
</a>
</section>
<!-- Rating state end -->
<div class="attribution">
Challenge by Frontend Mentor. Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
<!--This is the linked HTML file(thank.html) which activates on clicking upon Submit button
<!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="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.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=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component |Thank You Page</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<main>
<section class="container thank-you-container">
<img src="images/illustration-thank-you.svg" alt="">
<p class= "final-rating" id="final-rating"></p>
<h2>Thank you!</h2>
<p>We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!</p>
</section>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
-->
So first it would be better if you could write the whole error, so we have more info of what is causing it.
Issue: But of what I've seen is that, the submit button is wrapped in anchor tags, which is redirecting us to "thank.html" as: <button>Submit</button>, and in the thank.html (the commented code below) you are loading the very same script. <script src="script.js"></script> which causes the problem/error. Why is it causing a problem, is simply because in this script you are accessing the DOM elements which does not exist in thank.html. For example in script.js you access the elements with class query selector .numbers, but when thank.html is loaded this elements are not existing. =)
Solution:
You could create a new unique js file for the purpose of thank.html. And add an event listener on load as: window.addEventListener("load", () => {../logic here}), but with this approach you will have to think of how would you pass the parameter of the value oneNumbreClicked.innerText so you can use and print it. As a starter you could share the information through the sessionStorage or the localeStorage. (There are way more ways)
Other easy and straight forward approach to have only one html file. Have the both <section></section> (section with class container and thank-you-container). Initially the section with class thank-you-container would have css property: display: "none". When clicking on submit button, firstly you will change the display property of the section with class thank-you-container to "flex or block", and change the display prop of the section with class container to "none, and print the text. On a way you will simulate "single page applicaton" :D. And do not forget to remove the <a> </a> tags from the submit button, so you won't redirect.
Dummy demo solution:
const container = document.getElementById("container")
const containerTwo = document.getElementById("thank-you-container")
const myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", ()=> {
container.style.display = "none";
containerTwo.style.display = "flex";
// your additional logic here
})
.thank-you-container {
display: none}
<div class="container" id="container">
<h1>Container one</h1>
</div>
<div class="thank-you-container" id="thank-you-container">
<h1>Container two</h1>
</div>
<button id="myBtn">Submit</button>
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!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>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
Website screenshot in PC
Website screenshot in the mobile device
Here is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet"
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
</head>
<body>
<div class="first">
<h1>Hey!</h1>
</div>
</body>
</html>>
and this is the CSS code
body {
background-color: rgb(20, 18, 18);
}
.first {
position: relative;
margin-right: 300px;
color: white;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
}
use following css
.first
{
color: white;
text-align: center;
}
.first h1
{
display: inline-block;
}
Hey There are many solutions.
You can set width of element like the below code.
Or You can set the display: options into the element (for example, display:contents)
body {
background-color: rgb(20, 18, 18);
}
.first {
position: relative;
margin-right: 300px;
color: white;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
width: 100%;
/* display: contents; */
}
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet"
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
<body>
<div class="first">
<h1>Hey!</h1>
You can use flexbox especially in media queries for mobile size or desktop size
.first {
position: relative;
margin-right: 300px;
color: white;
width:100%;
display:flex;
justify-content:center;
align-items:center;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
</head>
<body>
<div class="first">
<h1>Hey!</h1>
</div>
</body>
</html>
I think you just need to remove your margin-right: 300px; - that's going to end up moving everything 300px to the left, thus leaving it very off-center on mobile.
I have two separate HTML files (index.html and home.html) and a javascript (bodyswapscript.js) file. I'm trying to figure out how to swap the body of home.html (only) into the body of the index.html by using java script. Basically replacing body tags between HTML files.
I have posted my html code and java script below. The html is quick and dirty, so I'm only interested in swapping out the body information from index.html with home.html
1.) index.html
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<header>
<hgroup>
<center><h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<body>
<article>
<div id='swapcontent'>
index page
</div>
</article>
</body>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
2.) home.html
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<body>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</body>
3.) bodyswapscript.js
$(document).ready(function()
{
$( 'li>a[id$="Container"]' ).click(function(event)
{
event.preventDefault();
var href = $(this).attr('href');
alert("Loading " + href);
$('#swapcontent').load(href);
return false;
});
});
4.) Supporting CSS
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 720px;
margin: 0px auto;
}
header h1 {
font-size: 36px;
margin: 0px;
}
header h2 {
font-size: 18px;
margin: 0px;
color: #888;
font-style: italic;
}
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #2B60DE;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px;
display: block;
width: 26px;
padding: 2px;
text-align: center;
background-color: #993333;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px;
float: left;
margin-left: 14px;
text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
This code was pulled from the following URL: http://jsfiddle.net/Christophe/hj9ry/1/
Correct invalid html, include wrapper parent element for content of <body> at home.html; call .load() with fragment identifier referencing wrapper element within home.html; use .unwrap() to remove wrapper element at index.html at complete function of .load()
index.html
<!doctype html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<hgroup>
<center>
<h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<article>
<div id='swapcontent'>
index page
</div>
</article>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
</body>
</html>
home.html
<!doctype html>
<html>
<head></head>
<body>
<div id="body">
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</div>
</body>
</html>
bodyswapscript.js
$(document).ready(function() {
$('li>a[id$="Container"]').click(function(event) {
event.preventDefault();
var href = $(this).attr('href');
// alert("Loading " + href);
$('body').load(href + " #body", function() {
$("#body *:first").unwrap()
});
return false;
});
});
plnkr http://plnkr.co/edit/r8WTsQ9Xm3ZLsRp8nwLr?p=preview
You can use IFrames in html to show your contents of index.html in homw.html
Or
You can use
in your home file