So I've been trying to overlap grid 2 over grid 1 without using negative margins but I'm unable to do so please help
Here's my code
index.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>Document</title>
<link rel="stylesheet" href="./styles/styles.css" />
</head>
<body>
<div class="HeaderContainerGrid">
<img src="./svg/background.svg" />
<header>
<h1>Guideline</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
styles.scss
#import './variables';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
img {
width: 100%;
}
header {
grid-template-columns: 1fr 1fr;
display: grid;
align-items: end;
justify-content: end;
h1 {
display: grid;
height: 100%;
align-items: center;
margin-left: 1em;
}
nav {
height: 100%;
display: grid;
align-items: center;
grid-template-columns: 1fr;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-decoration: none;
list-style: none;
}
li {
margin-left: 10px;
margin-right: 10px;
padding: 20px;
text-align: center;
&:hover {
cursor: pointer;
background-color: $secondaryColor;
transition: 0.5s;
color: $onHoverTextColor;
}
}
}
.HeaderContainerGrid {
display: grid;
&:nth-child(1) {
background-color: red;
grid-row: 1 / 2;
z-index: 1
}
&:nth-child(0) {
grid-row: 1 / 2;
z-index: -1
}
}
CodeSandbox URL
Make header position absolute so that it will come out from its normal flow and come over the nearest relative position.
DEMO
header{
position: absolute;
}
.HeaderContainerGrid {
position: relative;
}
Related
I dynamically create grid items. When i create a large amount of grid items I would like them to get smaller and fit into container, instead of having overflow-y: scroll. How can do this ?. I shared my code below :html, css. Would be very grateful if anybody can help me.
By default I divide my container into 4 col, but my goal is , when we creating a lot of items, I want them to fit into container and not create any scroll.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section {
aspect-ratio: 5/2;
border: 1px solid rgb(187, 185, 185);
margin: 0 4rem;
width: 100%;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2em;
height: 100%;
}
.left,
.right {
border: 1px solid rgb(187, 185, 185);
border-radius: 10px;
}
.right {
display: grid;
overflow-y: scroll;
grid-template-columns: repeat(4, 1fr);
align-content: flex-start;
}
.item-place {
width: 100%;
}
.item {
width: 100%;
}
.item img {
width: 100%;
object-fit: cover;
}
<!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>grid-css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button> Create grid item</button>
<section>
<div class="container">
<div class="left"></div>
<div class="right">
<!-- grid items will apear here -->
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
my page contains a grid layout.
I need to display a non permanent element (cookie consent element )
I placed it outside the document flow using position: absolute to not effect the grid layout.
I need every bit of space so I dont want to allocate extra space to a temporary element by adding a extra row
How can I fixate the starting Position of the element even when the page width and height changes ?
.cookie-consent {
background: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 30px;
right: 150px;
z-index: 20;
}
:root {
padding-left: 10%;
padding-right: 10%;
}
.container {
display: grid;
height: 100vh;
margin: auto;
max-width: 80%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
grid-template-areas:
"nav nav nav nav"
"component1 component1 component1 component1"
"component2 component2 component2 component2"
"footer footer footer footer";
grid-gap: 0.5rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
nav {
text-align: center;
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component1 {
background: #6fffd2;
grid-area: component1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component2 {
background: #64ffda;
grid-area: component2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.cookie-consent {
background: red;
width: 200px;
height: 100px;
/* transform: translateX(-80%); */
/* /* margin-top: 50%; */
/* border-radius: var(--main-radius); */
/* margin-top: 30%; */
/* margin-left: 50%; */
/* top: 300px;
left: 30px;
bottom: 100px; */
position: absolute;
bottom: 30px;
right: 150px;
/* top: 5; */
/* right: 20; */
/* left: 2; */
/* bottom: 20; */
z-index: 20;
}
/* place the element cookie on top of the gird layout */
/* */
<!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" />
<!-- add style css to page -->
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="cookie-consent">
</div>
<div class="container">
<nav>Navbar</nav>
<div id="component1">component1</div>
<div id="component2">component2</div>
<footer>Footer</footer>
</div>
</body>
</html>
Use percentages instead of pixels in bottom and right property of .cookie-consent class. I also added overflow: hidden; to the body selector.
Also, consider setting the width and height (red div) not rigidly.
It should be better ;-)
I hope You will be content . Best regards !
:root {
padding-left: 10%;
padding-right: 10%;
}
body {
overflow: hidden;
}
.container {
display: grid;
height: 100vh;
margin: auto;
max-width: 80%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
grid-template-areas: "nav nav nav nav" "component1 component1 component1 component1" "component2 component2 component2 component2" "footer footer footer footer";
grid-gap: 0.5rem;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}
nav {
text-align: center;
background: #a7ffeb;
grid-area: nav;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component1 {
background: #6fffd2;
grid-area: component1;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
#component2 {
background: #64ffda;
grid-area: component2;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
footer {
background: #1de9b6;
grid-area: footer;
border-radius: var(--main-radius);
padding-top: var(--main-padding);
}
.cookie-consent {
background: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 5%;
right: 9%;
z-index: 20;
}
<!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" />
<!-- add style css to page -->
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="cookie-consent">
</div>
<div class="container">
<nav>Navbar</nav>
<div id="component1">component1</div>
<div id="component2">component2</div>
<footer>Footer</footer>
</div>
</body>
</html>
I have four divs on my page and each one of them has a link. The problem is, I want the links to be the same width and height as the boxes, but for some reason the links stretch more than they should, and as a result the whole container which contains the four divs is clickable.
I've tried setting the anchor tags to display:inline-block; but that didn't work.
How do I fix this?
Codepen
EDIT: Fixed it by wrapping the anchor tags in divs.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--nav-clr: #ebebeb;
--box-r: #f94144;
--box-g: #43AA8B;
--box-y: #F9C74F;
--box-b: #577590;
}
body,
html {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
/* nav bar */
nav {
display: flex;
height: 60px;
background-color: var(--nav-clr);
align-items: center;
}
.logo {
width: 150px;
height: auto;
margin-left: 1em;
}
/* buttons */
.box-btn {
/* margin: 20px; */
width: auto;
height: 259px;
background: #43AA8B;
border-radius: 30px;
position: relative;
}
.box-btn::after {
content: '';
position: absolute;
display: inline-block;
/* margin: 20px; */
width: 100%;
bottom: 0;
rightt: 0;
height: 100px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
background: var(--nav-clr);
z-index: 1;
}
.content {
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 250px);
gap: 20px;
/* background-color: red; */
}
/* main */
.main-wrapper {
height: 100vh;
display: grid;
justify-content: center;
grid-template-columns: 80vw;
grid-template-rows: 25% 5% 65%;
/* gap: 20px; */
}
/* header */
.title-wrapper {
margin: 70px;
display: inline-block;
font-size: 1.3em;
text-align: center;
grid-row: 1/3;
}
/* SMALLER SCREENS */
#media screen and (max-width:700px) {
.title-wrapper {
font-size: 1em;
margin: auto;
}
nav {
justify-content: center;
}
}
#media screen and (max-width:626px) {
.content {
grid-template-columns: repeat(auto-fit, 350px);
}
.box-btn {
height: 350px;
}
.box-btn::after {
width: 100%;
height: 135px;
bottom: 0;
}
}
#media screen and (max-width:405px) {
.title-wrapper {
font-size: .8em;
}
}
<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 rel="stylesheet" href="style.css">
<title>T3 Dashboard</title>
</head>
<body>
<div class="wrapper">
<nav>
<a href="http://t3-ks.com/">
<div class="logo-container">
<img src="/t3s.svg" alt="" class="logo">
</div>
</a>
</nav>
<main>
<div class="main-wrapper">
<div class="title-wrapper">
<h1>Menaxhimi i burimeve njerëzore</h1>
</div>
<div class="content">
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
<a href="">
<div class="box-btn"></div>
</a>
</div>
</div>
</main>
</body>
</html>
I tried to change some css in the grey area. Is this what you want? If you want an element to be on the bottom, you can set bottom: 0; to its css when positioned absolute.
I would add to your most external container the css property pointer-events: none and to the internal one pointer-events:all. If what you want is not giving click feature to the external containers, this might solve the issue.
.content > a {
pointer-events: none;
}
.box-btn {
pointer-events: all;
}
I have encountered a problem with the grid layout that I am using.
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 rel="stylesheet" href="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
<div class="text">
<h1>This is the title</h1>
<h3>This is the</br>lorem ispum doler sis amet</h3>
<input type="submit" value="Submit" class="cta">
</div>
<div class="image"></div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;700;900&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
.container{
padding-top: 50px;
width: 95%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 15px;
}
.container > div{
height: 90vh;
}
.image{
background-image: url("img1.jpg");
background-size: cover;
}
.text{
display: flex;
flex-direction: column;
width: 65%;
margin-left: 50px;
}
.text h1{
margin: 50px 0;
font-weight: 900;
font-size: 85px;
}
.text h3{
font-weight: 300;
font-size: 35px;
}
.cat{
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}
#media (max-width: 600px)
{
.container{
grid-template-columns: 1fr;
width: 95%;
}
.image{
width: 95%;
margin-left: auto;
margin-top: 25px;
}
}
However, the image on the right side is not responsive when I minimize the browser.
For this reason, I used media queries. Is this technique correct or is there an easier method?
Is there anything else I should consider about the code and make it responsive?
The idea you have going is correct, but I recommend for you to design first to mobile size then create media queries for your desktop sizes and tablet sizes etc. But, looking at your media query for phone size you do not need to declare a width size, and you need to make sure to include display:grid; in that class as well. You do not need class text and class image, when you declare the main class container and you say that it has two columns by writing grid-template-comlumns is set to 1fr 1fr then any new div inside there will be the new column and it i wll just add more rows the more divs you add.
<!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 rel="stylesheet" href="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
<!-- if you choose to have this class text the class itself would only be for things like padding other than that it is not necessary-->
<div>
<h1>This is the title</h1>
<h3>This is the</br>lorem ispum doler sis amet</h3>
<input type="submit" value="Submit" class="cta">
</div>
<img src ="" />
<!-- as you can see the first div you have with h1 and h3 will be one piece in column 1 and then the img section will be another piece in column 2-->
</div>
css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
/* i would make it first mobile */
.container{
padding-top: 50px;
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 3px;
}
.container > div{
height: 90vh;
}
img{
width: 90%
}
.image{
background-image: url("img1.jpg");
background-size: cover;
}
.text h1{
margin: 50px 0;
font-weight: 900;
font-size: 85px;
}
.text h3{
font-weight: 300;
font-size: 35px;
}
/* i think you mean cta */
.cat{
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}
#media (min-width: 900px)
{
.container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 15px;
}
.image{
width: 95%;
margin-left: auto;
margin-top: 25px;
}
}
"responsive" can mean different things and you need to specify exactly what you want.
For the .image div, you are using a background-image, which means the image used is not setting the size of the <div>. If you want the content (the image) to set the size and the ratio of the <div>, the simplest solution is to use <img> tag instead of background-image:
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;700;900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
.container {
padding: 50px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 15px;
min-height: 100vh;
}
.image img {
display: block;
width: 100%;
height: auto;
}
.text {
border: 50px solid #ccc;
padding: 50px 35% 50px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.text h1 {
margin: 0;
font-weight: 900;
font-size: 85px;
}
.text h3 {
font-weight: 300;
font-size: 35px;
}
.cat {
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}
#media (max-width: 1200px) {
.container {
grid-template-columns: 1fr;
grid-template-areas: 'image' 'text';
}
.image {
margin: 0;
grid-area: image;
}
.text {
grid-area: text;
}
}
#media (max-width: 768px) {
.text {
padding-right: 50px;
}
}
<!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 rel="stylesheet" href="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
<div class="text">
<h1>This is the title</h1>
<h3>This is the<br>lorem ispum dolor sit amet</h3>
<input type="submit" value="Submit" class="cta">
</div>
<div class="image">
<img src="https://picsum.photos/600/400">
</div>
</div>
</body>
</html>
If, on the contrary, you want the image to fill its container and get cropped on either direction (depending on whether the container is landscape or portrait), you could keep background-image and use background-size: cover, while also centering it in the div (to make sure it gets cropped equally):
#import url('https://fonts.googleapis.com/css2?family=Rubik:wght#300;400;700;900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}
.container {
padding: 50px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 15px;
min-height: 100vh
}
.image {
background: url(https://picsum.photos/600/400) center /cover;
}
.text {
border: 50px solid #ccc;
padding: 50px;
padding-right: 35%;
padding-right: 20%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.text h1 {
margin: 0;
font-weight: 900;
font-size: 85px;
}
.text h3 {
font-weight: 300;
font-size: 35px;
}
.cat {
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}
#media (max-width: 1200px) {
.container {
grid-template-columns: 1fr;
grid-template-areas: 'image' 'text';
}
.image {
margin: 0;
grid-area: image;
padding-bottom: 75%;
}
.text {
grid-area: text;
}
}
#media (max-width: 768px) {
.text {
padding-right: 50px;
}
}
<!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 rel="stylesheet" href="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
<div class="text">
<h1>This is the title</h1>
<h3>This is the<br>lorem ispum dolor sit amet</h3>
<input type="submit" value="Submit" class="cta">
</div>
<div class="image"></div>
</div>
</body>
</html>
Side note (it's killing me): it's "dolor sit amet", not "doler sis".
I'm trying to create my website as follow:
In here, the logo image overlaps the grid of the navigation bar.
I have also used CSS grid layout to create the navigation bar, but I'm having trouble making the image expand outside of the border.
This is currently what I have:
Basically, I want the background orange image (border) to shrink in the size vertically so I can have the same design as the above.
#main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
border-top: 1px solid black;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 25px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
}
#icons {
grid-area: icons;
background: lightblue;
}
#images {
grid-area: images;
background: orange;
}
#contents {
grid-area: contents:
background: brown;
}
/*#media only screen and (max-width: 600px) {
#main {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3";
}
}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div id = "main">
<div id = "navbar">
<img src="lens.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li>Photography</li>
<li>History</li>
<li>Samples</li>
<li>About</li>
</ul>
</div>
<div id = "main-heading">Main-heading</div>
<div id = "sub-heading">Sub-heading</div>
<div id = "icons">Icon</div>
<div id = "images">Images</div>
<div id ="contents">Contents</div>
</div>
</body>
</html>
In order to do the same design, you need to change the position of the logo img as absolute, and give some space to put the logo.
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position:absolute;
}
#main {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1.5fr;
grid-template-rows: 0.02fr 0.2fr 0.1fr 0.25fr 0.45fr;
grid-template-areas:
"nav nav nav nav"
"main-heading main-heading main-heading main-heading"
"sub-heading sub-heading sub-heading sub-heading"
"icons icons icons icons"
"images images images contents";
grid-gap: 0.2rem;
}
#navbar {
border-top: 1px solid black;
}
#navbar {
display: inline-block;
grid-area: nav;
background: orange;
border-radius:var(--main-radius);
padding-top: var(--main-padding);
position: relative;
}
#navbar img, header, ul, li {
display: inline-block;
vertical-align: middle;
}
#navbar img {
border-radius: 50%;
margin-left: 20px;
top: -13px;
position:absolute;
}
h3 {
margin-left:120px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*display: inline-block;*/
float: right;
margin-top: 25px;
margin-right: 20px;
}
li {
display: inline-block;
padding: 12px;
}
#main-heading {
grid-area: main-heading;
background: yellow;
}
#sub-heading {
grid-area: sub-heading;
background: pink;
}
#icons {
grid-area: icons;
background: lightblue;
}
#images {
grid-area: images;
background: orange;
}
#contents {
grid-area: contents:
background: brown;
}
/*#media only screen and (max-width: 600px) {
#main {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2 0.5;
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3";
}
}*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive J Web</title>
<link rel="stylesheet" href="Lab04.css">
</head>
<body>
<div id = "main">
<div id = "navbar">
<img src="https://www.allintheloop.com/assets/img/logo-sample.jpg" alt=lens width=90px height=90px>
<header>
<h3>
Art of Photography
</h3>
</header>
<ul>
<li>Photography</li>
<li>History</li>
<li>Samples</li>
<li>About</li>
</ul>
</div>
<div id = "main-heading">Main-heading</div>
<div id = "sub-heading">Sub-heading</div>
<div id = "icons">Icon</div>
<div id = "images">Images</div>
<div id ="contents">Contents</div>
</div>
</body>
</html>
You can also try this solution, u should give your navbar fixed height and change display to flex with align items: center.
https://codepen.io/boutahlilsoufiane/pen/NWbPgra