My problem is when I try to make navbar fixed ,it just disappear from my page .First thing that I've tried is to create a class called sticky that has position:fixed but when I call it my navbar stop showing ( I think it shrinks so much that text can be visible). Any ideas how to make the navbar static when user scrolls down ?
HTML CODE
</head>
<body>
<!-- Navbar -->
<div class ="main">
<div class="navbar ">
<div class="container flex lead ">
<nav>
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Recenzii</li>
</ul>
</nav>
<div>
<h1>CarolHousing</h1>
</div>
<div class="social sm">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
Contact
</div>
</div>
</div>
</div>
<!-- Showcase -->
<section class="showcase">
<div class="container grid">
<div class="showcase-text">
<h1>Easier Deployment</h1>
<p>Deploy web apps of all kinds, from large scale enterprise APIs to static websites for individuals. Fill out the form to try a demo of our platform</p>
Read More
</div>
<div class="showcase-form card">
<h2>Request a Demo</h2>
<form>
<div class="form-control">
<input type="text" name="name" placeholder="Name" required>
</div>
<div class="form-control">
<input type="text" name="company" placeholder="Company Name" required>
</div>
<div class="form-control">
<input type="email" name="email" placeholder="Email" required>
</div>
<input type="submit" value="Send" class="btn btn-primary">
</form>
</div>
</div>
</section>
<!-- Cli -->
<section class="cli">
<div class="container grid">
<img src="images/cli.png" alt="">
<div class="card">
<h3>Easy to use, cross platform CLI</h3>
</div>
<div class="card">
<h3>Deploy in seconds</h3>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-dark py-5">
<div class="container grid grid-3">
<div>
<h1>Loruki
</h1>
<p>Copyright © 2020</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Features</li>
<li>Docs</li>
</ul>
</nav>
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
</div>
</footer>
</body>
</html>
CSS CODE:
.navbar {
background-color: var(--primary-color);
color: #fff;
min-height: 80px;
position: sticky;
top: 0;
}
.navbar ul {
display: flex;
flex-direction: row;
flex-grow:1;
}
.navbar a {
color: #fff;
padding: 10px;
margin: 0 2px;
}
.navbar a:hover {
border-bottom: 2px #fff solid;
}
.navbar .flex {
justify-content:space-between;
}
.navbar .social a{
margin: 0 2px;
flex-grow:1;
}
.navbar .social > *:nth-child(3){
font-size: 28px;
}.showcase {
height: 400px;
background-color: var(--primary-color);
color: #fff;
position: relative;
}
.showcase h1 {
font-size: 40px;
}
.showcase p {
margin: 20px 0;
}
.showcase .grid {
overflow: visible;
grid-template-columns: 55% auto;
gap: 30px;
}
.showcase-text {
animation: slideInFromLeft 1s ease-in;
}
.showcase-form {
position: relative;
top: 60px;
height: 350px;
width: 400px;
padding: 40px;
z-index: 100;
justify-self: flex-end;
animation: slideInFromRight 1s ease-in;
}
.showcase-form .form-control {
margin: 30px 0;
}
.showcase-form input[type='text'],
.showcase-form input[type='email'] {
border: 0;
border-bottom: 1px solid #b4becb;
width: 100%;
padding: 3px;
font-size: 16px;
}
.showcase-form input:focus {
outline: none;
}
.showcase::before,
.showcase::after {
content: '';
position: absolute;
height: 100px;
bottom: -70px;
right: 0;
left: 0;
background: #fff;
transform: skewY(-3deg);
-webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
}
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
:root {
--primary-color: #047aed;
--secondary-color: #1c3fa8;
--dark-color: #002240;
--light-color: #f4f4f4;
--success-color: #5cb85c;
--error-color: #d9534f;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', sans-serif;
color: #333;
line-height: 1.6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
h1,
h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%;
}
code,
pre {
background: #333;
color: #fff;
padding: 10px;
}
.hidden {
visibility: hidden;
height: 0;
}
/* Features */
.features-head img,
.docs-head img {
width: 200px;
justify-self: flex-end;
}
.features-sub-head img {
width: 300px;
justify-self: flex-end;
}
.features-main .card > i {
margin-right: 20px;
}
.features-main .grid {
padding: 30px;
}
.features-main .grid > *:first-child {
grid-column: 1 / span 3;
}
.features-main .grid > *:nth-child(2) {
grid-column: 1 / span 2;
}
/* Docs */
.docs-main h3 {
margin: 20px 0;
}
.docs-main .grid {
grid-template-columns: 1fr 2fr;
align-items: flex-start;
}
.docs-main nav li {
font-size: 17px;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px #ccc solid;
}
.docs-main a:hover {
font-weight: bold;
}
/* Tablets and under */
#media (max-width: 768px) {
.grid,
.showcase .grid,
.stats .grid,
.cli .grid,
.cloud .grid,
.features-main .grid,
.docs-main .grid {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.showcase {
height: auto;
}
.showcase-text {
text-align: center;
margin-top: 40px;
animation: slideInFromTop 1s ease-in;
}
.showcase-form {
justify-self: center;
margin: auto;
animation: slideInFromBottom 1s ease-in;
}
.cli .grid > *:first-child {
grid-column: 1;
grid-row: 1;
}
.features-head,
.features-sub-head,
.docs-head {
text-align: center;
}
.features-head img,
.features-sub-head img,
.docs-head img {
justify-self: center;
}
.features-main .grid > *:first-child,
.features-main .grid > *:nth-child(2) {
grid-column: 1;
}
}
/* Mobile */
#media (max-width: 500px) {
.navbar {
height: 110px;
}
.navbar .flex {
flex-direction: column;
}
.navbar ul {
padding: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
.showcase-form {
width: 300px;
}
}.container {
max-width: 1400px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;
}
.main {
min-height: 100vh; /*add*/
height: 3000px; /*this is a test rule*/
}
.card {
background-color: #fff;
color: #333;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 10px;
}
.btn {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: 5px;
}
.btn-outline {
background-color: transparent;
border: 1px #fff solid;
}
.btn:hover {
transform: scale(0.98);
}
/* Backgrounds & colored buttons */
.bg-primary,
.btn-primary {
background-color: var(--primary-color);
color: #fff;
}
.bg-secondary,
.btn-secondary {
background-color: var(--secondary-color);
color: #fff;
}
.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #fff;
}
.bg-light,
.btn-light {
background-color: var(--light-color);
color: #333;
}
.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
color: #fff;
}
/* Text colors */
.text-primary {
color: var(--primary-color);
}
.text-secondary {
color: var(--secondary-color);
}
.text-dark {
color: var(--dark-color);
}
.text-light {
color: var(--light-color);
}
/* Text sizes */
.lead {
font-size: 20px;
}
.sm {
font-size: 1rem;
}
.md {
font-size: 2rem;
}
.lg {
font-size: 3rem;
}
.xl {
font-size: 4rem;
}
.text-center {
text-align: center;
}
/* Alert */
.alert {
background-color: var(--light-color);
padding: 10px 20px;
font-weight: bold;
margin: 15px 0;
}
.alert i {
margin-right: 10px;
}
.alert-success {
background-color: var(--success-color);
color: #fff;
}
.alert-error {
background-color: var(--error-color);
color: #fff;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-content: center;
align-items: center;
height: 100%;
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.sticky{
position: fixed;
top: 0;
width: 100%;
}
.cli .grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.cli .grid > *:first-child {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
My answer is as advice.
Make it a rule to wrap all your content in the main div, like here:
<div class="main">
...
</div>
In my example, I used position: sticky.
In the css, I marked the edits.
anime.timeline({loop: true})
.add({
targets: '.ml5 .line',
opacity: [0.5,1],
scaleX: [0, 1],
easing: "easeInOutExpo",
duration: 700
}).add({
targets: '.ml5 .line',
duration: 600,
easing: "easeOutExpo",
translateY: (el, i) => (-0.625 + 0.625*2*i) + "em"
}).add({
targets: '.ml5 .ampersand',
opacity: [0,1],
scaleY: [0.5, 1],
easing: "easeOutExpo",
duration: 600,
offset: '-=600'
}).add({
targets: '.ml5 .letters-left',
opacity: [0,1],
translateX: ["0.5em", 0],
easing: "easeOutExpo",
duration: 600,
offset: '-=300'
}).add({
targets: '.ml5 .letters-right',
opacity: [0,1],
translateX: ["-0.5em", 0],
easing: "easeOutExpo",
duration: 600,
offset: '-=600'
}).add({
targets: '.ml5',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
body {
box-sizing: border-box; /*add*/
margin: 0; /*add*/
padding: 0; /*add*/
}
.navbar {
background-color: var(--primary-color);
color: #fff;
min-height: 80px;
position: sticky;
top: 0;
z-index: 9999;
}
.navbar ul {
display: flex;
flex-direction: row;
flex-grow:1;
}
.navbar a {
color: #fff;
padding: 10px;
margin: 0 2px;
}
.navbar a:hover {
border-bottom: 2px #fff solid;
}
.navbar .flex {
justify-content:space-between;
}
.navbar .social a{
margin: 0 2px;
flex-grow:1;
}
.navbar .social > *:nth-child(3){
font-size: 28px;
}.showcase {
height: 400px;
background-color: var(--primary-color);
color: #fff;
position: relative;
}
.showcase h1 {
font-size: 40px;
}
.showcase p {
margin: 20px 0;
}
.showcase .grid {
overflow: visible;
grid-template-columns: 55% auto;
gap: 30px;
}
.showcase-text {
animation: slideInFromLeft 1s ease-in;
}
.showcase-form {
position: relative;
top: 60px;
height: 350px;
width: 400px;
padding: 40px;
z-index: 100;
justify-self: flex-end;
animation: slideInFromRight 1s ease-in;
}
.showcase-form .form-control {
margin: 30px 0;
}
.showcase-form input[type='text'],
.showcase-form input[type='email'] {
border: 0;
border-bottom: 1px solid #b4becb;
width: 100%;
padding: 3px;
font-size: 16px;
}
.showcase-form input:focus {
outline: none;
}
.showcase::before,
.showcase::after {
content: '';
position: absolute;
height: 100px;
bottom: -70px;
right: 0;
left: 0;
background: #fff;
transform: skewY(-3deg);
-webkit-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
}
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
:root {
--primary-color: #047aed;
--secondary-color: #1c3fa8;
--dark-color: #002240;
--light-color: #f4f4f4;
--success-color: #5cb85c;
--error-color: #d9534f;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', sans-serif;
color: #333;
line-height: 1.6;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #333;
}
h1,
h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%;
}
code,
pre {
background: #333;
color: #fff;
padding: 10px;
}
.hidden {
visibility: hidden;
height: 0;
}
/* Features */
.features-head img,
.docs-head img {
width: 200px;
justify-self: flex-end;
}
.features-sub-head img {
width: 300px;
justify-self: flex-end;
}
.features-main .card > i {
margin-right: 20px;
}
.features-main .grid {
padding: 30px;
}
.features-main .grid > *:first-child {
grid-column: 1 / span 3;
}
.features-main .grid > *:nth-child(2) {
grid-column: 1 / span 2;
}
/* Docs */
.docs-main h3 {
margin: 20px 0;
}
.docs-main .grid {
grid-template-columns: 1fr 2fr;
align-items: flex-start;
}
.docs-main nav li {
font-size: 17px;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px #ccc solid;
}
.docs-main a:hover {
font-weight: bold;
}
/* Tablets and under */
#media (max-width: 768px) {
.grid,
.showcase .grid,
.stats .grid,
.cli .grid,
.cloud .grid,
.features-main .grid,
.docs-main .grid {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.showcase {
height: auto;
}
.showcase-text {
text-align: center;
margin-top: 40px;
animation: slideInFromTop 1s ease-in;
}
.showcase-form {
justify-self: center;
margin: auto;
animation: slideInFromBottom 1s ease-in;
}
.cli .grid > *:first-child {
grid-column: 1;
grid-row: 1;
}
.features-head,
.features-sub-head,
.docs-head {
text-align: center;
}
.features-head img,
.features-sub-head img,
.docs-head img {
justify-self: center;
}
.features-main .grid > *:first-child,
.features-main .grid > *:nth-child(2) {
grid-column: 1;
}
}
/* Mobile */
#media (max-width: 500px) {
.navbar {
height: 110px;
}
.navbar .flex {
flex-direction: column;
}
.navbar ul {
padding: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
.showcase-form {
width: 300px;
}
}.container {
max-width: 1400px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
align-self: start;
}
.main {
min-height: 100vh; /*add*/
}
.card {
background-color: #fff;
color: #333;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 10px;
}
.btn {
display: inline-block;
padding: 10px 30px;
cursor: pointer;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: 5px;
}
.btn-outline {
background-color: transparent;
border: 1px #fff solid;
}
.btn:hover {
transform: scale(0.98);
}
/* Backgrounds & colored buttons */
.bg-primary,
.btn-primary {
background-color: var(--primary-color);
color: #fff;
}
.bg-secondary,
.btn-secondary {
background-color: var(--secondary-color);
color: #fff;
}
.bg-dark,
.btn-dark {
background-color: var(--dark-color);
color: #fff;
}
.bg-light,
.btn-light {
background-color: var(--light-color);
color: #333;
}
.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
color: #fff;
}
/* Text colors */
.text-primary {
color: var(--primary-color);
}
.text-secondary {
color: var(--secondary-color);
}
.text-dark {
color: var(--dark-color);
}
.text-light {
color: var(--light-color);
}
/* Text sizes */
.lead {
font-size: 20px;
}
.sm {
font-size: 1rem;
}
.md {
font-size: 2rem;
}
.lg {
font-size: 3rem;
}
.xl {
font-size: 4rem;
}
.text-center {
text-align: center;
}
/* Alert */
.alert {
background-color: var(--light-color);
padding: 10px 20px;
font-weight: bold;
margin: 15px 0;
}
.alert i {
margin-right: 10px;
}
.alert-success {
background-color: var(--success-color);
color: #fff;
}
.alert-error {
background-color: var(--error-color);
color: #fff;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
justify-content: center;
align-items: center;
height: 100%;
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.sticky{
position: fixed;
top: 0;
width: 100%;
}
.cli .grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.cli .grid > *:first-child {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
/*Animation h1*/
/*.ml5 {
position: relative;
font-weight: 300;
font-size: 4.5em;
color: #402d2d;
}*/
.ml5 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.1em;
padding-right: 0.05em;
padding-bottom: 0.15em;
line-height: 1em;
}
.ml5 .line {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
height: 3px;
width: 100%;
background-color: #FFFFFF;
transform-origin: 0.5 0;
}
.ml5 .ampersand {
font-family: Baskerville, serif;
font-style: italic;
font-weight: 400;
width: 1em;
margin-right: -0.1em;
margin-left: -0.1em;
}
.ml5 .letters {
display: inline-block;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="main">
<div class="navbar ">
<div class="container flex lead ">
<nav>
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Recenzii</li>
</ul>
</nav>
<div>
<h1 class="ml5">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters letters-left">Carol</span>
<span class="letters ampersand">&</span>
<span class="letters letters-right">Housing</span>
<span class="line line2"></span>
</span>
</h1>
</div>
<div class="social sm">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
Contact
</div>
</div>
</div>
<section class="showcase">
<div class="container grid">
<div class="showcase-text">
<h1>Easier Deployment</h1>
<p>Deploy web apps of all kinds, from large scale enterprise APIs to static websites for individuals. Fill out the form to try a demo of our platform</p>
Read More
</div>
<div class="showcase-form card">
<h2>Request a Demo</h2>
<form>
<div class="form-control">
<input type="text" name="name" placeholder="Name" required>
</div>
<div class="form-control">
<input type="text" name="company" placeholder="Company Name" required>
</div>
<div class="form-control">
<input type="email" name="email" placeholder="Email" required>
</div>
<input type="submit" value="Send" class="btn btn-primary">
</form>
</div>
</div>
</section>
<section class="cli">
<div class="container grid">
<img src="images/cli.png" alt="">
<div class="card">
<h3>Easy to use, cross platform CLI</h3>
</div>
<div class="card">
<h3>Deploy in seconds</h3>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-dark py-5">
<div class="container grid grid-3">
<div>
<h1>Loruki
</h1>
<p>Copyright © 2020</p>
</div>
<nav>
<ul>
<li>Home</li>
<li>Features</li>
<li>Docs</li>
</ul>
</nav>
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
</div>
</footer>
</div>
set the the height of container ( must be navbar parent though ) to 100vh and keep overflow: auto or set to overflow-y: scroll.
then set the position property on the navbar to 'sticky':
position: sticky
and enjoy! :)
Try doing this to the navigation container.
position: fixed;
Here is a code example.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Great Demo on CodePen</title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
<div></div>
<div></div>
</body>
</html>
body {
margin: 0;
}
nav ul {
width: 100%;
margin: 0;
position: fixed;
display: flex;
background-color: green;
}
ul li {
list-style: none;
margin: 20px;
}
div {
height: 500px;
width: 500px;
background-color: red;
}
Related
While developing my website I have came across a problem with my footer and form. My footer seems to be appearing through the form on devices but not on the computer and I'm sure this could be issues with widths of devices? So I kept trying to fix it and still haven't been able to fix it. I'm still learning as I go along and I would be grateful if someone could help me get rolling with my website again. code snippets and images below, kindest regards, Caelan.
body {
background-color: black ;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3{
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a{
text-decoration: none;
}
.gallery{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content{
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: .4s;
background-color: whitesmoke;
}
.content:hover{
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: .6s;
}
.productcard-image{
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p{
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6{
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card{
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list{
padding: 5px;
}
.fa{
color: #ff9f43;
font-size: 26px;
transition: .4s;
}
.fa:hover{
transform: scale(1.3);
transition: .6s;
}
.productcardbutton{
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border:0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1{
background-color: #2183a2;
}
.buy-2{
background-color: #3b3e6e;
}
.buy-3{
background-color: #0b0b0b;
}
#media(max-width: 1000px){
.content{
width: 46%;
}
}
#media(max-width: 750px){
.content{
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-bottom: -60vh;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type=submit]{
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type=submit]:hover{
background: rgb(19, 41, 238);
}
#media screen and (max-width:600px) {
.form1{
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this
christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br>
<form action="">
<input type="email" name="email" id="email" placeholder="Enter your email">
<input type="text" name="name" id="name" placeholder=" Enter your name">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Enter your message here"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo" ></a>
</div>
<p class="website__rights">© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved</p>
<div class="social__icons">
</div>
</div>
</section>
</div>
</body>
</html>
I've adjusted the css to remove the height and margin on the containers:
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</section>
</div>
</body>
</html>
I'm using margins for my form but when I am testing the responsive layout the distance between the navigation bar increases if the screen width is a greater size. Therefore, I have also tried auto height but it still has a big gap between the navigation bar and the form.
I have also tried #media screen.
I had help yesterday with a similar problem to this, but now I'm encountering another one as its not with the footer but with the form itself.
I would kindly like to ask for help, and if you find a solution explain the changes so I can also learn from it! Kindest regards, Caelan : ).
body {
background-color: black;
}
/* Announcment bar */
.alert {
padding: 20px;
background-color: #2a7a85;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
body {
margin: 0;
}
/* Navigation bar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(248, 248, 248);
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: black;
text-align: center;
font-weight: bold;
padding: 25px 32px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: rgb(55, 81, 165);
}
ul.topnav li a.active {
background-color: #0cc0d8;
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
/* Homepage button */
.glow-on-hover {
width: 220px;
height: 35px;
border: none;
outline: none;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgb(11, 78, 223);
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
/* kipplo heading on homepage */
h1 {
font-size: 10vw;
margin: 0;
padding: 0;
font-family: "Courier New", Courier, monospace;
color: blue;
word-wrap: break-word;
text-align: center;
}
/* for the heading and the button alignment*/
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.btn-centering {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* product cards*/
h3 {
text-align: center;
font-size: 30px;
margin: 0;
padding-top: 10px;
}
a {
text-decoration: none;
}
.gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 50px 0;
}
.content {
width: 24%;
margin: 15px;
box-sizing: border-box;
float: left;
text-align: center;
border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-top: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: 0.4s;
background-color: whitesmoke;
}
.content:hover {
box-shadow: 0 0 11px rgb(0, 217, 255);
transform: translate(0px, -8px);
transition: 0.6s;
}
.productcard-image {
width: 200px;
height: 200px;
text-align: center;
margin: 0 auto;
display: block;
}
p {
text-align: center;
color: #b2bec3;
padding: 0 8px;
}
h6 {
font-size: 26px;
text-align: center;
color: #222f3e;
margin: 0;
}
.product-card {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.productcard-list {
padding: 5px;
}
.fa {
color: #ff9f43;
font-size: 26px;
transition: 0.4s;
}
.fa:hover {
transform: scale(1.3);
transition: 0.6s;
}
.productcardbutton {
text-align: center;
font-size: 24px;
color: #fff;
width: 100%;
padding: 15px;
border: 0px;
outline: none;
cursor: pointer;
margin-top: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.buy-1 {
background-color: #2183a2;
}
.buy-2 {
background-color: #3b3e6e;
}
.buy-3 {
background-color: #0b0b0b;
}
#media (max-width: 1000px) {
.content {
width: 46%;
}
}
#media (max-width: 750px) {
.content {
width: 100%;
}
}
/* Footer */
.footer__container {
background-color: #141414;
padding: 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#footer__logo {
color: #fff;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
.footer__links {
width: 100%;
max-width: 1000px;
display: flex;
justify-content: center;
}
.footer__link--wrapper {
display: flex;
}
.footer__link--items {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 16px;
text-align: left;
width: 160px;
box-sizing: border-box;
}
.footer__link--items h2 {
margin-bottom: 16px;
}
.footer__link--items > h2 {
color: #fff;
}
.footer__link--items a {
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer__link--items a:hover {
color: #e9e9e9;
transition: 0.3s ease-out;
}
/* Social Icons */
.social__icon--link {
color: #fff;
font-size: 24px;
}
.social__media {
max-width: 1000px;
width: 100%;
}
.social__media--wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 40px auto 0 auto;
}
.website__rights {
color: #fff;
}
#media screen and (max-width: 820px) {
.footer__links {
padding-top: 2rem;
}
#footer__logo {
margin-bottom: 2rem;
}
.website__rights {
padding: 2rem;
}
.footer__link--wrapper {
flex-direction: column;
}
.social__media--wrap {
flex-direction: column;
}
}
#media screen and (max-width: 480px) {
.footer__link--items {
margin: 0;
padding: 10px;
width: 100%;
}
}
/* Text above the form*/
/* Feedback form*/
.form1 {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
margin: 15vh auto;
margin-top: -200px;
height: auto;
border-radius: 15px;
border: none;
box-shadow: 0 0 15px rgb(24, 143, 190);
}
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
}
input {
width: 100%;
margin: 5px 0;
height: 35px;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
textarea {
width: 100%;
margin: 5px 0;
font-size: 17px;
text-align: center;
outline: none;
border-radius: 15px;
border: none;
background: rgb(235, 228, 228);
}
input[type="submit"] {
margin: 10px auto;
width: 120px;
background: rgb(24, 143, 190);
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: rgb(19, 41, 238);
}
#media screen and (max-width: 600px) {
.form1 {
width: 90%;
margin-top:-250px;
height: auto;
}
}
h2 {
color: #00ffd5;
font-size: 30px;
}
p4 {
color: #00ffd5;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="img/icon.png" />
<link rel="stylesheet" href="styles.css" />
<title>Contact Us</title>
</head>
<body>
<!-- Alert bar -->
<div class="container">
<div class="alert">
<span
class="closebtn"
onclick="this.parentElement.style.display='none';"
>×</span
>
<center>
<strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</center>
</div>
<!-- Navigation bar -->
<ul class="topnav">
<li><img src="img/logo.png" /></li>
<li>Home</li>
<li>Products</li>
<li><a class="active" href="contactus.html">Contact Us</a></li>
<li class="right">About Us</li>
</ul>
</div>
<!-- Form -->
<div class="form1">
<h2>Contact Us!</h2>
<p4>Typical Replies Within 24hrs!</p4>
<br />
<form action="">
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
/>
<input
type="text"
name="name"
id="name"
placeholder=" Enter your name"
/>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Enter your message here"
></textarea>
<input type="submit" value="Send" />
</form>
</div>
</div>
<!-- Footer -->
<div class="footer__container">
<div class="footer__links">
<div class="footer__link--wrapper">
<div class="footer__link--items">
About Us
</div>
<div class="footer__link--items">
Contact Us
</div>
</div>
<div class="footer__link--wrapper">
<div class="footer__link--items">
Youtube
</div>
<div class="footer__link--items">
TikTok
</div>
</div>
</div>
<section class="social__media">
<div class="social__media--wrap">
<div class="footer__logo">
<a href="index.html">
<img src="img/logo2.png" id="footer__logo"
/></a>
</div>
<p class="website__rights">
© KIPPLO.CO.UK PROTOTYPE 2022. All rights reserved
</p>
<div class="social__icons"></div>
</div>
</[![section][1]][1]>
</div>
</body>
</html>
I analyzed your code. You have just to remove the height: 100vh from your .container.
The next step is to remove the margin-top: -250px from your .form1. then it should look good.
Bonus Tip: the unit vh stands for viewport-height (browser height). so 100vh is 100% of the viewport height.
I'm trying to get two separate fig captions side by side instead of one on top of the other, every time i tryed it would just move the teaxtarea.
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
sans-serif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Profile Section */
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-user-settings,
.profile-stats,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border: 0.1rem solid #dbdbdb;
border-radius: 0.3rem;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-stats li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-stats li:last-of-type {
margin-right: 0;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone,
.fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Media Query */
#media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-stats {
float: none;
width: auto;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-edit-btn {
margin-left: 0;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
.profile-edit-btn,
.profile-bio,
.profile-stats {
flex-basis: 100%;
}
.profile-stats {
order: 1;
margin-top: 1.5rem;
}
.profile-stats ul {
display: flex;
text-align: center;
padding: 1.2rem 0;
border-top: 0.1rem solid #dadada;
border-bottom: 0.1rem solid #dadada;
}
.profile-stats li {
font-size: 1.4rem;
flex: 1;
margin: 0;
}
.profile-stat-count {
display: block;
}
}
/* Spinner Animation */
#keyframes loader {
to {
transform: rotate(360deg);
}
}
/*
The following code will only run if your browser supports CSS grid.
Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling.
*/
#supports (display: grid) {
.profile {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
}
.profile-image {
grid-row: 1 / -1;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
grid-gap: 2rem;
}
.profile-image,
.profile-user-settings,
.profile-stats,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}
#media (max-width: 40rem) {
.profile {
grid-template-columns: auto 1fr;
grid-row-gap: 1.5rem;
}
.profile-image {
grid-row: 1 / 2;
}
.profile-user-settings {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
}
.profile-edit-btn,
.profile-stats,
.profile-bio {
grid-column: 1 / -1;
}
.profile-user-settings,
.profile-edit-btn,
.profile-settings-btn,
.profile-bio,
.profile-stats {
margin: 0;
}
}
}
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
#import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0056 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.snip0056 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0056 > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.snip0056 figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.snip0056 figcaption h2,
figure.snip0056 figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.snip0056 figcaption h2 {
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0056 figcaption h2 span {
font-weight: 800;
}
figure.snip0056 figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0056 figcaption .icons {
width: 100%;
text-align: left;
}
figure.snip0056 figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
figure.snip0056 figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0056 figcaption a:hover {
opacity: 0.8;
}
figure.snip0056 .position {
width: 100%;
text-align: left;
padding: 15px 30px;
font-size: 0.9em;
opacity: 1;
font-style: italic;
color: #ffffff;
background: #000000;
clear: both;
}
figure.snip0056.blue .position {
background: #20638f;
}
figure.snip0056.red .position {
background: #962d22;
}
figure.snip0056.yellow .position {
background: #bf6516;
}
figure.snip0056:hover > img,
figure.snip0056.hover > img {
right: -12%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
#social {
position: absolute;
right: 0;
bottom: 0;
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
}
/* twitter button class*/
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
/* instagram button class*/
.instagramBtn{
background: #4169E1;
}
.instagramBtn:before{
font-family: "FontAwesome";
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
color: #00FFFF;
background: #fff;
border-color: #4169E1;
}
<div class="container">
<div class="profile">
<form action="testing.php" method="post">
<textarea name="text2" rows="2" cols=0> Family Name</textarea><br>
</form>
<button class="btn profile-edit-btn">Edit Profile</button>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main>
<div class="container">
<figure class="snip0056">
<figcaption>
<textarea name="text2" rows="2" cols=0></textarea>
<textarea name="text3" rows="8" cols=20>.</textarea>
</p>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" />
<div class="position">
<textarea name="text4" rows="1" cols=9></textarea>
</div>
</h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<textarea name="text5" rows="2" cols=0></textarea>
<textarea name="text6" rows="8" cols=20></textarea>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Title</textarea>
</figure>
<div id="social">
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button&size=small&width=67&height=20&appId" width="67" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</main>
For this particular example you can do it by adding display: flex; into .container style or white-space: nowrap; into .container and display: inline-block; into figure styles:
/* this */
.container
{
display: flex;
}
/* or this */
/*
.container
{
white-space: nowrap;
}
figure
{
display: inline-block;
}
*/
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
sans-serif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Profile Section */
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-user-settings,
.profile-stats,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border: 0.1rem solid #dbdbdb;
border-radius: 0.3rem;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-stats li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-stats li:last-of-type {
margin-right: 0;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone,
.fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Media Query */
#media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-stats {
float: none;
width: auto;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-edit-btn {
margin-left: 0;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
.profile-edit-btn,
.profile-bio,
.profile-stats {
flex-basis: 100%;
}
.profile-stats {
order: 1;
margin-top: 1.5rem;
}
.profile-stats ul {
display: flex;
text-align: center;
padding: 1.2rem 0;
border-top: 0.1rem solid #dadada;
border-bottom: 0.1rem solid #dadada;
}
.profile-stats li {
font-size: 1.4rem;
flex: 1;
margin: 0;
}
.profile-stat-count {
display: block;
}
}
/* Spinner Animation */
#keyframes loader {
to {
transform: rotate(360deg);
}
}
/*
The following code will only run if your browser supports CSS grid.
Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling.
*/
#supports (display: grid) {
.profile {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
}
.profile-image {
grid-row: 1 / -1;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
grid-gap: 2rem;
}
.profile-image,
.profile-user-settings,
.profile-stats,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}
#media (max-width: 40rem) {
.profile {
grid-template-columns: auto 1fr;
grid-row-gap: 1.5rem;
}
.profile-image {
grid-row: 1 / 2;
}
.profile-user-settings {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
}
.profile-edit-btn,
.profile-stats,
.profile-bio {
grid-column: 1 / -1;
}
.profile-user-settings,
.profile-edit-btn,
.profile-settings-btn,
.profile-bio,
.profile-stats {
margin: 0;
}
}
}
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
#import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0056 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.snip0056 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0056 > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.snip0056 figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.snip0056 figcaption h2,
figure.snip0056 figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.snip0056 figcaption h2 {
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0056 figcaption h2 span {
font-weight: 800;
}
figure.snip0056 figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0056 figcaption .icons {
width: 100%;
text-align: left;
}
figure.snip0056 figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
figure.snip0056 figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0056 figcaption a:hover {
opacity: 0.8;
}
figure.snip0056 .position {
width: 100%;
text-align: left;
padding: 15px 30px;
font-size: 0.9em;
opacity: 1;
font-style: italic;
color: #ffffff;
background: #000000;
clear: both;
}
figure.snip0056.blue .position {
background: #20638f;
}
figure.snip0056.red .position {
background: #962d22;
}
figure.snip0056.yellow .position {
background: #bf6516;
}
figure.snip0056:hover > img,
figure.snip0056.hover > img {
right: -12%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
#social {
position: absolute;
right: 0;
bottom: 0;
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
}
/* twitter button class*/
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
/* instagram button class*/
.instagramBtn{
background: #4169E1;
}
.instagramBtn:before{
font-family: "FontAwesome";
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
color: #00FFFF;
background: #fff;
border-color: #4169E1;
}
<div class="container">
<div class="profile">
<form action="testing.php" method="post">
<textarea name="text2" rows="2" cols=0> Family Name</textarea><br>
</form>
<button class="btn profile-edit-btn">Edit Profile</button>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main>
<div class="container">
<figure class="snip0056">
<figcaption>
<textarea name="text2" rows="2" cols=0></textarea>
<textarea name="text3" rows="8" cols=20>.</textarea>
</p>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" />
<div class="position">
<textarea name="text4" rows="1" cols=9></textarea>
</div>
</h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<textarea name="text5" rows="2" cols=0></textarea>
<textarea name="text6" rows="8" cols=20></textarea>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Title</textarea>
</figure>
<div id="social">
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button&size=small&width=67&height=20&appId" width="67" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</main>
I am trying to use CSS and HTML to create an effect where someone can mouse-over a specific image on my page, and the image would appear to "light up", or at least do something cool. In the included snippet, I am trying to do this to the circular image in the innerArticle class. What would be an effective way to go about achieving this?
body {
display: grid;
grid-template-areas:
'header header header'
'nav article ads'
'nav footer footer';
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 1px;
grid-column-gap: 1px;
height: 100vh;
margin: 0;
padding: 0;
}
a {
color: #0ad05b;
text-decoration: none;
}
a:hover {
color: #e3eaee;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
font-size: 14px;
}
footer,
article,
nav,
div {
padding: 1.2em;
background: #061621;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
font-size: 14px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
#mainArticleShip {
grid-area: article;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Form Style */
#mainArticleForm {
background: linear-gradient(50deg, rgba(6, 22, 33, 0.5), rgb(0, 0, 0)),
url(https://cruisecrunch.s3.us-east-2.amazonaws.com/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right;
}
#mainArticle {
background: linear-gradient(15deg, rgba(6, 22, 33, 0.7), rgb(0, 0, 0)),
url(https://cruisecrunch.s3.us-east-2.amazonaws.com/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right;
}
.innerArticleSignup {
background: transparent;
}
.innerArticleForm {
width: 65%;
margin: 0 auto;
background: transparent;
}
.text {
background: transparent;
}
.reviewForm {
background: transparent;
}
.innerArticleForm h1 {
color: #e3eaee;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.innerArticleForm h2 {
color: #e3eaee;
text-align: center;
font-size: 18px;
}
form {
padding: 39px;
}
.form__group {
background: #000000a1;
display: flex;
justify-content: space-between;
}
.form__group label {
width: 232px;
display: inline;
text-align: left;
}
.form__group select {
padding: 6px;
float: right;
}
.form__group input {
padding: 6px;
font-size: 14px;
border-radius: 4px;
float: right;
}
.form__group textarea {
font-size: 14px;
float: right;
height: auto;
width: 100%;
color: #767676;
}
.primary {
padding: 8px 18px;
margin: 22px 0px;
font-size: 18px;
background: #0ad05b;
border: 2px solid #989898;
}
.innerArticle {
height: 17vh;
width: 17vh;
background: transparent;
margin-top: 1rem;
margin-bottom: 1rem;
}
.big-user-photo {
border-radius: 50%;
}
.userAvatar {
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
}
.mainPage {
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
}
.headerRight {
grid-area: header;
justify-self: right;
padding: 1.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
}
.right {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0.5em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
}
.left {
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
align-content: left;
align-items: left;
justify-content: left;
}
.form-user-photo {
height: 15rem;
width: 15rem;
}
.alert {
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 9999;
color: #fff;
font-size: 1.8rem;
font-weight: 400;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 1.6rem 15rem;
-webkit-box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
}
.alert--success {
background-color: #0ad05b;
}
.alert--error {
background-color: #eb4d4b;
}
.stars-container {
position: relative;
display: inline-block;
color: transparent;
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: lightgray;
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: gold;
overflow: hidden;
}
.stars-0:after {
width: 0%;
}
.stars-10:after {
width: 10%;
}
.stars-20:after {
width: 20%;
}
.stars-30:after {
width: 30%;
}
.stars-40:after {
width: 40%;
}
.stars-50:after {
width: 50%;
}
.stars-60:after {
width: 60%;
}
.stars-70:after {
width: 70%;
}
.stars-80:after {
width: 80%;
}
.stars-90:after {
width: 90%;
}
.stars-100:after {
width: 100;
}
.shipImage {
width: 200px;
height: auto;
border-radius: 10%;
}
.logo {
width: 100%;
max-width: 175px;
height: auto;
}
.otherShips {
align-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas:
'header'
'article'
'ads'
'nav'
'footer';
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
.form__group {
display: block;
}
}
#media (max-width: 1250px) {
.innerArticleForm,
.reviewForm,
form {
padding: 0;
}
.innerArticleForm {
width: 70%;
}
}
#media (max-width: 557px) {
.innerArticleForm {
width: 100%;
}
}
<!DOCTYPE html>
<head>
</head>
<body>
<header id="pageHeader">
<div class="left"><a href="/"><img class="logo"
src="https://cruisecrunch.s3.us-east-2.amazonaws.com/logo.png"></a></div>
<div class="right">
<p>Sign up | Login</p>
</div>
</header>
<article id="mainArticle">
<div class="text">
<h2>All Cruise Ships</h2>
<p>Welcome to CruiseCrunch - the ultimate destination for cruise research. Enjoy free access to user reviews
and ratings for cruise ships across the industry. If you have cruised before, please leave a review of your trip for others. </p>
</div>
<div class="innerArticle"><a href="/ship/disney-dream"><img class="mainPage" src="https://www.goport.com/blog/wp-content/uploads/2013/10/ship-photo-shopped.jpg"
alt="Disney Dream"></a><br>Disney Dream<br><br><span
class="stars-container stars-20">★★★★★</span><br><br>See Reviews (1)
</div>
</article>
<nav id="mainNav">Navigation<div class="nav">
<div class="ul">
<div class="li"><i class="fa fa-ship"></i> All Ships</div>
<div class="li"><i class="fa fa-plus"></i> Add Review</div>
<div class="li"><i class="fa fa-trophy"></i> Top Rated Ships</div>
<div class="li"> <i class="fa fa-child"></i> Best For Kids</div>
<div class="li"> <i class="fa fa-dollar"></i> Best Value</div>
<div class="li"><i class="fa fa-bed"></i> Best Cabins</div>
<div class="li"><i class="fa fa-beer"></i> Best Dining</div>
<div class="li"><i class="fa fa-film"></i> Best Entertainment</div>
<div class="li"><i class="fa fa-thumbs-down"></i> Lowest Rated Ships</div>
<div class="li"><i class="fa fa-rss-square"></i> Most Recent Reviews</div>
<div class="li"><i class="fa fa-anchor"></i> New Ships</div>
<div class="li"><br></div>
</div>
</div>
</nav>
<div id="siteAds">Over 6 cruise ship reviews!</div>
<footer id="pageFooter">
<p class="footer">© 2020, CruiseCrunch</p>
</footer>
</body>
You can use a filter and reset brightness
img.mainPage {
filter: brightness(50%);
transition:.1s cubic-bezier(.20,-4,.80,4)
;
}
img.mainPage:hover {
filter: brightness(100%);
}
body {
display: grid;
grid-template-areas: 'header header header' 'nav article ads' 'nav footer footer';
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 1px;
grid-column-gap: 1px;
height: 100vh;
margin: 0;
padding: 0;
}
a {
color: #0ad05b;
text-decoration: none;
}
a:hover {
color: #e3eaee;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
font-size: 14px;
}
footer,
article,
nav,
div {
padding: 1.2em;
background: #061621;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
font-size: 14px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
#mainArticleShip {
grid-area: article;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Form Style */
#mainArticleForm {
background: linear-gradient(50deg, rgba(6, 22, 33, 0.5), rgb(0, 0, 0)), url(https://cruisecrunch.s3.us-east-2.amazonaws.com/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right;
}
#mainArticle {
background: linear-gradient(15deg, rgba(6, 22, 33, 0.7), rgb(0, 0, 0)), url(https://cruisecrunch.s3.us-east-2.amazonaws.com/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right;
}
.innerArticleSignup {
background: transparent;
}
.innerArticleForm {
width: 65%;
margin: 0 auto;
background: transparent;
}
.text {
background: transparent;
}
.reviewForm {
background: transparent;
}
.innerArticleForm h1 {
color: #e3eaee;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
.innerArticleForm h2 {
color: #e3eaee;
text-align: center;
font-size: 18px;
}
form {
padding: 39px;
}
.form__group {
background: #000000a1;
display: flex;
justify-content: space-between;
}
.form__group label {
width: 232px;
display: inline;
text-align: left;
}
.form__group select {
padding: 6px;
float: right;
}
.form__group input {
padding: 6px;
font-size: 14px;
border-radius: 4px;
float: right;
}
.form__group textarea {
font-size: 14px;
float: right;
height: auto;
width: 100%;
color: #767676;
}
.primary {
padding: 8px 18px;
margin: 22px 0px;
font-size: 18px;
background: #0ad05b;
border: 2px solid #989898;
}
.innerArticle {
height: 17vh;
width: 17vh;
background: transparent;
margin-top: 1rem;
margin-bottom: 1rem;
}
.big-user-photo {
border-radius: 50%;
}
.userAvatar {
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
}
.mainPage {
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
}
.headerRight {
grid-area: header;
justify-self: right;
padding: 1.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
}
.right {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0.5em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
}
.left {
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
align-content: left;
align-items: left;
justify-content: left;
}
.form-user-photo {
height: 15rem;
width: 15rem;
}
.alert {
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 9999;
color: #fff;
font-size: 1.8rem;
font-weight: 400;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 1.6rem 15rem;
-webkit-box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
}
.alert--success {
background-color: #0ad05b;
}
.alert--error {
background-color: #eb4d4b;
}
.stars-container {
position: relative;
display: inline-block;
color: transparent;
}
.stars-container:before {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: lightgray;
}
.stars-container:after {
position: absolute;
top: 0;
left: 0;
content: '★★★★★';
color: gold;
overflow: hidden;
}
.stars-0:after {
width: 0%;
}
.stars-10:after {
width: 10%;
}
.stars-20:after {
width: 20%;
}
.stars-30:after {
width: 30%;
}
.stars-40:after {
width: 40%;
}
.stars-50:after {
width: 50%;
}
.stars-60:after {
width: 60%;
}
.stars-70:after {
width: 70%;
}
.stars-80:after {
width: 80%;
}
.stars-90:after {
width: 90%;
}
.stars-100:after {
width: 100;
}
.shipImage {
width: 200px;
height: auto;
border-radius: 10%;
}
.logo {
width: 100%;
max-width: 175px;
height: auto;
}
.otherShips {
align-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas: 'header' 'article' 'ads' 'nav' 'footer';
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
.form__group {
display: block;
}
}
#media (max-width: 1250px) {
.innerArticleForm,
.reviewForm,
form {
padding: 0;
}
.innerArticleForm {
width: 70%;
}
}
#media (max-width: 557px) {
.innerArticleForm {
width: 100%;
}
}
<!DOCTYPE html>
<head>
</head>
<body>
<header id="pageHeader">
<div class="left">
<img class="logo" src="https://cruisecrunch.s3.us-east-2.amazonaws.com/logo.png">
</div>
<div class="right">
<p>Sign up | Login</p>
</div>
</header>
<article id="mainArticle">
<div class="text">
<h2>All Cruise Ships</h2>
<p>Welcome to CruiseCrunch - the ultimate destination for cruise research. Enjoy free access to user reviews and ratings for cruise ships across the industry. If you have cruised before, please leave a review of your trip for
others. </p>
</div>
<div class="innerArticle">
<img class="mainPage" src="https://www.goport.com/blog/wp-content/uploads/2013/10/ship-photo-shopped.jpg" alt="Disney Dream"><br>Disney Dream<br><br><span class="stars-container stars-20">★★★★★</span><br><br>See Reviews (1)
</div>
</article>
<nav id="mainNav">Navigation
<div class="nav">
<div class="ul">
<div class="li"><i class="fa fa-ship"></i> All Ships</div>
<div class="li"><i class="fa fa-plus"></i> Add Review</div>
<div class="li"><i class="fa fa-trophy"></i> Top Rated Ships</div>
<div class="li"> <i class="fa fa-child"></i> Best For Kids</div>
<div class="li"> <i class="fa fa-dollar"></i> Best Value</div>
<div class="li"><i class="fa fa-bed"></i> Best Cabins</div>
<div class="li"><i class="fa fa-beer"></i> Best Dining</div>
<div class="li"><i class="fa fa-film"></i> Best Entertainment</div>
<div class="li"><i class="fa fa-thumbs-down"></i> Lowest Rated Ships</div>
<div class="li"><i class="fa fa-rss-square"></i> Most Recent Reviews</div>
<div class="li"><i class="fa fa-anchor"></i> New Ships</div>
<div class="li"><br></div>
</div>
</div>
</nav>
<div id="siteAds">Over 6 cruise ship reviews!</div>
<footer id="pageFooter">
<p class="footer">© 2020, CruiseCrunch</p>
</footer>
</body>
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
brightness()
The brightness() function applies a linear multiplier to the input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. The lacuna value for interpolation is 1.
Aside, you can use a transition and increase its effect with a bounce effect from a cubic-bezier(x,x,x,x) value for the transition-timing-function : https://www.sitepoint.com/css3-transitions-cubic-bezier-timing-function/
You can apply :hover on every elemnt including images like in the snippet below. Then you can style every difference during hover effect you want. For everything you cant do in css you would need JS.
img {
width:50%;
opacity: 80%;
}
img:hover {
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
opacity: 100%;
}
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
I am building a page and I have small bug here.I can't click and hover on my button (buttons in div slide with class btn).I think a problem is in z-index or in margin on some element. But I don't know how to solve that.
Here is a page: http://project.gmwebs.cz/ .
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Cabin', sans-serif;
}
body {
background: url(img/background.jpg);
}
a {
text-decoration: none;
color: rgb(121, 0, 0);
}
h2 {
color: #F2F2F2;
}
/* Menu */
.kolecko{
width: 200px;
height: 100px;
background-color: #F2F2F2;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid rgb(121, 0, 0);
border-top: 0;
z-index: 3;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 40px;
}
.logo {
width: 160px;
z-index: 4;
position: absolute;
}
.menu-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
nav {
height: 90px;
background-color: #F2F2F2;
border-bottom: 10px solid rgb(121, 0, 0);
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}
nav ul {
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
margin: 0 100px;
}
nav ul li{
list-style-type: none;
padding: 0 20px;
text-transform: uppercase;
color: rgb(121, 0, 0);
font-size: 1.5rem;
}
nav ul li a:hover {
color: #000;
}
.toggle {
width: 100%;
padding: 15px 20px;
background: rgb(121, 0, 0);
text-align: right;
box-sizing: border-box;
color: #fff;
font-size: 2rem;
display: none;
}
.ul-list {
display: flex;
align-content: center;
justify-content: center;
flex-direction: row;
}
#link-menu {
margin-right: 10%;
}
#phone {
margin-left: 10%;
}
nav .ul-list .social-btn li:nth-child(1) {
padding-right: 0px;
}
nav .ul-list .social-btn li:nth-child(2) {
padding-left: 7px;
}
.social-btn {
display: flex;
justify-content: center;
align-content: center;
flex-direction: row;
}
i.fab.fa-facebook-square {
color: #3b5992;
}
i.fab.fa-instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
-webkit-background-clip: text;
/* Also define standard property for compatibility */
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Slider */
.slider {
display: block;
height: 100%;
width: 100%;
z-index: -1;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
border-bottom: 10px solid rgb(121, 0, 0);
}
.slider > * {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
.slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(img/slide1.jpg);
background-size: cover;
background-position: center;
}
.slide:nth-child(2) {
left: 100%;
animation-delay: 3s;
background-image: url(img/slide2.png);
background-size: cover;
background-position: center;
}
.slide:nth-child(3) {
left: 100%;
animation-delay: 7s;
background-image: url(img/slide3.jpg);
background-size: cover;
background-position: center;
}
.slide p {
font-size: 2rem;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 350px;
color: rgb(121, 0, 0);
background: 0% 0% no-repeat padding-box;
opacity: 0.84;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
padding-top: 20px;
z-index: 4;
}
.slide p span {
font-size: 1.5rem;
color: #000;
}
.btn {
background-color:transparent;
border:3px solid rgb(121, 0, 0);;
display:inline-block;
cursor:pointer;
color:rgb(121, 0, 0);
font-size: 1.5rem;
padding:5px 30px;
text-decoration:none;
margin: 20px 0;
}
.btn:hover {
background-color:transparent;
color: #000;
border:3px solid #000;
}
.btn:active {
position:relative;
top:1px;
}
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
6.667% { left: 0%;}
33.334% { left: 0%;}
40% { left: -100%; width: 100%; opacity: 1;}
40.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 1;}
}
/* Prolog */
.prolog {
text-align: center;
color: #F2F2F2;
margin: 10%;
margin-bottom: 5%;
font-size: 1.2rem;
margin-top: 102.5vh;
}
.prolog p {
margin-top: 1rem;
}
/* Newslatters */
.newslatters {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
text-align: center;
color: #F2F2F2;
}
.newslatters form {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: center;
margin: 1% 35%;
margin-top: 0%;
color: #F2F2F2;
}
.newslatters p {
margin: 0.5% 0%;
font-size: 1.2rem;
}
.newslatters h2 {
font-size: 1.8rem;
}
.newslatters form input.email {
margin: 1% 0;
padding: 2% 0%;
text-align: center;
font-size: 1rem;
background-color: #F2F2F2;
}
.newslatters form input.email:active {
border: 3px solid #000;
}
.newslatters form input.submit {
margin: 1% 25%;
margin-top: 5%;
border: 3px solid rgb(121, 0, 0);
padding: 1.3% 0%;
text-align: center;
font-weight: bold;
background-color: #F2F2F2;
font-size: 1rem;
box-shadow: 5px 10px transparent;
}
.newslatters form input:hover {
border: 3px solid #000;
}
/* Footer */
footer {
border-top: 5px solid rgb(121, 0, 0);
margin-top: 2%;
}
footer .author {
padding: 0.8% 0;
text-align: center;
color: #F2F2F2;
}
footer .author a{
font-weight: bold;
color: #F2F2F2;
}
footer .author a:hover{
color: rgb(121, 0, 0);
}
i.fas.fa-heart {
color: rgb(121, 0, 0);
}
/* Media Query */
#media (max-width: 1440px) {
nav ul li{
font-size: 1.3rem;
}
nav ul {
margin: 0 50px;
}
}
#media (max-width: 1024px) {
nav ul {
margin: 0 10px;
}
nav ul li{
font-size: 1rem;
}
footer .author {
padding: 1.5% 0;
text-align: center;
color: #F2F2F2;
}
}
#media (max-width: 1023px) {
.toggle {
display: block;
}
.kolecko {
display: none;
}
.active {
display: block;
}
.ul-list {
display: flex;
align-content: center;
justify-content: center;
flex-direction: column;
margin-top: 0px;
padding-top: 0px;
}
#link-menu {
margin-right: 0%;
height: 280px;
padding-bottom: 0px;
}
#phone {
margin-left: 0%;
}
#phone li:nth-child(2) {
border-bottom: none;
padding-top: 20px;
}
#phone .social-btn li:nth-child(1) {
border-bottom: none;
padding-right: 7px;
}
#phone .social-btn li:nth-child(2){
border-bottom: none;
padding-top: 0px;
}
.social-btn {
display: flex;
justify-content: center;
align-content: center;
flex-direction: row;
}
.logo {
z-index: 1;
position: absolute;
top: -400px;
}
nav {
height: auto;
background-color: #F2F2F2;
border-bottom: 10px solid rgb(121, 0, 0);
z-index:1;
display: none;
flex-direction: column;
align-content: flex-end;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
flex-direction: column;
align-content: flex-end;
justify-content: flex-end;
text-align: center;
margin: 0px 0px;
z-index: 1;
padding-bottom: 20px;
}
nav ul li{
list-style-type: none;
padding: 0px 0px;
text-transform: uppercase;
color: rgb(121, 0, 0);
font-size: 1.5rem;
line-height: 1.4;
border-bottom: 1px #000 solid;
}
nav ul li:nth-child(2) {
margin-right: 0%;
}
nav ul li:nth-child(3) {
margin-left: 0%;
}
.slide p {
margin-top: 250px;
}
.prolog {
font-size: 1rem;
}
.newslatters form {
margin: 1% 20%;
font-size: 1rem;
}
.newslatters p {
font-size: 1rem;
}
.newslatters form input.submit {
padding: 1.3% 2%;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">
<div class="toggle">
<i class="fa fa-bars menu" aria-hidden="true"></i>
</div>
<nav>
<div class="ul-list">
<ul id="link-menu">
<li><i class="fas fa-home"></i> Domů</li>
<li><i class="fas fa-car"></i> Pronájem</li>
<li><i class="fas fa-dollar-sign"></i> Prodej</li>
</ul>
<ul id="phone">
<li><i class="fas fa-mobile-alt"></i> Kontakt</li>
<li><i class="fas fa-phone-square-alt"></i> +420 123456789</li>
<div class="social-btn">
<li><i class="fab fa-facebook-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
</div>
</ul>
</div>
</nav>
<div class="menu-container">
<div class="kolecko">
</div>
<img src="css/img/logo.png" class="logo">
</div>
<div class="container">
<div class="slider">
<div class="slide">
<p>MB A35 AMG 2019 AeroPacket <br><span>Můžeš mě mít již od 4999 Kč</span><br>Pronajmout</p>
</div>
<div class="slide">
<p>Audi A7 V6T 2017 <br><span>Můžeš mě mít již od 4999 Kč</span><br>Pronajmout</p>
</div>
<div class="slide">
<p>Audi A3 2017 <br><span>Můžeš mě mít již od 4999 Kč</span><br>Pronajmout</p>
</div>
</div>
<div class="prolog">
<h1>Overcars s.r.o. - Půjčovna a prodejna luxusních automobilů</h1>
<p>Jsme malá začínající firma se zaměřením na pronájem a prodej vozů. Půjčujeme od levných vozů až po vozy luxusní! Naše vozy jsou s pravidelným servisem a ve 100% stavu. Řídíme se motem náš zákazník náš pán. Dokážeme zprostředkovat pronájem i prodej vozidel na míru.</p>
</div>
<div class="newslatters">
<h2>Chceš vědět, co se u nás děje?</h2>
<p>Přihlaš se k odběru novinek!</p>
<form action="#">
<input type="email" placeholder="Email" class="email">
<input type="submit" value="Odebírat" class="submit">
</form>
</div>
</div>
<footer>
<div class="author">
<p>Build with <i class="fas fa-heart"></i> by GMWebs</p>
</div>
</footer>
Can somebody help me please?
Thank you in advance for the advice!
It is definitely an issue with z-index.
You can simply add this CSS to your nav:
position: relative;
z-index: 1;
And remove the z-index: -1 from the .slider element.