<!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.11.2/css/all.css">
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero {
width: 100%;
height: 100vh;
background-image: linear-gradient(black 0%, black 34%, white 34%, white 100%);
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo {
width: 100px;
margin-left: -80px;
}
nav ul li {
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
.content {
text-align: left;
}
.content h1{
font-size: 70px;
color: rgb(255, 255, 255);
font-weight: 600;
transition: 0.5s;
margin-bottom: 700px;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
}
.banner {
position: relative;
width: 90%;
margin: 50px auto;
}
.heading {
position: absolute;
top: 50%;
width: 50%;
margin-top: -400px;
margin-left: 650px;
text-align: center;
font-size: 3rem;
}
.food{
width: 400px;
position:absolute;
margin-top: -500px;
margin-left: 580px;
opacity: 0.4;
transition: opacity .3s ease;
background-color: rgba(0,0,0,0.6);
}
.contact-info{
display: inline;
width: 100%;
max-width: 1200px;
align-items: center;
justify-content: center;
padding: 0 20px;
margin-top: 320px;
}
.card{
background: #fff;
padding: 0 20px;
margin: 0 10px;
width: calc(33% - 20px);
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(0, 0, 0);
cursor: pointer;
}
.card-icon{
font-size: 28px;
background: #ff6348;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px !important;
border-radius: 50%;
transition: 0.3s linear;
}
.card:hover .card-icon{
background: none;
color: #ff6348;
transform: scale(1.6);
}
.card p{
margin-top: 20px;
font-weight: 300;
letter-spacing: 2px;
max-height: 0;
opacity: 0;
transition: 0.3s linear;
}
.card:hover p{
max-height: 40px;
opacity: 1;
}
.contact{
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: inline;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contactform {
width: 500px;
padding: 10px;
background: #fff;
margin-top: 280px;
}
.contatform h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactform .inputBox{
position: relative;
width: 100%;
margin-top: 10px;
}
.contactform .inputBox input,
.contactform .inputBox textarea{
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid #333;
outline: none;
resize: none;
}
.contactform .inputBox input [type="submit"]
{
width: 100px;
background: #00bcd4;
color: #fff;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
.map iframe {
width: 300px;
height: 400px;
display: flex;
flex-direction: row;
margin-top: 100px;
}
#media (max-width: 991px)
{
.contact{
padding:50px;
}
.container {
flex-direction: column;
}
.container .contact-info2 {
margin-bottom: 40PX;
}
.container .contact-info2,
.contatform{
width: 100%;
}
}
#media screen and (max-width:800px) {
.contact-info{
flex-direction: column;
}
.card{
width: 100%;
max-width: 300px;
margin: 10px 0;
}
}
footer {
text-align: center;
background-color: rgb(29, 17, 17);
color: #fff;
padding: 12px;
position: absolute;
bottom: 0;
width: 100%;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="hero">
<nav>
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>Photos</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="content">
<div class ="row">
<div class = "banner">
<img class="food" src="food.jpeg" alt="[food]">
<h1 class ="heading">Contact Us</h1>
</div>
</div>
</div>
<div class="contact-info">
<div class="card">
<i class="card-icon far fa-envelope"></i>
<p>Mehmet.under#gmail.com</p>
</div>
<div class="card">
<i class="card-icon fas fa-phone"></i>
<p>+4799221199</p>
</div>
<div class="card">
<i class="card-icon fas fa-map-marker-alt"></i>
<p>Karl Johans gate 5, 0154 OSLO</p>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2000.2351438173973!2d10.
746176751774849!3d59.911644771148914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416e89e0be32c5%
3A0xa9aad198e39ddef9!2sKarl%20Johans%20gate%205%2C%200154%20Oslo!5e0!3m2!1sno!2sno!4v1667850923403!5m2!1sno!2sno"
style="border:0;"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<section class="contact">
<div class="contactform">
<form action="">
<h2>Send Message</h2>
<div class="inputBox">
<input type="text" name="" placeholder= "Full Name" required="required">
</div>
<div class="inputBox">
<input type="text" name="" placeholder="Email" required="required">
</div>
<div class="inputBox">
<textarea placeholder="Type Your Message" required="required"></textarea>
</div>
<div class="inputBox">
<input type="submit" name="" value="Send">
</div>
</div>
</form>
</section>
<footer>
<p>Just Turkey Grill is a 501c(3)
organization, and your contributions are tax
deductible.</p>
<p id="copyright">Copyright © 2022 by the Just Turkey Grill.
Questions?
<a href="mailto:Mehmet.under#gmail.com"
>Mail Mehmet Under.</a></p>
</footer>
<!-- footer -->
</div>
</body>
</html>
I did nothing special. The first second it worked and the other, it stopped being clickable. I need help straight away because I have to give in this task about 2 hours. The only thing I changed was the section area, but nothing more. I just changed the form and added back the map, and changed and added more css code.
Just add z-index: 1 to your navbar and should be work
With the inspector of your browser you can see that the "contact" section goes over the navbar, you have to put a higher z-index on the navbar so that it goes over it
Related
I would like to have these images on top of the title and that their size affects the size of the div they are in to work something like in this website: https://nomadgoods.com/collections/cases
I have managed to put a picture one above the other and make the hover function work but making that with "position: absolute;" will make it so that the images dont afect any othe elemets, Is there any way of having one on top of the other with no "position: absolute;" or that even if they use these the still will afect the rest of the elements.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
.product-img.is-visible {
opacity: 1;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
z-index: 2;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img is-visible">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
To solve this you can just set one element's position to absolute and the other's relative.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: 0;
}
.product-img:not(.is-visible) {
position: absolute;
}
.product-img.is-visible {
display: block;
opacity: 1;
position: relative;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img is-visible">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
You are making position of both images to absolute this is causing the problem . Make one image absolute and position it above the other image. When you hover over image at the top disappears and image in the background become visible.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: relative;
top: 0;
left: 0;
}
.main-image
{
position:absolute;
margin-top:6.5%;
margin-left:4%;
}
.product-img.is-visible {
opacity: 1;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
z-index: 2;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img main-image is-visible">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
Still learning code. I am building a contact page and wanted to include my header bar at the top of the page, but when I added the code for this my header bar appears to the left of my page all wacky. I know this is most likely a CSS error, but I can't seem to pinpoint why my header bar wouldn't display at the top of my page. Anyone willing to take a look? Here's my code.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
Your <header> (as opposed to <head>) has to be inside the <body> tag (which contains everything that is visible on the page)!
As a start, IMO, <body> should not be styled as flex, at least not when using <header> which brings its own defaults which were being overridden.
Moving the flex styles from body to .container will fix your immediate request, but probably introduce other styling concerns.
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before {
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details {
margin: 14px;
text-align: center;
}
.content .left-side .details i {
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic {
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two {
font-size: 14px;
color: #afafb6;
}
.container .content .right-side {
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text {
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box {
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea {
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box {
min-height: 110px;
}
.right-side .input-box textarea {
padding-top: 6px;
}
.right-side .button {
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"] {
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover {
background: #bc0456;
}
#media (max-width: 950px) {
.container {
width: 90%;
padding: 30px 40px 40px 35px;
}
.container .content .right-side {
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container {
margin: 40px 0;
height: 100%;
}
.container .content {
flex-direction: column-reverse;
}
.container .content .left-side {
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before {
display: none;
}
.container .content .right-side {
width: 100%;
margin-left: 0;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
The problem occurs from the body. You assign to flex. I removed it and create a new div which wrappend the container. If you want reduce the width in the navbar you have to wrapped to another div and center it.
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700;800&display=swap');
*{
margin: 0%;
padding: 0%;
}
.maincontainer
{
display: grid;
place-items: center;
}
.sec
{
font-family: Open Sans;
position: relative;
width: 70%;
display: flex;
align-items: center;
justify-content: space-evenly;
height: max-content;
margin-top: 15%;
}
ul{
display: flex;
justify-content: space-around;
list-style: none;
width: 100%;
}
.line
{
position: absolute;
z-index: -1;
width: 100%;
height: 5px;
background-color: #BDBDBD;
border-radius: 20px;
}
.circle
{
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background-color: #1AEF81;
}
.odd::after
{
content: "25/08/2021 8:00 PM";
position: absolute;
width: max-content;
height: max-content;
border-radius: 7px;
background-color: deepskyblue;
transform: translate(-43%, 250%);
}
.odd::before
{
content: "Approved By Co-ordinator";
position: absolute;
width: max-content;
font-weight: 600;
height: max-content;
border-radius: 7px;
background-color: deepskyblue;
transform: translate(-45%, 70%);
padding-top: 35px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
color: #ffffff;
}
.even::before
{
z-index: 1;
content: "25/08/2021 8:00 PM";
position: absolute;
top: -90px;
width: max-content;
height: max-content;
border-radius: 7px;
background-color: deepskyblue;
transform: translatex(-44%);
}
.even::after
{
content: "Approved By Co-ordiantor";
content: "25/08/2021 8:00 PM";
color: white;
font-weight: 600;
position: absolute;
top: -100px;
width: max-content;
height: max-content;
border-radius: 7px;
background-color: deepskyblue;
transform: translatex(-45%);
padding-top: 35px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.events
{
display: grid;
place-items: center;
margin-top: 15%;
}
.eventCards
{
width: max-content;
display: flex;
align-items: center;
justify-content: space-around;
font-family: Open Sans;
font-size: small;
border-radius: 10px;
padding: 10px;
background-color: rgba(0, 191, 255, 0.13);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.507);
margin: 15px;
}
.name
{
display: flex;
place-items: center;
}
.name p{
padding: 10px;
font-size: smaller;
color: #505050;
}
.right
{
width: 90px;
height: 30px;
border-radius: 5px;
background-color: #BDBDBD;
font-family: Open Sans;
font-weight: 700;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.eventCards .status
{
margin-left: 50px;
margin-right: 10px;
}
#one
{
background-color: #1AEF81;
}
#two
{
background-color: #ffc400;
}
#three
{
background-color: #c40d0d;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="maincontainer">
<div class="sec">
<div class="line"></div>
<ul>
<li class="circle odd"></li>
<li class="circle even"></li>
<li class="circle odd"></li>
<li class="circle even"></li>
<li class="circle odd"></li>
</ul>
</div>
<div class="events">
<div class="eventCards">
<div class="left">
<div class="name">
<h3>PHP-DC Introduction Session</h3>
<p>8sd7f8sd6f</p>
</div>
<p>27-08-2021</p>
</div>
<p class="status">Status : </p>
<div class="right" id="one">
Approved
</div>
</div>
<div class="eventCards">
<div class="left">
<div class="name">
<h3>PHP-DC Introduction Session</h3>
<p>8sd7f8sd6f</p>
</div>
<p>27-08-2021</p>
</div>
<p class="status">Status : </p>
<div class="right" id="two">
Pending
</div>
</div>
<div class="eventCards">
<div class="left">
<div class="name">
<h3>PHP-DC Introduction Session</h3>
<p>8sd7f8sd6f</p>
</div>
<p>27-08-2021</p>
</div>
<p class="status">Status : </p>
<div class="right" id="three">
Rejected
</div>
</div>
</div>
</div>
</body>
</html>
I have to add multiple texts in pseudo-selectors using it's content property. Is there any way to do it?
I would like to achieve something like this:
Result
I have used the :before and :after pseudo-selector of the middle circle and place the text there, but I think there must be an optical way to do it right?
It happens that my "form" has 3 divs "(.contact-in)" which i call them with ":nth-child" in my css and with flex i do control their percentage on the site but in x-axis. So my question is how can i control their % in y-axis because they aren't covering the entire site and for example my footer isn't going all the way down because i'm not covering the entire page with the content.
Postscript: The site layout is with css grid.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/contact.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>TRV ECOLOGICO SRL</title>
</head>
<body>
<div class="contenedor">
<nav class="contenedor-nav">
<div class="menu-navegacion">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
<div class="contenedor-texto">
<div class="textotriangulo"><h2>TRV ECOLOGICO SRL</h2></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=index.html>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=contact.html>CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<div class="contenedor-form">
<div class="contact-wrap">
<div class="contact-in">
<h1>Información de Contacto</h1>
<h2><i class="fa fa-phone" aria-hidden="true"></i>Teléfono</h2>
<p>123 - 4567 - 8901</p>
<p>011 - 1234 - 5678</p>
<h2><i class="fa fa-envelope" aria-hidden="true"></i>Email</h2>
<p>asd#asdfgh.com.ar</p>
<p>asd#asdfgh.com.ar</p>
<h2><i class="fa fa-map-marker" aria-hidden="true"></i>Dirección</h2>
<p>Morón, Buenos Aires, Argentina</p>
</div>
<div class="contact-in">
<h1>Contacto</h1>
<form>
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<textarea placeholder="Mensaje" class="contact-in-textarea"></textarea>
<input type="submit" value="SUBMIT" class="contact-in-btn">
</form>
</div>
<div class="contact-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52502.855079198634!2d-58.65170330080583!3d-34.6691347508206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc76f57e3be01%3A0xa488fcdcec5b600f!2sMor%C3%B3n%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1618120836940!5m2!1ses!2sar" width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer class="contenedor-footer">
<div id="footer">
<p>TRV ECOLOGICO SRL - Todos los derechos reservados</p>
</div>
</footer>
</div>
</body>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background: #fff;
}
/*GRID CONTENEDOR*/
.contenedor{
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.contenedor .contenedor-nav{
grid-column-start: 1;
grid-column-end: 4;
}
.contenedor .contenedor-form{
grid-column: span 2;
}
.contenedor .contenedor-footer{
grid-column-start: 1;
grid-column-end: 4;
}
/* MENU NAVEGACION*/
nav{
position: sticky;
top: 0;
z-index: 30;
}
.menu-navegacion{
width: 100%;
margin: auto;
overflow: hidden;
padding: 0;
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
background-color: rgb(54, 54, 54);
}
.logo{
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo{
height: 100%;
position: absolute;
}
.triangulo{
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.contenedor-texto{
display: flex;
align-items: center;
justify-content:center;
height: 50px;
width: 100%;
}
.textotriangulo{
position: absolute;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 1em;
text-shadow: 3px 2px 1px rgba(54, 54, 54, 0.493);
}
.menu-lista{
margin-right: 20%;
}
.menu-lista ul li{
list-style: none;
display: inline-block;
}
.menu-lista ul li a{
text-decoration: none;
color: white;
padding-left: 20px;
}
/* FORM */
.contact-wrap{
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.contact-in{
padding: 40px 30px;
}
.contact-in:nth-child(1){
flex: 30%;
background: url(../images-form/1.jpg);
color: #fff;
}
.contact-in:nth-child(2){
flex: 45%;
background: #c31432;
}
.contact-in:nth-child(3){
flex: 25%;
padding: 0;
}
.contact-in h1{
font-size: 24px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.contact-in h2{
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
}
.contact-in h2 i{
font-size: 16px;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
color: #000;
border-radius: 50px;
line-height: 40px;
text-align: center;
}
.contact-in p{
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
}
.contact-in form{
width: 100%;
height: auto;
}
.contact-in-input{
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
}
.contact-in-textarea{
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-top: 5px;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
}
.contact-in-btn{
width: 100%;
height: 40px;
border: 1px solid #fff;
outline: none;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
cursor: pointer;
}
.contact-in iframe{
width: 100%;
height: 100%;
}
#media only screen and (max-width:480px){
.contact-in:nth-child(1){
flex: 50%;
}
.contact-in:nth-child(2){
flex: 50%;
}
.contact-in:nth-child(3){
flex: 100%;
}
}
#media only screen and (max-width:360px){
.contact-in:nth-child(1){
flex: 50%;
}
.contact-in:nth-child(2){
flex: 50%;
}
.contact-in:nth-child(3){
flex: 100%;
}
}
/* FOOTER */
#footer{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(54, 54, 54);
height: 80px;
width: 100%;
}
#footer p{
color: white;
font-weight: 400;
font-family: 'Ubuntu', sans-serif;
padding: 5px;
border-bottom: solid white 1px;
}
First make the height of html and body to 100%.
html, body{
height: 100%;
}
If you want to make the footer height is to be 80px, then make it in contenedor class
.contenedor{
...
grid-template-rows: repeat(2, auto) 80px;
}
Why to make height internally 80px when you can control it with grid using grid-template-rows.
#footer{
...
height: 80px; // Should be avoided as per your design
... // instead add height for whole footer in grid-tempate-rows
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
background: #fff;
}
/*GRID CONTENEDOR*/
.contenedor {
height: 100%;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto) 80px;
}
.contenedor .contenedor-nav {
grid-column-start: 1;
grid-column-end: 4;
}
.contenedor .contenedor-form {
grid-column: span 2;
}
.contenedor .contenedor-footer {
grid-column-start: 1;
grid-column-end: 4;
}
/* MENU NAVEGACION*/
nav {
position: sticky;
top: 0;
z-index: 30;
}
.menu-navegacion {
width: 100%;
margin: auto;
overflow: hidden;
padding: 0;
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
background-color: rgb(54, 54, 54);
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.contenedor-texto {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
}
.textotriangulo {
position: absolute;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 1em;
text-shadow: 3px 2px 1px rgba(54, 54, 54, 0.493);
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
/* FORM */
.contact-wrap {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.contact-in {
padding: 40px 30px;
}
.contact-in:nth-child(1) {
flex: 30%;
background: url(../images-form/1.jpg);
color: #fff;
}
.contact-in:nth-child(2) {
flex: 45%;
background: #c31432;
}
.contact-in:nth-child(3) {
flex: 25%;
padding: 0;
}
.contact-in h1 {
font-size: 24px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.contact-in h2 {
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
}
.contact-in h2 i {
font-size: 16px;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
color: #000;
border-radius: 50px;
line-height: 40px;
text-align: center;
}
.contact-in p {
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
}
.contact-in form {
width: 100%;
height: auto;
}
.contact-in-input {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.contact-in-textarea {
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-top: 5px;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.contact-in-btn {
width: 100%;
height: 40px;
border: 1px solid #fff;
outline: none;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
cursor: pointer;
}
.contact-in iframe {
width: 100%;
height: 100%;
}
#media only screen and (max-width:480px) {
.contact-in:nth-child(1) {
flex: 50%;
}
.contact-in:nth-child(2) {
flex: 50%;
}
.contact-in:nth-child(3) {
flex: 100%;
}
}
#media only screen and (max-width:360px) {
.contact-in:nth-child(1) {
flex: 50%;
}
.contact-in:nth-child(2) {
flex: 50%;
}
.contact-in:nth-child(3) {
flex: 100%;
}
}
/* FOOTER */
#footer {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(54, 54, 54);
height: 80px;
width: 100%;
}
#footer p {
color: white;
font-weight: 400;
font-family: 'Ubuntu', sans-serif;
padding: 5px;
border-bottom: solid white 1px;
}
<div class="contenedor">
<nav class="contenedor-nav">
<div class="menu-navegacion">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
<div class="contenedor-texto">
<div class="textotriangulo">
<h2>TRV ECOLOGICO SRL</h2>
</div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=index.html>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=contact.html>CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<div class="contenedor-form">
<div class="contact-wrap">
<div class="contact-in">
<h1>Información de Contacto</h1>
<h2><i class="fa fa-phone" aria-hidden="true"></i>Teléfono</h2>
<p>123 - 4567 - 8901</p>
<p>011 - 1234 - 5678</p>
<h2><i class="fa fa-envelope" aria-hidden="true"></i>Email</h2>
<p>asd#asdfgh.com.ar</p>
<p>asd#asdfgh.com.ar</p>
<h2><i class="fa fa-map-marker" aria-hidden="true"></i>Dirección</h2>
<p>Morón, Buenos Aires, Argentina</p>
</div>
<div class="contact-in">
<h1>Contacto</h1>
<form>
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<textarea placeholder="Mensaje" class="contact-in-textarea"></textarea>
<input type="submit" value="SUBMIT" class="contact-in-btn">
</form>
</div>
<div class="contact-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52502.855079198634!2d-58.65170330080583!3d-34.6691347508206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc76f57e3be01%3A0xa488fcdcec5b600f!2sMor%C3%B3n%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1618120836940!5m2!1ses!2sar"
width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer class="contenedor-footer">
<div id="footer">
<p>TRV ECOLOGICO SRL - Todos los derechos reservados</p>
</div>
</footer>
</div>
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 -->