I am trying to build my personal webpage but simply cant manage to make my footer not cover the two buttons.
This problem only occurs on my laptop. As soon as I switch to my external monitor, the two buttons arent covered anymore.
I have tried inserting html{overflow-y: scroll;} to my css but it doesnt seem to work :(
Any help would be awesome! Thank you.
HTML:
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar {
height: 80px;
width: 100%;
background-color: #808080;
}
.logo {
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul {
float: right;
margin-right: 20px;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1 {
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2 {
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons {
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn {
margin-left: 25px;
}
.buttons button:hover {
background: #4b79b4;
}
footer {
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
bottom: 0px;
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: lightsteelblue;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #4b79b4;
}
.footer-bottom {
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<!-- BEGIN NAVBAR -->
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<!-- END NAVBAR -->
<!-- BEGIN CONTENT -->
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- END CONTENT -->
</div>
<!-- BEGIN FOOTER -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- END FOOTER -->
</body>
</html>
What you describe kind of feels like a grid to me using three "rows", one for the "navbar", one for the "content" and one for the "footer" such as:
display: grid;
grid-template-rows: auto 1fr auto;
Now given that we can put the containers for the rows in a wrapper .wrapper
Then we tall it which "row" each of the sections belongs in. grid-row: 2/2; for the content for example in row 2 (start and end)
I took a good bit of liberty with your CSS (it is still a "lot" just for this) specifically, I added borders to show where things are - you will want to remove those but I did it to illustrate where is "is" in the flow.
This is by no means "perfect" but just a very quick place to build from.
#import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
.navbar-container {
border: red 4px solid;
grid-row: 1/1;
display: flex;
align-items: start;
margin: 0rem;
}
.content-container {
font-family: sans-serif;
display: grid;
place-items: center;
grid-row: 2/2;
border: blue 1px solid;
}
.footer-container {
padding-top: 2rem;
display: grid;
grid-template-rows: auto 1fr auto;
border: cyan 1px solid;
}
.footer-content {
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
}
.footer-bottom {
grid-row: 3/3;
align-text: center;
padding: 0.25rem;
border: dashed blue 1px;
}
.navbar {
height: 5rem;
width: 100%;
background-color: #808080;
font-family: 'Roboto', sans-serif;
}
.navbar>.logo {
width: 140px;
height: auto;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 50px;
padding-right: 50px;
border: solid 1px green;
}
.navbar ul li {
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
transition: 0.2s;
}
.navbar ul li a:hover {
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center {
user-select: none;
}
.buttons {
display: flex;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 1rem;
}
.buttons button {
margin: 1rem;
}
.buttons button {
flex: auto;
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons button:hover {
background: #4b79b4;
}
.socials {
list-style: none;
display: flex;
align-items: middle;
justify-content: center;
}
.socials li {
margin-right: 10px;
}
.footer-bottom {
font-size: 0.75rem;
background-color: #737373;
text-align: center;
width: 100%;
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> About</li>
<li> CV</li>
<li> Favourites</li>
<li> Contact</li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-phone"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>
Related
Im to html and css and im trying to make a game website for my school but when i try to change div into a on for the card it moves the card down the page as seen in the images bellow,if you guys have any ideas why this is doing this please help im sort of stuck and I want to fiqure this out before I continue with this page.
Before Change
Before
After Change
After
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style>
body {
font-family: 'Open Sans', sans-serif;
}
.shell{
justify-content:center;
display: flex;
flex-direction:row;
flex-basis: auto;
margin:5px;
}
.card {
width: 175px;
display: flex;
flex-direction: column;
border: 1px solid #EF9A9A;
border-radius: 4px;
overflow: hidden;
margin: 10px;
text-decoration:none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 72px;
margin-bottom: 5px;
color: #D32F2F;
}
.main-description {
color: #D32F2F;
font-size: px;
text-align: center;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<a href = "#test"class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</div>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</div>
</div>
</body>
</html>
There was a few unclosed <a> tags and when you changed one of the tags to an <a> it also was removed from inside the <div> that contained your shell class which was the flex element that was holding the 2 cards beside each-other
body {
font-family: 'Open Sans', sans-serif;
}
.shell{
justify-content:center;
display: flex;
flex-direction:row;
flex-basis: auto;
margin:5px;
}
.card {
width: 175px;
display: flex;
flex-direction: column;
border: 1px solid #EF9A9A;
border-radius: 4px;
overflow: hidden;
margin: 10px;
text-decoration:none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 18px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 72px;
margin-bottom: 5px;
color: #D32F2F;
}
.main-description {
color: #D32F2F;
font-size: px;
text-align: center;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<a href="#test" class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</a>
</div>
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;
}
https://sagarj2021.github.io/first-website/
This is my website but it only open fullscreen in destop of my laptop. It does not open in fullscreen in smartphones destop as well as in normal search. (Actully in smartphone right side is 50% of white blank color). I dont know how to fix this issue..
I have given my code also,
so please can you help mi ?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.hero {
height: 100vh;
width: 100%;
background-color: black;
background-size: cover;
background-position: center;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo {
color: white;
font-size: 35px;
letter-spacing: 1px;
cursor: pointer;
}
span {
color: red;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover {
color: red;
transition: .4s;
}
.btn {
background-color: red;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform .4s;
}
.btn:hover {
transform: scale(1.2);
}
.content {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
h1 {
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h3 {
color: white;
font-size: 25px;
margin-bottom: 50px;
}
h4 {
color: #fcfc;
letter-spacing: 2px;
font-size: 20px;
}
.newslatter form {
width: 380px;
max-width: 100%;
position: relative;
}
.newslatter form input:first-child {
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid #f9004d;
outline: none;
border-radius: 30px;
}
.newslatter form input:last-child {
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: #f9004d;
color: white;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
.about {
width: 100%;
padding: 100px 0px;
background-color: #191919;
}
.about img {
height: auto;
width: 430px;
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2 {
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5 {
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.service {
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2 {
color: white;
font-size: 75px;
width: 1130px;
margin: 30px auto;
text-align: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #191919;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i {
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: #f9004d;
}
h5 {
color: white;
font-size: 23px;
margin-bottom: 15px;
}
.pra p {
color: #fcfc;
font-size: 16px;
line-height: 27px;
margin-bottom: 25px;
}
.card .button {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 9px 22px;
border-radius: 30px;
transition: .4s;
}
.card .button:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.contact-me {
width: 100%;
height: 290px;
background: #191919;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact-me p {
color: white;
font-size: 30px;
font-weight: bold;
margin-bottom: 25px;
}
.contact-me .button-two {
background-color: #f9004d;
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
transition: .4s;
}
.contact-me .button-two:hover {
background-color: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
footer {
position: relative;
width: 100%;
height: 400px;
background: #101010;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer p:nth-child(1) {
font-size: 30px;
color: white;
margin-bottom: 20px;
font-weight: bold;
}
footer p:nth-child(2) {
color: white;
font-size: 17px;
width: 500px;
text-align: center;
line-height: 26px;
}
.social {
display: flex;
}
.social a {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f9004d;
border-radius: 50%;
margin: 22px 10px;
color: white;
text-decoration: none;
font-size: 20px;
}
.social a:hover {
transform: scale(1.3);
transition: .3s;
}
.end {
position: absolute;
color: #f9004d;
bottom: 35px;
font-size: 14px;
}
<!--Sagar personal website-->
<!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="personalprofile.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/34d51c031e.js" crossorigin="anonymous"></script>
<title>Personal website</title>
</head>
<body>
<div class="hero">
<nav>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
Blog
</nav>
<div class="content">
<h4>hello, my name is</h4>
<h1>Sagar<span>Jadhav</span></h1>
<h3>I'm a Web Developer.</h3>
<div class="newslatter">
<form action="">
<input type="email" name="email" id="mail" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let start">
</form>
</div>
</div>
</div>
<!---About section start-->
<section class="about">
<div class="main">
<img src="#" alt="">
<div class="about-text">
<h2>About Me</h2>
<h5>Developer & Designer</h5>
<p>
I am a front-end web developer. I can provide clean code and pixel perfect design. I also make the website more & more interactive with web animations. I can provide clean code and pixel perfect design. I also make the website more & more interactive
with web animations. A responsive design makes your website accessible to all users, regardless of their devices.
</p>
<button type="button">Let's Talk</button>
</div>
</div>
</section>
<!--Service section start-->
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card">
<i class="fas fa-bars"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-user"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<i class="fa-regular fa-bell"></i>
<h5>Web Development</h5>
<div class="pra">
<p>Every website should be built with two primary goals: Firstly, it needs to work across all devices. Secondly, it needs to be fast as possible. </p>
<p style="text-align: center;">
<a class="button" href="#">Read More</a>
</p>
</div>
</div>
</div>
</div>
<!--Contact Me-->
<div class="contact-me">
<p>For any help.</p>
<a class="button-two" href="#">Contact Me</a>
</div>
<!--Footer start-->
<footer>
<p>Sagar Jadhav</p>
<p>For coding and syber security related update follow my blog chennal - please click on the link below to follow me:
</p>
<div class="social">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-linkedin"></i>
</div>
<p class="end">CopyRight By Sagar Jadhav</p>
</footer>
</body>
</html>
Replace this code in your code
.title h2 {
color: white;
font-size: 75px;
width: 130px;
margin: 30px auto;
text-align: center;
}
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
i {
margin-right: 0.3rem;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.05rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
}
.showcase-img {
width: 960px;
height: 400px;
background-color: blue; /* For testing */
border-radius: 4px;
}
.showcase-img img {
width: 100%;
height: 100%;
opacity: 0.1;
}
.showcase ul {
display: flex;
bottom: 13.73rem;
position: relative;
justify-content: space-between;
}
.showcase ul li {
font-size: 2rem;
float: left;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img src="images/#" alt="">
</div>
<ul>
<li class="left-flash"><i class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
</body>
</html>
// I want the left arrow to stick to the left side of the showcase-img container and the right arrow to the right side... I tried justify-content: space-between; but it didn't work, I can of course add margins but that's annoying and would make the site less responsive, any help is greatly appreciated!
 
it is very useful for your question
I have nav menu you can look at the snippet. (its not responsive in this case). And my problem is that i want to make searchbar (on hover with page max-width980px) to hide all elements and to be full width in nav menu. Problem is that i have very poor understanding of javascript so if is there any css only solution. I tried adding z-index but without effect.
/* Navigation menu */
.resmenu {
display: none;
cursor: pointer;
}
.resmenuitems {
display: none;
}
.navmenu {
width: 100%;
height: 55px;
border-bottom: 1px solid rgb(240,240,240);
}
.logo {
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
font-size: 1.5em;
font-weight: bold;
float: left;
margin-left: 3%;
padding: 10px 0px 10px 0px;
}
.navlinksr {
float: right;
margin-right: 2%;
width: 490px;
height: 100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.navlinksr a {
float: right;
text-decoration: none;
color: black;
font-size: 0.95em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.navlinksline {
height: 40%;
width: 1px;
background-color: grey;
}
.logodif {
background-color: black;
color: white;
padding: 7px;
border-radius: 3px;
}
.rlynothing {
margin-left: 4%;
float: left;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rlynothingagain {
height: 40%;
width: 1px;
background-color: grey;
}
/* SEARCH */
.swrap{
height: 100%;
float:left;
margin: auto;
display: flex;
align-items: center;
margin-left: 30px;
}
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
transition: width .2s;
overflow: hidden;
}
.search-container:hover{
width: 200px;
border: 2px solid black;
border-radius: 2px;
}
.search-input {
flex: 1;
display: flex;
}
.search-input input {
flex: 1;
background-clip: padding-box;
border: 0;
padding: 0;
outline: 0;
margin-left: 4px;
}
.navlinkborder {
background-color: limegreen;
padding: 10px;
border-radius: 3px;
}
.navlinkborder:hover {
background-color: green;
color: white;
transition: .5s;
}
<!DOCTYPE html>
<html lang="sk">
<head>
<!-- Site info -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/bootstrap-grid.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
<!-- BEGIN - Header -->
<div class="navmenu">
<a href="index.php">
<div class="logo">
<p>Coding</p> <p class="logodif">Hub</p>
</div>
</a>
<div class="rlynothing">
<div class="rlynothingagain">
</div>
</div>
<div class="swrap">
<div class="search-container">
<div class="search-icon-btn">
<i class="fa fa-search fa-lg"></i>
</div>
<div class="search-input">
<input type="search" class="search-bar" placeholder="Hľadať...">
</div>
</div>
</div>
<div class="resmenu" id="flip">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="navlinksr">
Archív
Live
PODPORIŤ
Kontakt
<a class="navlinksline"></a>
Prihlásiť sa
</div>
</div>
<div id="panel" class="resmenuitems">
Archív
PODPORIŤ
Live
Kontakt
Prihlásiť sa
</div>
<!-- END - HEADER -->
Try below
set the header as fixed
.logo {
margin-left: 30px;
}
.rlynothing {
margin-left: 40px;
}
set search container full width
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
overflow: hidden;
position: absolute;
z-index: 1;
border: 2px solid white;
border-radius: 2px;
transition: all .2s;
}
.search-container:hover{
background: white;
width: calc(100% - 264px); /* 264px is the width of Header Image */
border-color: black;
}
You can calculate the width search bar using calc().
And to show the search bar above other elements, use position: absolute(relative) and z-index.
For z-index to work, you need to use position : absolute or position : relative
/* Navigation menu */
.resmenu {
display: none;
cursor: pointer;
}
.resmenuitems {
display: none;
}
.navmenu {
width: 100%;
height: 55px;
border-bottom: 1px solid rgb(240,240,240);
}
.logo {
color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100%;
font-size: 1.5em;
font-weight: bold;
float: left;
margin-left: 30px;
padding: 10px 0px 10px 0px;
}
.navlinksr {
float: right;
margin-right: 2%;
width: 490px;
height: 100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.navlinksr a {
float: right;
text-decoration: none;
color: black;
font-size: 0.95em;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.navlinksline {
height: 40%;
width: 1px;
background-color: grey;
}
.logodif {
background-color: black;
color: white;
padding: 7px;
border-radius: 3px;
}
.rlynothing {
margin-left: 40px;
float: left;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rlynothingagain {
height: 40%;
width: 1px;
background-color: grey;
}
/* SEARCH */
.swrap{
height: 100%;
float:left;
margin: auto;
display: flex;
align-items: center;
margin-left: 30px;
}
.search-container {
float:left;
display: flex;
width: 30px;
padding: 8px;
overflow: hidden;
position: absolute;
z-index: 1;
border: 2px solid white;
border-radius: 2px;
transition: all .2s;
}
.search-container:hover{
background: white;
width: calc(100% - 264px); /* 264px is the width of Header Image */
border-color: black;
}
.search-input {
flex: 1;
display: flex;
}
.search-input input {
flex: 1;
background-clip: padding-box;
border: 0;
padding: 0;
outline: 0;
margin-left: 4px;
}
.navlinkborder {
background-color: limegreen;
padding: 10px;
border-radius: 3px;
}
.navlinkborder:hover {
background-color: green;
color: white;
transition: .5s;
}
<!DOCTYPE html>
<html lang="sk">
<head>
<!-- Site info -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- CSS -->
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/bootstrap-grid.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
<!-- BEGIN - Header -->
<div class="navmenu">
<a href="index.php">
<div class="logo">
<p>Coding</p> <p class="logodif">Hub</p>
</div>
</a>
<div class="rlynothing">
<div class="rlynothingagain">
</div>
</div>
<div class="swrap">
<div class="search-container">
<div class="search-icon-btn">
<i class="fa fa-search fa-lg"></i>
</div>
<div class="search-input">
<input type="search" class="search-bar" placeholder="Hľadať...">
</div>
</div>
</div>
<div class="resmenu" id="flip">
<i class="fas fa-bars fa-2x"></i>
</div>
<div class="navlinksr">
Archív
Live
PODPORIŤ
Kontakt
<a class="navlinksline"></a>
Prihlásiť sa
</div>
</div>
<div id="panel" class="resmenuitems">
Archív
PODPORIŤ
Live
Kontakt
Prihlásiť sa
</div>
<!-- END - HEADER -->