I have this site and i use html and css,and i want to do a project and my own portfolio, and one of the sections on the site is "about" and in this section there should be writing and an image next to the writing, as is it's clear in the first picture.
as it is clear in the first picture, there is a picture and next to it thereis a special writing for the "about" section.
in the second picture, there is the main problem of this post, as i could not put the picture and writing next to each other.
index.html:
<html DOCTYPE="html5">
<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>Training with navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<p>Portfolio</p>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<label class="check">
<i class="fas fa-bars fa-lg icon" id="menu"></i>
</label>
</nav>
<div class="header-content">
<h2>Welcome to Portfolio</h2>
<p>Let's chat</p>
<div class="btn">
<button class="btn-1">Book Now</button>
</div>
</div>
</header>
<section class="about">
<div class="row">
<div class="about-text">
<img src="images/women%20image.jpeg" class="personal-img" alt="about me picture">
<h2>About</h2>
<p>I am Hiba Youssef, I am studying <br>Information Technology Engineering <br>at Damascus university.
I have three years experience in React.
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
css.style:
#import url('https://fonts.googleapis.com/css2?family=Tangerine:wght#700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--spacing: 10px;
--primary: #141414;
--secondary: #b80003;
--third: #ffffff;
font-size: 12px;
}
/*img{*/
/* width: 100%;*/
/* margin: auto;*/
/*}*/
.row {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
body {
background-color: var(--primary);
}
header {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/mountain.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
nav {
background-color: var(--primary);
display: flex;
justify-content: space-between;
padding: calc(2 * var(--spacing)) calc(8 * var(--spacing));
position: sticky;
top: 0;
z-index: 1;
}
.logo p {
font-family: 'Tangerine', cursive;
font-size: 4.8rem;
font-weight: bold;
color: var(--secondary);
}
nav ul li {
padding-top: calc(1.5 * var(--spacing));
display: inline-block;
}
nav ul li a {
color: var(--third);
font-size: 1.2rem;
font-weight: 400;
/*padding:calc(1.5*var(--spacing)) 0 0 calc(3.6*var(--spacing));*/
padding: 0 calc(var(--spacing));
text-transform: uppercase;
letter-spacing: 1.5px;
}
nav ul li a:hover {
color: var(--secondary);
}
.icon {
padding-top: calc(1.5 * var(--spacing));
color: var(--third);
cursor: pointer;
}
.check {
display: none;
}
#media only screen and (max-width: 768px) {
html {
font-size: 8px;
}
nav {
/*padding: 0 50px;*/
flex-direction: column;
position: relative;
}
.check {
display: block;
position: absolute;
top: calc(2 * var(--spacing));
right: calc(4 * var(--spacing));
}
nav ul {
width: 100%;
height: 100vh;
background-color: ghostwhite;
display: none;
position: fixed;
}
.showmenu {
display: block;
}
nav ul li {
display: block;
padding: calc(2 * var(--spacing));
}
nav ul li a {
color: black;
}
}
.header-content {
text-align: center;
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
position: relative;
top: calc(15 * var(--spacing));
}
.header-content h2 {
font-size: 4rem;
color: var(--third);
margin: calc(1.3 * var(--spacing));
}
.header-content p {
font-size: 1.8rem;
color: var(--third);
font-weight: 500;
}
.btn {
/*display: flex;*/
/*justify-content: space-evenly;*/
/*flex-direction: row;*/
align-items: center;
text-align: center;
margin: calc(2 * var(--spacing));
}
.btn-1 {
background-color: var(--secondary);
color: var(--third);
padding: calc(var(--spacing)) calc(2 * var(--spacing));
border: none;
letter-spacing: 1px;
outline: none;
border-radius: 1.5px;
}
.about-space{
/*display: inline-block;*/
}
.about {
margin: calc(6*var(--spacing));
display: flex;
align-items: center;
justify-content: center;
}
.about-text {
padding: calc(6*var(--spacing)) calc(6*var(--spacing));
background-color: var(--secondary);
}
.about-text h2{
padding: calc(2*var(--spacing)) 0;
font-size: 2.4rem;
color: var(--third);
}
.about-text p{
font-size: 1.3rem;
color: var(--third);
}
.about-text img{
object-fit: contain;
display: inline-block;
width: calc(48*var(--spacing));
height: calc(44*var(--spacing));
/*position: absolute;*/
}
.personal-img{
display: flex;
position: relative;
left: 70%;
object-fit: contain;
}
Make the about-text position property relative and make the image position property absolute for it to work:
#import url('https://fonts.googleapis.com/css2?family=Tangerine:wght#700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--spacing: 10px;
--primary: #141414;
--secondary: #b80003;
--third: #ffffff;
font-size: 12px;
}
/*img{*/
/* width: 100%;*/
/* margin: auto;*/
/*}*/
.row {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
body {
background-color: var(--primary);
}
header {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/mountain.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
nav {
background-color: var(--primary);
display: flex;
justify-content: space-between;
padding: calc(2 * var(--spacing)) calc(8 * var(--spacing));
position: sticky;
top: 0;
z-index: 1;
}
.logo p {
font-family: 'Tangerine', cursive;
font-size: 4.8rem;
font-weight: bold;
color: var(--secondary);
}
nav ul li {
padding-top: calc(1.5 * var(--spacing));
display: inline-block;
}
nav ul li a {
color: var(--third);
font-size: 1.2rem;
font-weight: 400;
/*padding:calc(1.5*var(--spacing)) 0 0 calc(3.6*var(--spacing));*/
padding: 0 calc(var(--spacing));
text-transform: uppercase;
letter-spacing: 1.5px;
}
nav ul li a:hover {
color: var(--secondary);
}
.icon {
padding-top: calc(1.5 * var(--spacing));
color: var(--third);
cursor: pointer;
}
.check {
display: none;
}
#media only screen and (max-width: 768px) {
html {
font-size: 8px;
}
nav {
/*padding: 0 50px;*/
flex-direction: column;
position: relative;
}
.check {
display: block;
position: absolute;
top: calc(2 * var(--spacing));
right: calc(4 * var(--spacing));
}
nav ul {
width: 100%;
height: 100vh;
background-color: ghostwhite;
display: none;
position: fixed;
}
.showmenu {
display: block;
}
nav ul li {
display: block;
padding: calc(2 * var(--spacing));
}
nav ul li a {
color: black;
}
}
.header-content {
text-align: center;
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
position: relative;
top: calc(15 * var(--spacing));
}
.header-content h2 {
font-size: 4rem;
color: var(--third);
margin: calc(1.3 * var(--spacing));
}
.header-content p {
font-size: 1.8rem;
color: var(--third);
font-weight: 500;
}
.btn {
/*display: flex;*/
/*justify-content: space-evenly;*/
/*flex-direction: row;*/
align-items: center;
text-align: center;
margin: calc(2 * var(--spacing));
}
.btn-1 {
background-color: var(--secondary);
color: var(--third);
padding: calc(var(--spacing)) calc(2 * var(--spacing));
border: none;
letter-spacing: 1px;
outline: none;
border-radius: 1.5px;
}
.about-space {
/*display: inline-block;*/
}
.about {
margin: calc(6*var(--spacing));
display: flex;
align-items: center;
justify-content: center;
}
.about-text {
position: relative;
padding: calc(6*var(--spacing)) calc(6*var(--spacing));
background-color: var(--secondary);
}
.about-text h2 {
padding: calc(2*var(--spacing)) 0;
font-size: 2.4rem;
color: var(--third);
}
.about-text p {
font-size: 1.3rem;
color: var(--third);
}
.about-text img {
object-fit: contain;
display: inline-block;
width: calc(48*var(--spacing));
height: calc(44*var(--spacing));
/*position: absolute;*/
}
.personal-img {
display: flex;
position: absolute;
left: 70%;
object-fit: contain;
}
<html DOCTYPE="html5">
<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>Training with navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<p>Portfolio</p>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<label class="check">
<i class="fas fa-bars fa-lg icon" id="menu"></i>
</label>
</nav>
<div class="header-content">
<h2>Welcome to Portfolio</h2>
<p>Let's chat</p>
<div class="btn">
<button class="btn-1">Book Now</button>
</div>
</div>
</header>
<section class="about">
<div class="row">
<div class="about-text">
<img src="https://wallpaperaccess.com/full/1376490.jpg" class="personal-img" alt="about me picture">
<h2>About</h2>
<p>I am Hiba Youssef, I am studying <br>Information Technology Engineering <br>at Damascus university. I have three years experience in React.
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Basically, what happens is when you put an element with absolute positioning inside an element with relative positioning, the inner element will position itself relative to the outer element.
Related
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
I'm started learing html/css my first project was portfolio and i fell in this issue.
the full navigation bar is not visible on mobile devices also the text in the middle of the page is too large.
site source:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPGL Portfolio</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="nav">
<div class="logo">
<img src="https://avatars.githubusercontent.com/u/74413191?s=400&u=7076f19ee2d11687d44fe772ee5a76ce3c437679&v=4" alt="logo" height="50px" width="50px">
<h1>OPGL</h1>
</div>
<div class="nav-links">
Home
About
Projects
Contact
</div>
</div>
<div class="content">
<h1>Hi,<br/>
I'm Dawid,<br/>
<div>Begginer Developer</div>
</h1>
<p><!-- Begginer Web Developer, see more in about section --></p>
</div>
<div class="footer">
<p>Made by Dawid Ploch via VSCode</p>
</div>
</div>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital#1&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background: #080a0b;
}
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0px 0px 5px 5px;
width: 100%;
padding: 20px;
position: fixed;
top: 0;
z-index: 1;
}
.logo {
color: #fff;
font-family: 'Abel', sans-serif;
font-size: 30px;
}
.nav-links {
display: flex;
align-items: center;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-family: 'Abel', sans-serif;
margin-left: 20px;
font-size: 20px;
transition: all 0.3s ease;
}
.nav-links a:hover {
color: #00b894;
}
.content {
color: rgba(255, 255, 255, 0.75);
align-items: center;
justify-content: center;
}
.content h1 {
font-size: 50px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 30px;
}
.content p {
text-align: center;
color: gray;
}
.footer {
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
background-color: #0d1012;
border-radius: 5px 5px 0px 0px;
min-width: 100%;
padding: 20px;
position: absolute;
bottom: -150px;
z-index: 1;
}
.footer p {
color: #fff;
font-family: 'Abel', sans-serif;
font-size: 20px;
}
hosted website: link
i expect that Navigation Bar and text should smaller on mobile devices.
everything should be 100% visible
You can make the nav links stack by changing display: flex; to display: inline-block; in CSS under .nav-links
And if you want the text in the middle to be smaller you can simply change the font size in this part of your CSS:
.content h1 {
font-size: 50px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 30px;
}
Now to put it all together so this only happens on mobiles and small screens, you can simply just add this code to your CSS under a media query like this:
#media (max-width: 750px) {
.nav-links {
display: inline-block;
align-items: center;
}
.content h1 {
font-size: 25px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 12px;
}
}
Here it is working:
#import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital#1&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background: #080a0b;
}
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0px 0px 5px 5px;
width: 100%;
padding: 20px;
position: fixed;
top: 0;
z-index: 1;
}
.logo {
color: #fff;
font-family: 'Abel', sans-serif;
font-size: 30px;
}
.nav-links {
display: flex;
align-items: center;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-family: 'Abel', sans-serif;
margin-left: 20px;
font-size: 20px;
transition: all 0.3s ease;
}
.nav-links a:hover {
color: #00b894;
}
.content {
color: rgba(255, 255, 255, 0.75);
align-items: center;
justify-content: center;
}
.content h1 {
font-size: 50px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 30px;
}
.content p {
text-align: center;
color: gray;
}
.footer {
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
background-color: #0d1012;
border-radius: 5px 5px 0px 0px;
min-width: 100%;
padding: 20px;
position: absolute;
bottom: -150px;
z-index: 1;
}
.footer p {
color: #fff;
font-family: 'Abel', sans-serif;
font-size: 20px;
}
#media (max-width: 750px) {
.nav-links {
display: inline-block;
align-items: center;
}
.content h1 {
font-size: 25px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPGL Portfolio</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="nav">
<div class="logo">
<img src="https://avatars.githubusercontent.com/u/74413191?s=400&u=7076f19ee2d11687d44fe772ee5a76ce3c437679&v=4" alt="logo" height="50px" width="50px">
<h1>OPGL</h1>
</div>
<div class="nav-links">
Home
About
Projects
Contact
</div>
</div>
<div class="content">
<h1>Hi,<br/>
I'm Dawid,<br/>
<div>Begginer Developer</div>
</h1>
<p><!-- Begginer Web Developer, see more in about section --></p>
</div>
<div class="footer">
<p>Made by Dawid Ploch via VSCode</p>
</div>
</div>
</body>
</html>
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
I was not able to align in same horizontal line both the content. I was using flex. How to align both the navigation menu and another flex content?
const navButton = document.querySelector('button[aria-expanded]');
function toggleNav({
target
}) {
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
}
navButton.addEventListener('click', toggleNav);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.wrap {
width: 100%;
margin: 0 auto;
}
[aria-controls="menu-list"] {
display: none;
}
.menu ul {
list-style: none;
display: flex;
justify-content: space-between;
width: 90%;
margin: 20px auto;
}
.menu ul li {
flex-grow: 1;
flex-basis: 1px;
padding: 10px;
}
.menu ul li a {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
font-weight: 700;
background: #ffc600;
padding: 10px;
color: black;
}
.main {
width: 100%;
}
.cat1 {
margin-right: 20px;
flex: 6;
background: url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
height: 400px;
z-index: -1;
}
.c1title {
z-index: 1;
color: black;
background: #ffc600;
position: absolute;
top: 130px;
left: 130px;
font-size: 30px;
padding: 5px;
font-weight: 600;
}
.c1para {
z-index: 1;
color: black;
background: #ffc600;
position: absolute;
top: 250px;
left: 130px;
font-size: 16px;
padding: 5px;
font-weight: 600;
}
.cat {
flex: 2;
display: flex;
flex-direction: column;
margin-right: 20px;
}
.cat2 {
flex: 1;
background: #ffc600;
margin-bottom: 25px;
display: flex;
}
.c2title {
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
.small {
display: block;
font-size: 16px;
font-weight: 600;
}
.cat3 {
flex: 1;
background: #ffc600;
display: flex;
}
.c3title {
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
#media (min-width: 900px) {
.hero {
width: 90%;
display: flex;
margin: 0 auto;
}
}
#media (max-width: 1000px) {
.menu {
perspective: 800px;
}
[aria-controls="menu-list"] {
display: block;
margin-bottom: 10px;
}
.menu ul {
max-height: 0;
overflow: hidden;
transform: rotateX(90deg);
transition: all 0.5s;
}
[aria-expanded="true"]~ul {
display: grid;
max-height: 500px;
transform: rotateX(0);
}
[aria-expanded="false"] .close {
display: none;
}
[aria-expanded="true"] .close {
display: inline-block;
}
[aria-expanded="true"] .open {
display: none;
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<div class="wrap">
<nav class="menu">
<button aria-expanded="false" aria-controls="menu-list">
<span class="open">☰</span>
<span class="close">×</span>
Menu
</button>
<ul id="menu-list">
<li>Tacos</li>
<li>Beers</li>
<li>Wines</li>
<li>Deserts</li>
<li>Reservations</li>
</ul>
</nav>
</div>
<div class="main">
<div class="hero">
<div class="cat1">
<h6 class="c1title">Terry's Taco Joint</h6>
<p class="c1para">Pretty Good Tacos!</p>
</div>
<div class="cat">
<div class="cat2">
<p class="c2title">1.99$<br><span class="small">
Tacos</span></p>
</div>
<div class="cat3">
<p class="c3title">3.99$
<br><span class="small">Kombucha</span></p>
</div>
</div>
</div>
</div>
Image what was trying to align:
You are setting display: grid to [aria-expanded="true"] ~ ul. Remove it and it will work fine.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.wrap{
width: 100%;
margin: 0 auto;
}
[aria-controls="menu-list"] {
display: none;
}
.menu ul{
list-style: none;
display: flex;
flex-flow: column no-wrap;
justify-content: space-between;
width: 90%;
margin: 20px auto;
}
.menu ul li{
flex-grow: 1;
flex-basis: 1px;
padding: 10px;
}
.menu ul li a{
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
font-weight: 700;
background: #ffc600;
padding: 10px;
color: black;
}
.main{
width: 100%;
}
.cat1{
margin-right: 20px;
flex: 6;
background: url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
height: 400px;
z-index: -1;
}
.c1title{
z-index: 1;
color:black;
background: #ffc600;
position: absolute;
top: 130px;
left: 130px;
font-size: 30px;
padding: 5px;
font-weight: 600;
}
.c1para{
z-index: 1;
color:black;
background: #ffc600;
position: absolute;
top: 250px;
left: 130px;
font-size: 16px;
padding: 5px;
font-weight: 600;
}
.cat{
flex: 2;
display: flex;
flex-direction: column;
margin-right: 20px;
}
.cat2{
flex: 1;
background: #ffc600;
margin-bottom: 25px;
display: flex;
}
.c2title{
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
.small{
display: block;
font-size: 16px;
font-weight: 600;
}
.cat3{
flex:1;
background: #ffc600;
display: flex;
}
.c3title{
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
#media (min-width: 900px){
.hero{
width: 90%;
display: flex;
margin: 0 auto;
}
}
#media (max-width: 1000px) {
.menu {
perspective: 800px;
}
[aria-controls="menu-list"] {
display: block;
margin-bottom: 10px;
}
.menu ul {
max-height: 0;
overflow: hidden;
transform: rotateX(90deg);
transition: all 0.5s;
}
[aria-expanded="true"] ~ ul {
max-height: 500px;
transform: rotateX(0);
}
[aria-expanded="false"] .close {
display: none;
}
[aria-expanded="true"] .close {
display: inline-block;
}
[aria-expanded="true"] .open {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>Restaurant Wesbite</title>
</head>
<body>
<div class="wrap">
<nav class="menu">
<button aria-expanded="false" aria-controls="menu-list">
<span class="open">☰</span>
<span class="close">×</span>
Menu
</button>
<ul id="menu-list">
<li>Tacos</li>
<li>Beers</li>
<li>Wines</li>
<li>Deserts</li>
<li>Reservations</li>
</ul>
</nav>
</div>
<div class="main">
<div class="hero">
<div class="cat1">
<h6 class="c1title">Terry's Taco Joint</h6>
<p class="c1para">Pretty Good Tacos!</p>
</div>
<div class="cat">
<div class="cat2">
<p class="c2title">1.99$<br><span class="small">
Tacos</span></p>
</div>
<div class="cat3">
<p class="c3title">3.99$
<br><span class="small">Kombucha</span></p>
</div>
</div>
</div>
</div>
<script>
const navButton = document.querySelector('button[aria-expanded]');
function toggleNav({ target }) {
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
}
navButton.addEventListener('click', toggleNav);
</script>
</body>
</html>
I have added this tiny code snippet to achieve what your desired image conveyed. Basically CSS flexbox works in direct parent-children relationship and flex assigned to parent only works for direct children and not children of children elements.
.menu #menu-list{display: flex;}
const navButton = document.querySelector('button[aria-expanded]');
function toggleNav({
target
}) {
const expanded = target.getAttribute('aria-expanded') === 'true' || false;
navButton.setAttribute('aria-expanded', !expanded);
}
navButton.addEventListener('click', toggleNav);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.wrap {
width: 100%;
margin: 0 auto;
}
[aria-controls="menu-list"] {
display: none;
}
.menu ul {
list-style: none;
display: flex;
justify-content: space-between;
width: 90%;
margin: 20px auto;
}
.menu ul li {
flex-grow: 1;
flex-basis: 1px;
padding: 10px;
}
.menu ul li a {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
font-weight: 700;
background: #ffc600;
padding: 10px;
color: black;
}
.menu #menu-list{
display: flex;}
.main {
width: 100%;
}
.cat1 {
margin-right: 20px;
flex: 6;
background: url(https://jolly-kalam-23776e.netlify.com/restaurantwebsite/images/taco.jpg);
height: 400px;
z-index: -1;
}
.c1title {
z-index: 1;
color: black;
background: #ffc600;
position: absolute;
top: 130px;
left: 130px;
font-size: 30px;
padding: 5px;
font-weight: 600;
}
.c1para {
z-index: 1;
color: black;
background: #ffc600;
position: absolute;
top: 250px;
left: 130px;
font-size: 16px;
padding: 5px;
font-weight: 600;
}
.cat {
flex: 2;
display: flex;
flex-direction: column;
margin-right: 20px;
}
.cat2 {
flex: 1;
background: #ffc600;
margin-bottom: 25px;
display: flex;
}
.c2title {
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
.small {
display: block;
font-size: 16px;
font-weight: 600;
}
.cat3 {
flex: 1;
background: #ffc600;
display: flex;
}
.c3title {
font-size: 30px;
font-weight: 600;
text-align: center;
margin: auto;
}
#media (min-width: 900px) {
.hero {
width: 90%;
display: flex;
margin: 0 auto;
}
}
#media (max-width: 1000px) {
.menu {
perspective: 800px;
}
[aria-controls="menu-list"] {
display: block;
margin-bottom: 10px;
}
.menu ul {
max-height: 0;
overflow: hidden;
transform: rotateX(90deg);
transition: all 0.5s;
}
[aria-expanded="true"]~ul {
display: grid;
max-height: 500px;
transform: rotateX(0);
}
[aria-expanded="false"] .close {
display: none;
}
[aria-expanded="true"] .close {
display: inline-block;
}
[aria-expanded="true"] .open {
display: none;
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<div class="wrap">
<nav class="menu">
<button aria-expanded="false" aria-controls="menu-list">
<span class="open">☰</span>
<span class="close">×</span>
Menu
</button>
<ul id="menu-list">
<li>Tacos</li>
<li>Beers</li>
<li>Wines</li>
<li>Deserts</li>
<li>Reservations</li>
</ul>
</nav>
</div>
<div class="main">
<div class="hero">
<div class="cat1">
<h6 class="c1title">Terry's Taco Joint</h6>
<p class="c1para">Pretty Good Tacos!</p>
</div>
<div class="cat">
<div class="cat2">
<p class="c2title">1.99$<br><span class="small">
Tacos</span></p>
</div>
<div class="cat3">
<p class="c3title">3.99$
<br><span class="small">Kombucha</span></p>
</div>
</div>
</div>
</div>
I'm trying to create a small website and want to place an image (logo, square, svg) in the navbar. I want the logo to fit the navbar but it simply just won't scale no matter what I try.
I've tried floating a div with the image to the left and the navbar to the right but it still won't scale. It's really frustrating.
Here's an image of the problem:
Here's my code (sorry it's messy):
#import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(18px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimg img {
max-width: 100%;
max-height: 20%;
}
.navimgdiv {
height: 1.5vh;
}
/* navbar end */
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pgallerystyles.css">
<title> Photo Gallery </title>
<link rel="shortcut icon" href="logo.ico">
</head>
<body>
<div class="fullwidth">
</div>
<nav>
<ul class="navul">
<li>
<div class="navimgdiv"><img class="navimg" src="logo.svg"></div>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header>
</header>
<h1 class="headertitle">Image Gallery</h1>
Thanks!
Simply use the logo outside of the list. I have added max-width for logo image. Optionally padding and margin you can customize based on your requirement. I hope this solution will be helpful.
.heading {
display: inline-block;
font-family: "Montserrat";
font-weight: lighter;
text-align: left;
margin-left: 20vw;
line-height: 30vw;
}
body {
width: 100%;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: white;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin-top: 30px;
flex-flow: row wrap;
margin-top: -10vw;
}
img {
/* margin: 9px;
transition: filter 0.2s;
filter: brightness(100%);
display: inline-block;
min-height: 100px;
height: 50vh; */
max-width: 100%;
}
img:hover {
filter: brightness(80%);
}
.responsive:hover {}
header {
position: relative;
height: 50vh;
background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
margin-top: -20px;
transform: skewY(-5deg);
transform-origin: top left;
}
.fullwidth {
width: 100%;
}
.headertitle {
margin-top: -36vh;
margin-left: 12vw;
position: absolute;
font-size: calc(13px + 2.5vw);
color: white;
font-family: 'Montserrat';
font-weight: lighter;
}
/* navbar */
nav {
background: rgb(52, 52, 52);
position: relative;
z-index: 1;
height: calc(40px + 6vh);
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.065);
overflow: auto;
width: 100vw;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
text-align: left;
margin-left: 1.2vw;
}
nav ul li {
display: inline-block;
list-style: none;
font-size: 1.2em;
padding: 1vh;
}
.navul a {
text-decoration: none;
color: white;
line-height: 5.5vh;
height: 5.5vh;
font-size: calc(15px + 0.25vh + 0.15vw);
}
.navuul a:visited,
a:link,
a:active {
text-decoration: none;
color: white;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.navuul a:hover {
text-decoration: none;
color: grey;
font-weight: 200;
line-height: 5.5vh;
height: 5.5vh;
}
.submit {
float: right;
margin-right: 1.5vw;
}
.submit a {
color: white;
border-radius: 5px;
}
.navimgdiv img {
max-width: 50px;
}
.navimgdiv {
padding: 5px 0;
}
<div class="fullwidth"></div>
<nav>
<a class="navimgdiv"><img src="https://cdn.worldvectorlogo.com/logos/react.svg"></a>
<ul class="navul">
<li>Lumastock</li>
<li>Photos</li>
<li>Featured</li>
<li>Contact</li>
<li>Pricing</li>
<li>Assesment Requirements</li>
<li class="submit">Submit a photo</li>
</ul>
</nav>
<header></header>
<h1 class="headertitle">Image Gallery</h1>