I am trying to convert a left sidebar to be compatible on the right.
I tried a few things but nothing worked for me.
basically, I need a right-to-left direction, because all my site is from right-to-left.
anyone can help me? here is my code (to be honest it is not really mine):
Thank you very much
/*===== GOOGLE FONTS =====*/
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root{
--header-height: 3rem;
--nav-width: 68px;
/*===== Colors =====*/
--first-color: #4723D9;
--first-color-light: #AFA5D9;
--white-color: #F7F6FB;
/*===== Font and typography =====*/
--body-font: 'Nunito', sans-serif;
--normal-font-size: 1rem;
/*===== z index =====*/
--z-fixed: 100;
}
/*===== BASE =====*/
*,::before,::after{
box-sizing: border-box;
}
body{
position: relative;
margin: var(--header-height) 0 0 0;
padding: 0 1rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: .5s;
}
a{
text-decoration: none;
}
/*===== HEADER =====*/
.header{
width: 100%;
height: var(--header-height);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
background-color: var(--white-color);
z-index: var(--z-fixed);
transition: .5s;
}
.header__toggle{
color: var(--first-color);
font-size: 1.5rem;
cursor: pointer;
}
.header__img{
width: 35px;
height: 35px;
display: flex;
justify-content: center;
border-radius: 50%;
overflow: hidden;
}
.header__img img{
width: 40px;
}
/*===== NAV =====*/
.l-navbar{
position: fixed;
top: 0;
left: -30%;
width: var(--nav-width);
height: 100vh;
background-color: var(--first-color);
padding: .5rem 1rem 0 0;
transition: .5s;
z-index: var(--z-fixed);
}
.nav{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__logo, .nav__link{
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: 1rem;
padding: .5rem 0 .5rem 1.5rem;
}
.nav__logo{
margin-bottom: 2rem;
}
.nav__logo-icon{
font-size: 1.25rem;
color: var(--white-color);
}
.nav__logo-name{
color: var(--white-color);
font-weight: 700;
}
.nav__link{
position: relative;
color: var(--first-color-light);
margin-bottom: 1.5rem;
transition: .3s;
}
.nav__link:hover{
color: var(--white-color);
}
.nav__icon{
font-size: 1.25rem;
}
/*Show navbar movil*/
.show{
left: 0;
}
/*Add padding body movil*/
.body-pd{
padding-left: calc(var(--nav-width) + 1rem);
}
/*Active links*/
.active{
color: var(--white-color);
}
.active::before{
content: '';
position: absolute;
left: 0;
width: 2px;
height: 32px;
background-color: var(--white-color);
}
/* ===== MEDIA QUERIES=====*/
#media screen and (min-width: 768px){
body{
margin: calc(var(--header-height) + 1rem) 0 0 0;
padding-left: calc(var(--nav-width) + 2rem);
}
.header{
height: calc(var(--header-height) + 1rem);
padding: 0 2rem 0 calc(var(--nav-width) + 2rem);
}
.header__img{
width: 40px;
height: 40px;
}
.header__img img{
width: 45px;
}
.l-navbar{
left: 0;
padding: 1rem 1rem 0 0;
}
/*Show navbar desktop*/
.show{
width: calc(var(--nav-width) + 156px);
}
/*Add padding body desktop*/
.body-pd{
padding-left: calc(var(--nav-width) + 188px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ===== BOX ICONS ===== -->
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Sidebar menu responsive</title>
</head>
<body id="body-pd">
<header class="header" id="header">
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
<div class="header__img">
<img src="assets/img/perfil.jpg" alt="">
</div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div>
<a href="#" class="nav__logo">
<i class='bx bx-layer nav__logo-icon'></i>
<span class="nav__logo-name">Bedimcode</span>
</a>
<div class="nav__list">
<a href="#" class="nav__link active">
<i class='bx bx-grid-alt nav__icon'></i>
<span class="nav__name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-user nav__icon'></i>
<span class="nav__name">Users</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-message-square-detail nav__icon'></i>
<span class="nav__name">Messages</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bookmark nav__icon'></i>
<span class="nav__name">Favorites</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-folder nav__icon'></i>
<span class="nav__name">Data</span>
</a>
<a href="#" class="nav__link">
<i class='bx bx-bar-chart-alt-2 nav__icon'></i>
<span class="nav__name">Analytics</span>
</a>
</div>
</div>
<a href="#" class="nav__link">
<i class='bx bx-log-out nav__icon'></i>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<h1>Components</h1>
<!--===== MAIN JS =====-->
<script>
/*===== SHOW NAVBAR =====*/
const showNavbar = (toggleId, navId, bodyId, headerId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if (toggle && nav && bodypd && headerpd) {
toggle.addEventListener('click', () => {
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink() {
if (linkColor) {
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>
</body>
</html>
Thank you
Related
So I am creating a website for myself and am having a bit of an issue trying to hyperlink. I am aware that I need to wrap the entire text in an anchor element , however, despite doing this and having my contact page ready, I am unable to click on the hyperlink. Attached below is the main HTML code that I have been using and the CSS code as well in order to illustrate what I am doing.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fire Sans', sans-serif;
text-decoration: none;
list-style: none;
color: #FFF;
}
.app{
display: flex;
min-height: 100vh;
}
.sidebar{
flex: 1 1 0;
max-width: 300px;
padding: 2rem 1rem;
background-color: #051427;
}
.sidebar h3{
color: #707793;
font-size: 0.75rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.sidebar .menu{
margin: 0 -1rem;
}
.sidebar .menu .menu-item{
display: block;
padding: 1rem;
color: #FFF;
text-decoration: none;
transition: 0.2s linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active{
color #6f6d72;
border-right: 5px solid #6f6d72;
}
.content{
flex: 1 1 0;
padding: 2rem;
}
.content h1{
color: #D8BFD8;
font-size: 2.5rem;
font-family: papyrus;
margin-bottom: 1rem;
}
.content p{
color: #C8C8C8;
font-family: papyrus;
}
.menu-toggle{
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #051427;
cursor: pointer;
}
.hamburger{
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.hamburger > span,
.hamburger > span::before,
.hamburger > span::after{
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #FFF;
transition-duration: .25s;
}
.hamburger > span::before{
content: '';
top:-8px;
}
.hamburger > span:after{
content: '';
top: 8px;
}
.menu-toggle.is-active .hamburger > span{
transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger > span::before{
top: 0;
transform: rotate(0deg);
}
.menu-toggle.is-active .hamburger > span::after{
top: 0;
transform: rotate(90deg);
}
#media (max-width: 1024px){
.sidebar{
max-width: 200px;
}
}
#media (max-width: 768px){
.menu-toggle{
display: block;
}
.content{
padding-top: 8rem;
}
.sidebar{
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2s linear
}
.sidebar.is-active{
left: 0;
}
}
body{
font-family: papyrus;
background-image: url(AstroImg.jpg);
background-size: cover;
background-position: center;
}
<!DOCTYPE html>
<html>
<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 rel="stylesheet" type="text/css" href="main.css">
<script src="https://kit.fontawesome.com/4767153995.js" crossorigin="anonymous"></script>
<title> MAP | Astrophotography </title>
</head>
<body>
<div class="app">
<div class= "menu-toggle">
<div class= "hamburger">
<span></span>
</div>
</div>
<aside class="sidebar">
<h3>Menu</h3>
<nav class= "menu">
<i class="fa-solid fa-house"></i> Home
<i class="fa-solid fa-user"></i> About Me <i class="fa solid fa-gears"></i> My Equipment
<i class="fa-solid fa-star"></i> Image Gallery
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
</nav>
</aside>
<main class="content">
<h1> Mapping Astronomical Points </h1>
<p>Your guide to the sky</p>
</main>
</div>
<script>
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
</script>
</body>
</html>
Below is the example I am struggling to fix. If I remove the class tag, the hyperlink works fine, but then it begins to distort the layout of the website, and if I keep the class tag, then hyperlink does not work at all. What can I do to fix this issue? Any help is appreciated.
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
Remove the nested anchor and add the class to the outer anchor.
<i class="fa-regular fa-address-book"></i>Contact
Change this line:
<a href="#" class="menu-item"><i class="fa-regular fa-address-book"></i>Contact</a>
With this:
<i class="fa-regular fa-address-book"></i>Contact
EXPLANATION: You should not have an anchor tag inside an anchor tag.
I have a problem. Specifically with my images on my site. When I see my site on Android phone, images displays normally without any issues. iPhone displays it like "stretched" to height. I would love to get help, how to fix this problem. I tried some ways how to avoid that, but I found nothing. Sorry for long code. Here are pictures for visualization:
IPhone Image
Android Image
#import url('https://fonts.googleapis.com/css2?family=Commissioner:wght#400;500;700&display=swap');
:root {
--main-font: Commissioner;
--main-font-weight: 500;
--color-background-first: #1D201F;
--color-content-red: #C58882;
--color-content-yellow: #EAD2AC;
--color-content-blue: #D1DEDE;
--color-content-pink: #DF928E;
--color-background-second: #404040;
}
* {
font-family: var(--main-font);
font-weight: var(--main-font-weight);
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
background-color: var(--color-background-second);
width: 100%;
height: 5rem;
box-shadow: 0px 5px 10px 2px black;
margin-top: -3px;
}
#navbar>ul {
display: flex;
list-style-type: none;
font-size: 2.1rem;
min-height: 100%;
}
#navbar>ul>li {
padding: 1vw;
min-height: 100%;
display: flex;
align-items: center;
transition: ease-out 0.3s;
}
#navbar>ul>li>a {
text-decoration: none;
color: var(--color-content-red);
max-height: 100%;
}
li:hover {
background-color: rgba(0, 0, 0, 0.5);
}
#welcome-section {
display: flex;
align-items: center;
background-color: var(--color-background-first);
min-height: 100vh;
}
#welcome-section>div {
max-width: 65vh;
margin-left: 3vw;
margin-right: 3vw;
}
#welcome-section>div>h1 {
color: var(--color-content-yellow);
letter-spacing: 0.2em;
font-size: 4rem;
margin-top: 7rem;
}
#first-line {
color: var(--color-content-blue);
text-align: center;
letter-spacing: 0.2em;
margin: 2em auto 0 auto;
font-size: 3rem;
}
#second-line {
color: var(--color-content-pink);
text-align: center;
letter-spacing: 0.2em;
font-size: 2rem;
font-style: italic;
}
#project-link {
font-size: 15pt;
padding: 1rem;
border-radius: 3px;
border: none;
background-color: #404040;
color: white;
transition: ease-in-out 0.2s;
text-align: center;
}
#project-link:hover {
cursor: pointer;
background-color: var(--color-content-red);
}
#project-link>i {
transition: ease-in-out 0.2s;
}
#project-link:hover>i {
transform: translateX(5px);
}
#welcome-section>i {
font-size: 1500%;
color: var(--color-background-first);
}
#emoji {
margin: 0 auto;
transition: ease-in 0.5s;
}
#project-link:hover+#emoji {
color: var(--color-content-blue);
}
#projects {
min-height: 100%;
width: 100%;
background-color: var(--color-content-red);
display: flex;
justify-content: center;
}
tile-image {
aspect-ratio: 1 / 1;
}
#project-tiles-container {
display: grid;
grid-template-columns: repeat(2, minmax(2px, 500px));
grid-gap: 4rem;
max-width: 80%;
max-width: 1280px;
margin: 0 2rem 6rem 2rem;
justify-content: center;
padding-top: 3rem;
}
.tile-desc {
padding: 2rem;
text-align: center;
background-color: var(--color-background-first);
}
.project-tile {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--color-content-yellow);
font-size: 1.2em;
box-shadow: 0px 0px 30px 1px black;
}
.code {
font-size: 100%;
color: var(--color-background-first);
transition: ease-out 0.5s;
}
.align-right {
transform: translateX(20px);
}
.align-left {
transform: translateX(-20px);
}
.project-tile:hover .align-left {
transform: translateX(0px);
color: var(--color-content-blue);
}
.project-tile:hover .align-right {
transform: translateX(0px);
color: var(--color-content-blue);
}
#contact-section-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: var(--color-content-yellow);
color: var(--color-background-second);
text-shadow: 2px 1px 0px var(--color-content-pink);
gap: 1vh;
}
#contact-section-container>div {
display: flex;
gap: 4rem;
font-size: 1.8rem;
max-width: 80%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#contact-section-container>div>div>a {
text-decoration: none;
color: var(--color-background-second);
}
#contact-section-container>div>h1 {
font-size: 4rem;
text-align: center;
}
#contact-section-container>div>div {
display: flex;
align-items: center;
}
.contact-icon {
font-size: 2rem;
}
#contact-section-container>div>div>a {
transition: ease-out 0.2s;
}
#contact-section-container>div>div>a:hover {
transform: translateY(8px);
}
#media only screen and (max-width: 1000px) {
#welcome-section {
display: flex;
flex-direction: column;
margin: auto;
justify-content: center;
width: 100%;
text-align: center;
gap: 3rem;
}
html {
font-size: 75%;
}
#welcome-section>div>h1 {
margin-top: 12rem;
}
#project-tiles-container {
display: grid;
grid-template-columns: repeat(2, minmax(2px, 500px));
grid-gap: 4rem;
max-width: 80%;
max-width: 1280px;
margin: 0 2rem 6rem 2rem;
justify-content: center;
padding-top: 3rem;
}
#projects {
font-size: 150%;
}
#contact-section-container>div {
font-size: 200%;
}
}
#media only screen and (max-width: 800px) {
#project-tiles-container {
display: grid;
grid-template-columns: repeat(1, minmax(50px, 350px));
grid-gap: 4rem;
width: 80%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
justify-content: center;
align-items: center;
}
#projects {
font-size: 150%;
}
}
#media only screen and (max-width: 330px) {
html {
font-size: 50%;
}
#projects {
font-size: 200%;
}
}
<!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">
<script src="https://kit.fontawesome.com/7290e96d25.js" crossorigin="anonymous"></script>
<title>Robin Weiss</title>
</head>
<body>
<main id="main">
<nav id="navbar">
<ul>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
<section id="welcome-section">
<div id="container-about">
<h1>Hello, welcome to my portfolio!</h1>
<p id="first-line">I’m Robin</p>
<p id="second-line">a web developer</p>
</div>
<a id="project-link" href="https://codepen.io/weissrobin">
See all projects! <i class="fa-solid fa-chevron-right "></i>
</a>
<i id="emoji" class="fa-regular fa-face-smile-wink code "></i>
</section>
<section id="projects">
<div id="project-tiles-container">
<a class="project-tile" target="_blank" href="https://codepen.io/weissrobin/full/OJQMRvd">
<img class="tile-image" src="https://i.pinimg.com/564x/81/4d/6c/814d6c2caabab89b3c2608db7a11a6ba.jpg" alt="">
<p class="tile-desc">
<i class="fa-solid fa-chevron-left icon code align-left"></i> Survey Form
<i class="fa-solid fa-chevron-right icon code align-right"></i>
</p>
</a>
<a class="project-tile" target="_blank" href="https://codepen.io/weissrobin/full/KKQdYQw">
<img class="tile-image" src="https://i.pinimg.com/564x/7d/54/d0/7d54d0a35d57de79dacfe8662661523f.jpg" alt="">
<p class="tile-desc">
<i class="fa-solid fa-chevron-left icon code align-left"></i> Tribute Page
<i class="fa-solid fa-chevron-right icon code align-right"></i>
</p>
</a>
<a class="project-tile" target="_blank" href="https://codepen.io/weissrobin/full/zYRreRR">
<img class="tile-image" src="https://i.pinimg.com/564x/5f/ea/74/5fea74ebc53df1b0ad3534a1523b1256.jpg" alt="">
<p class="tile-desc">
<i class="fa-solid fa-chevron-left icon code align-left"></i> Product Page
<i class="fa-solid fa-chevron-right icon code align-right"></i>
</p>
</a>
<a class="project-tile" href="">
<img class="tile-image" src="" alt="">
</a>
</div>
</section>
<section id="contacts">
<div id="contact-section-container">
<div>
<h1>Lets work together</h1>
</div>
<div>
<div>
<a target="_blank" href="https://www.facebook.com/robin.hubacek/">
<i class="fa-brands fa-facebook contact-icon"></i>Facebook
</a>
</div>
<div>
<a target="_blank" href="https://www.instagram.com/robiwei/">
<i class="fa-brands fa-instagram-square contact-icon"></i>Instagram
</a>
</div>
<div>
<a id="profile-link" target="_blank" href="https://github.com/WeissRobin">
<i class="fa-brands fa-github-square contact-icon"></i>GitHub
</a>
</div>
<div>
<a href="">
<i class="fa-solid fa-at contact-icon"></i>Send a mail
</a>
</div>
<div>
<a href="">
<i class="fa-solid fa-mobile-screen contact-icon"></i>Call me
</a>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Everyone, I face a problem, please first look image, then check my code, i am shohel in image. I want to scroll down with icon add or move in my image right side and same social media icon in my image left side as like Ansell Klee image. and when i right bottom increase but not any happened in my browser, not working, why this happened? I don't understand Advanced love and thanks.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
--first-hue: 250;
--sat:66%;
--lig:75%;
--second-hue:219;
--first-color: hsl(var(--first-hue),var(--sat),var(--lig));
--first-color-alt : hsl(var(--first-hue),var(--sat),71%);
--titel-color: hsl(var(--second-hue),15%,95%);
--text-color: hsl(var(--second-hue),8%,75%);
--text-color-light: hsl(var(--second-hue),4%,55%);
--body-color:hsl(var(--second-hue),48%,8%);
--container-color:hsl(var(--second-hue), 32%,12%);
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif ;
--biggest-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-bold: 700;
/*========== Margenes Bottom ==========*/
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
#media screen and (min-width: 968px) {
:root {
--biggest-font-size: 2.5rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/* Base */
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
scroll-behavior: smooth;
}
body,button,input,textarea{
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
body{
background-color: var(--body-color);
color: var(--text-color);
}
h1,h2,h3{
color: var(--titel-color);
font-weight: var(--font-medium);
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
button{
cursor: pointer;
border: none;
outline: none;
}
img{
max-width: 100%;
height: auto;
}
.container{
max-width: 968px;
margin-left: 1rem;
margin-right: 1rem;
}
.grid{
display: grid;
gap: 1.25rem;
}
.main{
overflow: hidden;
}
.section{
padding: 4.5rem 0 1rem;
}
.section__title,
.section__subtitle{
text-align: center;
}
.section__title{
font-size: var(--h2-font-size);
color: var(--first-color);
margin-bottom: 2rem;
}
.section__subtitle{
display: block;
font-size:var(--smaller-font-size) ;
color: var(--text-color-light);
}
/* header and nav */
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color:var(--body-color);
z-index: var(--z-fixed);
}
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo{
color: var(--first-color);
font-weight: var(--font-medium);
transition: .4s;
}
.nav__logo:hover{
color: var(--first-color-alt);
}
.nav__menu{
position: fixed;
bottom: 1rem;
background: hsla(var(--second-hue),32%,16%,.8);
width: 90%;
border-radius: 4rem;
padding: 1rem 2.25rem;
backdrop-filter: blur(10px);
}
.nav__list{
display:flex ;
justify-content: space-between;
align-items: center;
}
.nav__link{
color: var(--text-color);
font-size: 1.25rem;
padding: .4rem;
display: flex;
border-radius: 5rem;
}
/* acrive-link */
.active-link{
background: linear-gradient(180deg,hsla(var(--first-hue),var(--sat),var(--lig),1), hsla(var(--first-hue),var(--sat),var(--lig),.2)
);
box-shadow: 0 0 16px hsla(var(--first-hue),var(--sat),var(--lig),.4);
}
/* home */
.home__container{
position: relative;
row-gap: 4.5rem;
padding-top: 2rem;
}
.home__data{
text-align: center;
}
.home__greeting,
.home__education{
font-size: var(--small-font-size);
font-weight: var(--font-medium);
}
.home__greeting{
display: block;
color: var(--titel-color);
margin-bottom: .25rem;
}
.home__education{
color: var(--text-color);
margin-bottom: 2.5rem;
}
.home__name{
font-size: var(--biggest-font-size);
}
.home__img{
width:160px;
}
.home__handel{
justify-self: center;
width: 190px;
height: 244px;
background: linear-gradient(180deg,
hsla(Var(--first-hue), var(--sat), var(--lig),1),
hsla(Var(--first-hue), var(--sat), var(--lig), .2)
);
border-radius: 10rem 10rem 1rem 1rem;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.home__buttons{
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
}
.home__social,
.home-scroll
{
position:absolute ;
}
.home__social{
bottom: 9rem;
left: 0;
display: grid;
row-gap: .5rem;
}
.home__social-link{
width: max-content ;
background-color: var(--container-color);
color: var(--text-color);
padding: .25rem;
border-radius: .25rem;
display: flex;
font-size: 1rem;
transition: .4s;
}
.home__social-link:hover{
background-color: var(-first-color);
color:#fff;
}
.home__social::after{
content: '';
width: 32px;
height: 2px;
background-color: var(--first-color);
transform: rotate(90deg) translate(16px,3px);
}
.home__scroll{
color: var(--first-color);
right: -1.5rem;
bottom: 4rem;
display: grid;
row-gap: 2.25rem;
justify-items: center;
}
.home__scroll-icon{
font-size: 1.25rem;
}
.home__scroll-name{
font-size: var(--smaller-font-size);
transform: rotate(-90deg);
}
.button{
display: inline-block;
background-color: var(--first-color);
color: var(--body-color);
padding: .75rem 1rem;
border-radius: .5rem;
font-weight: var(--font-medium);
transition: .4s;
}
.button:hover{
background-color:var(--first-color-alt);
color: var(--body-color);
}
.button-ghost{
background-color: transparent;
border: 2px solid var(--first-color);
color: var(--first-color);
}
<!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>Responsive shohel Portfolio Website </title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<script src="./script.js" defer></script>
</head>
<body>
<header class="header" id="header">
<nav class="nav container">
Shohel
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class='bx bx-home-alt'></i>
</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">
<i class='bx bx-user' ></i>
</a>
</li>
<li class="nav__item">
<a href="#skills" class="nav__link">
<i class='bx bx-book' ></i>
</a>
</li>
<li class="nav__item">
<a href="#work" class="nav__link">
<i class='bx bx-briefcase-alt-2' ></i>
</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">
<i class='bx bx-message-square-detail' ></i>
</a>
</li>
</ul>
</div>
<!-- theme change button -->
<i class='bx bx-moon change-theme' id="theme-button" ></i>
</nav>
</header>
<!-- Main -->
<main class="main">
<!--Home -->
<section class="home section" id="home">
<div class="home__container container grid">
<div class="home__data">
<span class="home__greeting">Hellow, I'm</span>
<h1 class="home__name">Shohel</h1>
<h3 class="home__education">Frontend Developer</h3>
<div class="home__buttons">
Download CV
About Me
</div>
</div>
<div class="home__handel">
<img src="./img/IMG_20220127_145041_1-02-removebg-preview.png" alt="" class="home__img">
</div>
<div class="home__social">
<a href="" class="home__social-link">
<i class='bx bxl-linkedin-square' ></i>
</a>
<a href="" class="home__social-link">
<i class='bx bxl-github' ></i>
</a>
<a href="" class="home__social-link">
<i class='bx bxl-dribbble' ></i>
</a>
</div>
<a href="" class="home__scroll">
<i class='bx bx-mouse home__scroll-icon' ></i>
<span class="home__scroll-name">Scroll Down</span>
</a>
</div>
</section>
</main>
</body>
</html>
add a property as position:absolute to the same class
.home__scroll{color: var(--first-color);
right: -1.5rem;
bottom: 11rem;
display: grid;
row-gap: 2.25rem;
justify-items: center;
position: absolute;}
You need to add property position: absolute; OR position: fixed; according to your requirement before adding top:; OR right:; OR bottom:; OR left:;
This is because these properties only work with positioned elements other than position: static;
For some reason, the bottom border on my button disappears on hover, and I have no idea why. It works perfectly locally, but when I check my site live it disappears.
Here is my Codepen https://codepen.io/ecanada138/pen/ExXRXoW, which is the exact code on my repo.
Here is the site https://8thvisionmedia.netlify.app/, where you can see the problem but it does not show up on CodePen or locally
#font-face {
font-family: cocogoose-regular;
src: url('../fonts/Cocogoose-Classic-Medium-trial.ttf');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0px 10px 0px 10px;
border-right: 1px solid rgb(255, 255, 255);
height: 20px;
}
.vimeo-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
/* pointer-events: none; */
overflow: hidden;
}
.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw;
/* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh;
/* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* z-index: -1; */
}
.phone-nav {
display: none;
}
.navbar-nav {
display: flex;
flex-direction: column;
margin-top: 1rem;
color: rgb(255, 255, 255);
font-size: 1rem;
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 0.1rem;
border: 1px solid rgb(255, 255, 255);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggler:focus {
box-shadow: none;
}
.desktop-nav-container {
flex-direction: row;
justify-content: center;
}
/* .nav-link-desktop::after{
content: ' |';
} */
#media screen and (max-width: 992px) {
.phone-nav {
display: block;
}
}
.home-container {
height: 100vh;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
}
.home-row {
padding: 0 10rem 0 10rem;
z-index: 1000;
}
.home-text {
text-align: center;
font-size: 1.2rem;
letter-spacing: 3px;
}
.home-col {
width: 100%;
}
.col-logo {
position: absolute;
left: 2rem;
bottom: 1rem;
margin-bottom: 0.5rem;
padding: 0;
}
.row-copyright {
position: absolute;
right: 2rem;
bottom: 1rem;
font-family: 'Montserrat', sans-serif;
}
.vision-media-logo {
width: 3rem;
}
a {
color: rgb(255, 255, 255) !important;
font-size: 14px;
}
.fa {
font-size: 2rem;
}
ul {
text-align: center;
}
#media screen and (min-width: 1399px) {
.home-row {
padding: 0 20rem 0 20rem;
}
}
#media screen and (min-width: 1800px) {
.home-row {
padding: 0 35rem 0 35rem;
}
}
#media screen and (min-width: 2200px) {
.home-row {
padding: 0 50rem 0 50rem;
}
}
#media screen and (max-width: 767px) {
.navbar-nav {
margin-right: 0;
}
.home-row {
padding: 0 3rem 0 3rem;
}
}
#media screen and (max-width: 575px) {
.home-row {
padding: 0 1rem 0 1rem;
margin-top: -8rem;
}
.home-text {
font-size: 1rem;
}
.vision-media-logo {
width: 2rem;
}
.col-logo {
position: absolute;
left: 1rem;
bottom: 1rem;
}
.row-copyright {
position: absolute;
right: 1rem;
bottom: 0rem;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}
}
/* .myIcon {
margin-left: 3rem;
margin-right: 3rem;
}
.hide {
visibility: hidden;
font-size: 1rem;
margin-top: 10px;
opacity: 0;
text-transform: uppercase;
text-align: center;
transition: 0.8s;
}
.myIcon:hover .hide {
visibility: visible;
opacity: 1;
}
.myIcon {
z-index: 1000;
}
*/
#media screen and (max-width: 576px) {
.vimeo-wrapper {
background-image: url('../images/home-screen-bg.jpg');
background-position: center;
background-size: cover;
}
.vimeo-wrapper iframe {
display: none;
}
.phone-container {
position: relative;
}
}
#media screen and (max-width: 515px) {
.fa-col {
display: flex;
flex-direction: row;
}
}
#media screen and (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
.desktop-nav-container {
display: none !important;
}
}
.col-copyright {
margin-bottom: 1rem;
}
#media screen and (max-width: 992px) {
.navbar-nav a {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0px;
padding: 0.5rem 1rem;
border: none;
height: 100%;
font-size: 1rem;
}
}
.create-button {
background-color: rgba(255, 255, 255, 0);
color: rgb(255, 255, 255);
outline: 0;
border: 1px solid rgb(255, 255, 255) !important;
border-bottom: 1px solid rgb(255, 255, 255) !important;
font-family: 'cocogoose-regular';
letter-spacing: 2px;
margin: auto;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
transition: 0.5s ease;
}
.create-button a {
text-decoration: none;
}
.create-button:hover {
background-color: rgba(255, 255, 255, 0.3);
/* color: rgb(255, 255, 255); */
/* outline: 0; */
/* border: 1px solid rgb(255, 255, 255); */
/* font-family: 'cocogoose-regular'; */
/* letter-spacing: 2px; */
/* width: 100%; */
/* padding: 1rem 2rem; */
transform: scale(1.1);
}
<!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" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5826f42d14.js" crossorigin="anonymous"></script>
<!-- Fonts -->
<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=Montserrat:wght#400&display=swap" rel="stylesheet" />
<!-- CSS SHEETS -->
<link rel="stylesheet" href="css/index.css" />
<title>8th Vision Media | Real Estate Video and Photo Production</title>
<link rel="shortcut icon" type="image/png" href="./images/8-vision-logo-favicon.ico" />
</head>
<body>
<!--------------------------------------- NAV BAR --------------------------------------------------->
<div class="phone-container">
<nav class="navbar navbar-expand-xxxxxxl phone-nav">
<div class="container-fluid">
<button class="navbar-toggler custom-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-end" id="navbarNav">
<ul class="navbar-nav flex-column">
<!-- <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="./gallery.html">Video Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./core-values.html">Core Values </a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Get In Touch</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="./our-people.html">Our People</a>
</li> -->
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://www.instagram.com/8thvisionmedia/">Our Work</a
>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg desktop-nav">
<div class="container-fluid">
<div
class="collapse navbar-collapse desktop-nav-container"
id="navbarNavAltMarkup"
>
<div class="navbar-nav">
<a
class="nav-link nav-link-desktop"
aria-current="page"
href="./contact.html"
>Get In Touch</a
>
<a class="nav-link nav-link-desktop" href="./core-values.html"
>Core Values
</a>
<a class="nav-link nav-link-desktop" href="./gallery.html">Video Gallery</a
>
<a
style="border-right: none; text-decoration: none"
target="_blank"
href="https://www.instagram.com/8thvisionmedia/"
>Our Work</a
>
</div>
</div>
</div>
</nav>
<div class="vimeo-wrapper">
<iframe
src="https://player.vimeo.com/video/570788340?background=1&autoplay=1&loop=1&byline=0&title=0"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
<div>
<div class="container-fluid home-container">
<div class="row home-row">
<div class="col home-col">
<!-- <p class="home-text">
We create powerful visual content for brands that help drive
sales, growth and engagement.
</p> -->
<button
onClick="window.open('https://www.8thvisionmedia.com/contact');"
class="create-button"
>
<a
href="./contact.html
"
>CREATE WITH US
</a>
</button>
</div>
</div>
<!-- <div class="row fa-row text-center">
<div class="col fa-col">
<span>
<a
href="https://www.instagram.com/8thvisionmedia/"
target="_blank"
><i class="myIcon fab fa-instagram fa-2x"
><p class="hide">What We Do</p></i
></a
></span
><span
><a href="mailto:create#8thvisionmedia.com"
><i class="myIcon far fa-envelope fa-2x"
><p class="hide">Take Your Next Step</p></i
></a
>
</span>
</div>
</div> -->
<div class="row row-logo">
<div class="col col-logo">
<img class="vision-media-logo" src="./images/8th-vision-logo.png" />
</div>
</div>
<div class="row row-copyright">
<div class="col col-copyright">
<a>© 2021 8th Vision Media</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
remove transform: scale(1.1);
it worked
It worked fine on firefox. But I saw the issue on edge. and solved it by adding padding to .home-col class.
add the following and it should work fine:
.home-col {
padding: 10px;
}
I dont know exactly the reason, but changing "scale" value will solve the problem :
transform: scale(1.2); for example
hi uh how do I put the footer underneath my side nav, it works for my header but I don't know how to do it for the actual footer.
also sorry uh another question, how do I make it so the wording on like a smaller screen shows? because the side nav goes to the bottom of the page but the words don't show
Right now your footer is contained within your main tag:
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
<div class="footer">
<footer>
<p>Copyright © 2021 My Portfolio</p>
</div>
</main>
Your main tag doesn't take the whole width of the page, which is why the footer is smaller than your header.
Putting your footer outside of the main tag will fix your issue
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
</main>
<div class="footer">
<footer>
<p>Copyright © 2021 My Portfolio</p>
</div>
You are missing a few matching tags so please always be weary of that, you can do the following if this is what you are referring to:
You can create a new nav-item element:
<li class="nav-item">
Copyright © 2021 My Portfolio
</li>
:root {
font-size: 17px;
font-family: 'Open Sans';
--text-primary: black;
--text-secondary: white;
--bg-primary: white;
--bg-secondary: #4F3466FF;
--transition-speed: 600ms;
}
body {
color: black;
background-color: white;
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: black;
}
body::-webkit-scrollbar-thumb {
background: #93385FFF;
}
main {
margin-left: 5rem;
padding: 1rem;
}
.navbar {
position: fixed;
background-color: #93385FFF;
transition: width 600ms ease;
overflow: scroll;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 10;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.nav-item {
width: 100%;
}
.nav-item:last-child {
margin-top: auto;
}
.nav-link {
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: black;
transition: var(--transition-speed);
}
.nav-link:hover {
filter: grayscale(0%) opacity(1);
background: var(--bg-secondary);
color: var(--text-secondary);
}
.link-text {
display: none;
margin-left: 1rem;
}
.nav-link svg {
width: 50rem;
min-width: 2rem;
margin: 0 1.5rem;
}
.navbar:hover .logo svg {
transform: rotate(-180deg);
}
#media only screen and (max-width: 600px) {
.navbar {
bottom: 0;
width: 100vw;
height: 5rem;
}
.logo {
display: none;
}
.navbar-nav {
flex-direction: row;
}
.nav-link {
justify-content: center;
}
main {
margin: 100;
}
}
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
}
.navbar:hover {
width: 20rem;
}
.navbar:hover .link-text {
display: inline;
}
.navbar:hover .logo svg
{
margin-left: 20rem;
}
.navbar:hover .logo-text
{
left: 0px;
}
}
.logo {
font-weight: bold;
text-transform: uppercase;
margin-bottom: 1rem;
text-align: center;
color: var(--text-secondary);
background: var(--bg-secondary);
font-size: 1.5rem;
letter-spacing: 0.3ch;
width: 100%;
}
.logo svg {
transform: rotate(0deg);
transition: var(--transition-speed);
}
.logo-text
{
display: inline;
position: absolute;
left: -999px;
transition: var(--transition-speed);
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.header {
padding: 10px;
text-align: center;
background: #4F3466FF;
color: white;
font-size: 30px;
}
a {
color: #9F6B99FF;
}
a:visited {
color: #636;
}
a:hover, a:active, a:focus {
color: black;
}
.footer {
text-align: center;
background-color: #4F3466FF;
color: white;
size: 15px
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="theme.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet" />
</head>
<div class="header">
<h3> Level 2 Website Development Page </h3>
<img src=http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg>
</div>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Digital Portfolio</span>
<svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="angle-double-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x">
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<li class="nav-item">
<a href="home.html" class="active">
<span class="link-text">Home</span>
</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">
<span class="link-text">About Me & CV & Hobbies</span>
</a>
</li>
<li class="nav-item">
<a href="units.html" class="nav-link">
<span class="link-text">Units</span>
</a>
</li>
<li class="nav-item">
<a href="unit1.html" class="nav-link">
<span class="link-text">Unit 1: The Online World</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 2: Technology Systems</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 3 & 13: Website Development & Software Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 9: Spreadsheet Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 10: Database Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Unit 12: Software Development</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="link-text">Contact Me</span>
</a>
</li>
<li class="nav-item">
Copyright © 2021 My Portfolio
</li>
</ul>
</nav>
<article>
<main>
<section>
<article>
<h1> Homepage </h1>
<p> ......................... </p>
</article>
</section>
<div class="footer">
</div>
</main>
</article>
</body>
Am unable to get what you are asking. Is this what you expecting ?
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #fff;
color: #444;
}
h1, p {
margin: 0 0 1em 0;
}
.wrapper {
max-width: 940px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
}
#media screen and (min-width: 500px) {
/* no grid support? */
.sidebar {
float: left;
width: 19.1489%;
}
.content {
float: right;
width: 79.7872%;
}
.wrapper {
margin: 0 auto;
grid-template-columns: 1fr 3fr;
}
.header, .footer {
grid-column: 1 / -1;
/* needed for the floated layout */
clear: both;
}
}
.wrapper > * {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
/* needed for the floated layout*/
margin-bottom: 10px;
}
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
<div class="wrapper">
<header class="header">My header</header>
<aside class="sidebar">Sidebar</aside>
<article class="content">
<h1>2 column, header and footer</h1>
<p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
</article>
<footer class="footer">My footer</footer>
</div>