It’s been a loong time since I did HTML and CSS, and I’m playing around with grid-layout, but can’t get it to work.
I have made a burger menu, that, when I click it, should toggle the display attribute and show the menu tag. This works, but because the grid is also inside a element, the content of the grid is not filling the whole parent element, just a part of it.
Also, I would like the LinkedIn and WhatsApp icon to be in the lower right corner of the blue rectangle. I have tried with divs and position, but that ruined a lot and had a weird behaviour.
Anyone knows what I’m doing wrong?
function nav_burger(burger) {
burger.classList.toggle("morph");
var e = document.getElementById("navigation");
if (e.style.display === "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100vh;
width: 100vw;
}
div#scaffold_screen {
display: flex;
height: 100%;
}
/* scl = scaffold container left */
div#scr {
height: 100%;
width: 50%;
/* width: 66%; */
padding: 30px 30px 30px 15px;
}
/* scr = scaffold container right */
div#scl {
height: 100%;
width: 50%;
/* width: 34%; */
padding: 30px 15px 30px 30px;
}
/* scc = scaffold content container */
div.scc {
height: 100%;
width: 100%;
}
/** GRID LAYOUT **/
.grid {
display: grid;
grid-template-columns: repeat(14, 1fr);
/** grid-column-gap: 20px; **/
/** changed to gap since deprecated **/
/** column-gap: 20px; **/
gap: 20px;
/** horizontal and vertical gap **/
padding: 0px;
}
/** it divides the screen in 14, counting up the grids auto shifting lines **/
.gridbox-1 {
grid-column: span 1;
border: 0px solid #00ff00;
}
.gridbox-2 {
grid-column: span 2;
border: 0px solid #ffff00;
}
.gridbox-3 {
grid-column: span 3;
}
.gridbox-4 {
grid-column: span 4;
}
.gridbox-5 {
grid-column: span 5;
}
.gridbox-6 {
grid-column: span 6;
}
.gridbox-7 {
grid-column: span 7;
}
.gridbox-8 {
grid-column: span 8;
border: 0px solid #0ffff0;
}
.gridbox-9 {
grid-column: span 9;
}
.gridbox-10 {
grid-column: span 10;
border: 0px solid #00ffff;
}
.gridbox-11 {
grid-column: span 11;
}
.gridbox-12 {
grid-column: span 12;
}
.gridbox-13 {
grid-column: span 13;
}
.gridbox-14 {
grid-column: span 14;
border: 0px solid #00ff00;
}
/** LOGO **/
/* logo container */
div#logo {
font-family: 'Red Hat Text';
font-size: 34pt;
letter-spacing: 1.8pt;
padding: 15px 0px 0px 30px;
}
/* logo color 1 */
span.logo_c1 {
color: #ffffff;
}
/* logo color 2 */
span.logo_c2 {
color: #06d6a0;
font-weight: bold;
}
/** NAVIGATION **/
div#navigation_icon {
cursor: pointer;
padding: 25px 30px 0px 0px;
}
/** navgivation burger icon **/
div.burgerbar1,
div.burgerbar2,
div.burgerbar3 {
width: 35px;
height: 5px;
background-color: #ffffff;
margin-top: 6px;
margin-right: 0;
margin-left: auto;
transition: 0.4s;
}
.morph .burgerbar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.morph .burgerbar2 {
opacity: 0;
}
.morph .burgerbar3 {
transform: translate(0, -11px) rotate(45deg);
}
nav#navigation {
color: #ffffff;
display: none;
font-size: 40pt;
margin-top: 100px;
}
nav#navigation p {
letter-spacing: 1.1pt;
margin-top: -20px;
padding: 10px 0px 0px 80px;
}
nav#navigation p.description {
font-size: 14pt;
font-style: italic;
color: #efefef;
padding: 10px 0px 50px 90px;
}
nav#navigation p a {
color: #ffffff;
text-decoration: none;
}
nav#navigation p a:hover {
color: #06d6a0;
text-decoration: none;
}
/** HEADER TAGS **/
h1 {
font-size: 34pt;
font-family: 'Red Hat Text';
margin: 0px 0px 30px 0px;
}
<div id="scaffold_screen">
<div id="scl">
<div class="scc" style="background-color: #003388;">
<div class="grid">
<div class="gridbox-13">
<div id="logo"><span class="logo_c1">my website</span><span class="logo_c2">.</span></div>
</div>
<div class="gridbox-1">
<div id="navigation_icon" onclick="nav_burger(this)">
<div class="burgerbar1"></div>
<div class="burgerbar2"></div>
<div class="burgerbar3"></div>
</div>
</div>
<nav id="navigation" style="display: none; border: 0px solid #ff0000;">
<div class="gridbox-14">
<p><a href="#">my website.</a></p>
<p class="description">very looong text</p>
</div>
<div class="gridbox-14">
<p><a href="#">some day we like</a></p>
<p class="description">a very looong text, but even longer</p>
</div>
<div class="gridbox-14">
<p><a href="#">discover</a></p>
<p class="description">tired of long texts</p>
</div>
<div class="gridbox-14">
<p><a href="#">just</a></p>
<p class="description">heeelp</p>
</div>
</nav>
<div class="gridbox-14">
<p style="padding: 0px 30px 30px 0px; text-align: right;"><i class="fa-brands fa-linkedin" style="color: #ffffff; font-size: 15pt;"></i> <i class="fa-brands fa-whatsapp" style="color: #ffffff; font-size: 15pt;"></i></p>
</div>
</div>
</div>
</div>
<div id="scr" style="overflow-y: scroll;">
<div class="scc">
<div style="width:100%; height:100%; background-image: url('images/front/a.jpg'); background-size: cover; background-repeat: no-repeat;"> </div>
</div>
</div>
</div>
—– The CSS ——
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100vh;
width: 100vw;
}
div#scaffold_screen {
display: flex;
height: 100%;
}
/* scl = scaffold container left */
div#scr {
height: 100%;
width: 50%;
/* width: 66%; */
padding: 30px 30px 30px 15px;
}
/* scr = scaffold container right */
div#scl {
height: 100%;
width: 50%;
/* width: 34%; */
padding: 30px 15px 30px 30px;
}
/* scc = scaffold content container */
div.scc {
height: 100%;
width: 100%;
}
/** GRID LAYOUT **/
.grid {
display: grid;
grid-template-columns: repeat(14, 1fr);
/** grid-column-gap: 20px; **/ /** changed to gap since deprecated **/
/** column-gap: 20px; **/
gap: 20px; /** horizontal and vertical gap **/
padding: 0px;
}
/** it divides the screen in 14, counting up the grids auto shifting lines **/
.gridbox-1 { grid-column: span 1; border: 0px solid #00ff00; }
.gridbox-2 { grid-column: span 2; border: 0px solid #ffff00; }
.gridbox-3 { grid-column: span 3; }
.gridbox-4 { grid-column: span 4; }
.gridbox-5 { grid-column: span 5; }
.gridbox-6 { grid-column: span 6; }
.gridbox-7 { grid-column: span 7; }
.gridbox-8 { grid-column: span 8; border: 0px solid #0ffff0;}
.gridbox-9 { grid-column: span 9; }
.gridbox-10 { grid-column: span 10; border: 0px solid #00ffff;}
.gridbox-11 { grid-column: span 11; }
.gridbox-12 { grid-column: span 12; }
.gridbox-13 { grid-column: span 13; }
.gridbox-14 { grid-column: span 14; border: 0px solid #00ff00; }
/** LOGO **/
/* logo container */
div#logo {
font-family: 'Red Hat Text';
font-size: 34pt;
letter-spacing: 1.8pt;
padding: 15px 0px 0px 30px;
}
/* logo color 1 */
span.logo_c1 { color: #ffffff; }
/* logo color 2 */
span.logo_c2 { color: #06d6a0; font-weight: bold; }
/** NAVIGATION **/
div#navigation_icon {
cursor: pointer;
padding: 25px 30px 0px 0px;
}
/** navgivation burger icon **/
div.burgerbar1, div.burgerbar2, div.burgerbar3 {
width: 35px;
height: 5px;
background-color:#ffffff;
margin-top: 6px;
margin-right: 0;
margin-left: auto;
transition: 0.4s;
}
.morph .burgerbar1 { transform: translate(0, 11px) rotate(-45deg); }
.morph .burgerbar2 { opacity: 0; }
.morph .burgerbar3 { transform: translate(0, -11px) rotate(45deg); }
nav#navigation {
color: #ffffff;
display: none;
font-size: 40pt;
margin-top: 100px;
}
nav#navigation p { letter-spacing: 1.1pt; margin-top: -20px; padding: 10px 0px 0px 80px; }
nav#navigation p.description { font-size: 14pt; font-style: italic; color: #efefef; padding: 10px 0px 50px 90px; }
nav#navigation p a { color: #ffffff; text-decoration: none; }
nav#navigation p a:hover { color: #06d6a0; text-decoration: none; }
/** HEADER TAGS **/
h1 { font-size: 34pt; font-family: 'Red Hat Text'; margin: 0px 0px 30px 0px; }
—– The HTML —–
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- fontawesome.com -->
<script src="https://kit.fontawesome.com/46d80123d5.js" crossorigin="anonymous"></script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Alexandria&family=Anek+Latin&family=Inter&family=M+PLUS+1&family=Montserrat&family=Noto+Sans+Display&family=Noto+Serif+Display&family=Open+Sans&family=Quicksand&family=Red+Hat+Display&family=Red+Hat+Text&family=Source+Serif+4:opsz@8..60&display=swap');
</style>
<link rel="stylesheet" href="css/screen.css">
<title>my website</title>
</head>
<body>
<div id="scaffold_screen">
<div id="scl">
<div class="scc" style="background-color: #003388;">
<div class="grid">
<div class="gridbox-13"><div id="logo"><span class="logo_c1">my website</span><span class="logo_c2">.</span></div></div>
<div class="gridbox-1">
<div id="navigation_icon" onclick="nav_burger(this)">
<div class="burgerbar1"></div>
<div class="burgerbar2"></div>
<div class="burgerbar3"></div>
</div>
</div>
<nav id="navigation" style="display: none; border: 0px solid #ff0000;">
<div class="gridbox-14"><p><a href="#">my website.</a></p><p class="description">very looong text</p></div>
<div class="gridbox-14"><p><a href="#">some day we like</a></p><p class="description">a very looong text, but even longer</p></div>
<div class="gridbox-14"><p><a href="#">discover</a></p><p class="description">tired of long texts</p></div>
<div class="gridbox-14"><p><a href="#">just</a></p><p class="description">heeelp</p></div>
</nav>
<div class="gridbox-14"><p style="padding: 0px 30px 30px 0px; text-align: right;"><i class="fa-brands fa-linkedin" style="color: #ffffff; font-size: 15pt;"></i> <i class="fa-brands fa-whatsapp" style="color: #ffffff; font-size: 15pt;"></i></p></div>
</div>
</div>
</div>
<div id="scr" style="overflow-y: scroll;">
<div class="scc">
<div style="width:100%; height:100%; background-image: url('images/front/a.jpg'); background-size: cover; background-repeat: no-repeat;"> </div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<!--
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-->
<script>
function nav_burger(burger) {
burger.classList.toggle("morph");
var e = document.getElementById("navigation");
if (e.style.display === "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
</script>
</body>
</html>
You need to sign in to view this answers
Leave feedback about this