Issues here with CSS are: - html

I wish to know solutions to these kind of issues:
How can I make this grey rectangle dissapear on DESKTOP screen size?(do not know how did it end up right there)
How can I get these "Sign up..." text in the title section to be in one row(small fonts) instead of a two? ( I have tried inline-block etc, but it does not work)
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#600;800&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* {
font-family: 'Manrope', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: hsl(230, 100%, 99%);
background: url('./images/bg-pattern.svg');
background-repeat: no-repeat;
background-size: 100% 53%;
}
.main-section {
min-height: 100vh;
width: 32em;
}
.title-section {
min-height: 25vh;
margin-top: 2em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 99;
position: relative;
}
.title-section span {
color: hsl(225, 20%, 60%);
}
.title-span-1 {
padding-top: 0.65em;
}
.img-pattern {
position: absolute;
z-index: -1;
width: 170px;
}
.card-section {
background: #ffffff;
min-height: 60vh;
padding: 1em;
text-align: center;
display: flex;
flex-direction: column;
box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.25);
}
/* <----- CARD -----> */
.views-title {
margin-top: 2em;
margin-bottom: 2.5em;
color: hsl(225, 20%, 60%);
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 2px;
}
.slider-container .slider-range {
-webkit-appearance: none;
outline: none;
width: 90%;
height: 10px;
border-radius: 5px;
background: hsl(230, 100%, 99%);
height: 10px;
cursor: pointer;
}
.amount-container {
margin: 2em;
text-align: center;
}
.amount {
font-size: 40px;
font-weight: 800;
}
.amount-text {
font-weight: 600;
font-size: 20px;
display: inline-block;
vertical-align: middle;
color: hsl(225, 20%, 60%);
padding: 0.5em;
}
.billing-container {
display: inline-block;
text-align: center;
color: hsl(225, 20%, 60%);
}
.billing-month,
.billing-year {
display: inline-block;
width: 10em;
}
.billing-month {
margin-right: 1em;
}
.monthly-billing-text {
margin-right: 0.75em;
}
.yearly-billing-text {
margin-right: 0.2em;
}
.yearly-discount {
color: hsl(15, 100%, 70%);
background: hsl(14, 92%, 95%);
font-size: 13px;
font-weight: 800;
border-radius: 20px;
padding: 0.1em 0.5em;
}
.billing-year {
margin-left: 3em;
}
hr {
margin-top: 3em;
background-color: rgba(0, 0, 0, 0.65);
}
.billing-benefits {
margin-top: 2em;
}
.billing-benefits ul {
list-style: none;
color: hsl(225, 20%, 60%);
}
.billing-benefits li {
margin-top: 0.5em;
font-weight: 800;
}
li::before {
content: '✓';
color: hsl(174, 86%, 45%);
font-weight: 800;
margin-right: 1.5em;
}
.button-trial {
margin-top: 2.5em;
margin-bottom: 2em;
border: none;
outline: none;
padding: 1em 3em;
width: 200px;
background: hsl(227, 35%, 25%);
color: hsl(226, 100%, 87%);
border-radius: 30px;
font-weight: 800;
cursor: pointer;
}
/* DESKTOP */
#media only screen and (min-width: 1000px) {
.main-section {
width: 50em;
}
.card-section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px 100px 100px;
grid-template-areas: "main-title amount-container" "input input" "billing-area billing-area" "benefits-list benefits-list";
}
.title-section {
grid-area: main-title;
}
.views-title {
margin-top: 3em;
}
.slider-container {
grid-area: input;
margin: 2.5em;
}
.amount-container {
grid-area: amount-container;
display: flex;
justify-content: center;
align-items: center;
}
.billing-container {
grid-area: billing-area;
}
.yearly-discount {
position: relative;
}
.yearly-discount::after {
position: absolute;
content: "discount";
background: hsl(14, 92%, 95%);
top: 20%;
transform: translateY(-20%);
width: 65px;
left: 3.2em;
line-height: 1.6;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.billing-benefits {
grid-area: benefits-list;
display: flex;
justify-content: space-around;
align-items: center;
}
.billing-benefits ul {
text-align: left;
}
.button-trial {
grid-area: btn-trial;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Interactive pricing component</title>
</head>
<body>
<section class="main-section">
<div class="title-section">
<h1 class="main-title">Simple, traffic-based pricing</h1>
<span class="title-span-1">Sign up for our 30-day trial.
<br>
<span class="title-span-2">No credit card required.</span>
</span>
<img src="./images/pattern-circles.svg" alt="background image pattern" class="img-pattern">
</div>
<div class="card-section">
<h2 class="views-title">100K Pageviews</h2>
<div class="slider-container">
<input type="range" min="1" max="100" value="50" class="slider-range">
</div>
<div class="amount-container">
<span class="amount">$16.00<span class="amount-text"> / month</span></span>
</div>
<div class="billing-container">
<div class="billing-month">
<span class="monthly-billing-text">Monthly Billing</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="billing-year">
<span class="yearly-billing-text">Yearly Billing</span>
<span class="yearly-discount">-25%</span>
</div>
</div>
<hr>
<div class="billing-benefits">
<ul>
<li>Unlimited websites</li>
<li>100% data ownership</li>
<li>Email reports</li>
</ul>
<button class="button-trial">
Start my trial
</button>
</div>
</div>
</section>
</body>
</html>

Next time Read How to ask before asking a question.
You can just wrap Text in one span
<span class="title-span-1">Sign up for our 30-day trial. No credit card required.</span>
Use Media query to get text In Mobile Responsive.
#media screen and (max-width: 768px){
.title-span-1{
font-size: 14px;
}
}

Related

Auto adjusting form using margin

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.

How do I position my Stats under the main Article using flex?

(((THE ISSUE IS IN THE #media PROPERTY)))
so this is my code, I am trying to bring my stats under the main article but no matter how I change the width or height it doesn't affect the container one bit, please can someone tell me where am I doing a mistake or what should I do to make it work. (this might give you the idea of what i am looking for (https://imgur.com/2jTBb7J), also how do i make my images blend mode so that it matches the linked file.
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats_container {
align-content: center;
text-align: center;
display: block;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
#media only screen and (min-width: 1224px) {
.card {
display: flex;
width: 1040px;
height: 450px;
align-self: center;
}
.image_container {
order: 2;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.image {
width: 100%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
}
.text-container {
height: 450px;
border: 1px red solid;
align-self: flex-start;
text-align: flex-start;
}
h1,
article {
text-align: left;
padding-left: 50px;
}
h1 {
padding-top: 40px;
}
article {
padding-top: 5px;
}
.stats_container {
border: 1px yellow solid;
justify-content: flex-start;
text-align: left;
display: inline;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 22px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
}
<DOCTYPE! html>
<html lang="en">
<head>
<link href="firstproject.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="image-header-desktop.jpg">
</div>
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="companies"><span class="num1">10k+</span>
<span class="stats_heading">companies</span></div>
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span></div>
<div class="queries"><span class="num1">12M+</span>
<span class="stats_heading">queries</span></div>
</section>
</div>
</div>
</div>
</body>
</html>
I hope this is what you trying to achieve. I made some changes in answer, which I were submitted before.
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats_container {
align-content: center;
text-align: center;
display: block;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
#media only screen and (min-width: 1224px) {
.card {
display:flex;
width: 1040px;
height: 450px;
align-self: center;
}
.image_container {
order:2;
border: 1px red solid;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.stats{
display:flex;
justify-content:center;
}
.image {
width: 100%;
height: 100%;
mix-blend-mode: soft-light;
}
}
<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="https://images.indianexpress.com/2020/08/Fujifilm-FB.jpg">
</div>
<div class="text-wrapper">
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="companies"><span class="num1">10k+</span>
<span class="stats_heading">companies</span></div>
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span></div>
<div class="queries"><span class="num1">12M+</span>
<span class="stats_heading">queries</span></div>
</section>
</div>
</div>
</div>
</div>
Firstly, change your HTML to this
<DOCTYPE! html>
<html lang="en">
<head>
<link href="firstproject.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="https://pbs.twimg.com/profile_images/1406950250158333952/fjMy7l0K_400x400.jpg">
</div>
<div class="text">
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="stat-info">
<div class="companies"><span class="num1">10k+</span>
<span class="stats_heading">companies</span></div>
</div>
<div class="stat-info">
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span></div>
</div>
<div class="stat-info">
<div class="queries"><span class="num1">12M+</span>
<span class="stats_heading">queries</span></div>
</div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>
Now change your CSS to this:
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats_container {
align-content: center;
text-align: center;
display: block;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
#media only screen and (min-width: 1224px) {
.card {
display: flex;
width: 1040px;
height: 450px;
align-self: center;
}
.image_container {
order: 2;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.image {
width: 100%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
}
.text {
display: flex;
flex-direction: column;
}
.text div {
flex: 1;
}
.text-container {
/* height: 450px; */
/* border: 1px red solid; */
align-self: flex-start;
text-align: flex-start;
}
h1,
article {
text-align: left;
padding-left: 50px;
}
h1 {
padding-top: 40px;
}
article {
padding-top: 5px;
}
.stats_container {
/* border: 1px yellow solid; */
justify-content: flex-start;
text-align: left;
display: flex;
}
.stats {
display: flex;
padding-left: 30px;
}
.stat-info {
margin: 20px;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 22px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
}
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats{
align-content: center;
text-align: center;
display: flex;
flex-direction: column;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
#media only screen and (min-width: 800px) {
.card {
display: flex;
width: 80vw;
height: 450px;
align-self: center;
}
.image_container {
order: 2;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.image {
width: 100%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
}
.text-container {
/* height: 450px; */
border: 1px red solid;
align-self: flex-start;
text-align: flex-start;
}
h1,
article {
text-align: left;
padding-left: 50px;
}
h1 {
padding-top: 40px;
}
article {
padding-top: 5px;
}
.stats {
border: 1px yellow solid;
justify-content: space-around;
text-align: center;
flex-direction: row;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 22px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
}
<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="image-header-desktop.jpg">
</div>
<div class="wrapper">
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="companies"><span class="num1">10k+</span>
<span class="stats_heading">companies</span>
</div>
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span>
</div>
<div class="queries"><span class="num1">12M+</span>
<span class="stats_heading">queries</span>
</div>
</section>
</div>
</div>
</div>
</div>
Made some changes to the existing HTML and CSS. You needed a wrapper element. Please modify the CSS as needed.
Putted your text and stats in a single container and applied :
.side-container {
display: flex;
flex-flow: column
}
So that they inner containers(stats & text) can be shown in columns using
flex-flow: column
Also applied some additional flexy to .stats like below :
.stats {
justify-content: space-around;
display: flex;
flex-flow: row;
}
This is for stats to be in row and have space around them
You can use CSS according to need . I used here some only for demo purpose
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats_container {
align-content: center;
text-align: center;
display: block;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
#media only screen and (min-width: 1224px) {
.card {
display: flex;
width: 1040px;
height: 450px;
align-self: center;
}
.image_container {
order: 2;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.image {
width: 100%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
}
.text-container {
height: 450px;
border: 1px red solid;
align-self: flex-start;
text-align: flex-start;
}
h1,
article {
text-align: left;
padding-left: 50px;
}
h1 {
padding-top: 40px;
}
article {
padding-top: 5px;
}
.stats_container {
border: 1px yellow solid;
justify-content: flex-start;
text-align: left;
display: inline;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 22px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
.side-container {
display: flex;
flex-flow: column
}
.stats {
justify-content: space-around;
display: flex;
flex-flow: row;
}
}
<DOCTYPE! html>
<html lang="en">
<head>
<link href="firstproject.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="https://jooinn.com/images/dramatic-landscape-7.jpg">
</div>
<div class="side-container">
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="companies"><span class="num1">10k+</span>
<span class="stats_heading">companies</span></div>
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span></div>
<div class="queries"><span class="num1">12M+</span>
<span class="stats_heading">queries</span></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>

Responsive => DESKTOP screen

I am stuck with responsive, to be more precise, with desktop screen of 1440px(90em).Does not really matter which size, but when I try to make it responsive(desktop), my tip calculator always looks somehow weird.I am not much experienced with CSS, thus these kind of problems occur every now and then.Anybody can check this project(code) and let some hints/tips go my way? :)
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Tip calculator app</title>
</head>
<body>
<div class="main__container">
<div class="logo">
<img src="./images/logo.svg" alt="logo" class="logo">
</div>
<div class="input__container">
<label for="bill"><span>Bill</span></label>
<input type="text" class="input__count">
<img src="./images/icon-dollar.svg" alt="person icon" class="img__dollar">
</div>
<div class="tip__container">
<h2>Select Tip %</h2>
<div class="tip__numbers">
<span>5%</span>
<span>10%</span>
<span>15%</span>
<span>25%</span>
<span>50%</span>
<input placeholder="Custom">Custom</input>
</div>
</div>
<div class="result">
<span>Number of people</span>
<span class="error__info">Can't be zero</span>
<img src="./images/icon-person.svg" alt="person icon" class="img__person">
<input type="text" class="input__people">
<div class="result__numbers">
<div class="result__numbers__container">
<span class="text__white">Tip Amount</span>
<span class="text__cyan">/ person</span>
</div>
<div class="result__tip__number">
<span>$0.00</span>
</div>
<div class="result__numbers__container">
<span class="text__white">Total</span>
<span class="text__cyan">/ person</span>
</div>
<div class="result__tip__number">
<span class="result__total__number">$0.00</span>
</div>
Reset
</div>
</div>
</div>
</body>
</html>
CSS code:
#import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght#400;700&display=swap');
:root {
--bg-color: rgba(184, 181, 181, 0.788);
--strong-cyan: hsl(172, 67%, 45%);
--very-dark-cyan: hsl(183, 100%, 15%);
--dark-grayish-cyan: hsl(186, 14%, 43%);
--dark-grayish-cyan-2: hsl(184, 14%, 56%);
--light-grayish-cyan: hsl(185, 41%, 84%);
--light-grayish-cyan-2: hsl(189, 41%, 97%);
--white: hsl(0, 0%, 100%);
--inp-font-size: 2.4em;
}
/* MOBILE FIRST DESIGN */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Space Mono', monospace;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.main__container {
background: hsl(185, 41%, 84%);
min-height: 90vh;
width: 20em;
/* !!! */
display: flex;
flex-direction: column;
align-items: center;
}
// #media (min-width: 90em) {
// .main__container {
// width: 100%;
// }
// }
.logo {
display: flex;
align-items: center;
justify-content: center;
padding-top: 2em;
}
.input__container,
.tip__container {
background: var(--white);
width: 100%;
}
.input__container {
height: 10vh;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
padding: 1.5em;
margin-top: 4.5em;
position: relative;
}
.input__container span {
display: block;
color: var(--very-dark-cyan);
font-weight: 700;
}
.input__count {
border: none;
outline: none;
background: var(--light-grayish-cyan-2);
width: 100%;
font-size: 2em;
border-radius: 10px;
padding-left: 3.5em;
cursor: pointer;
transition: all 200ms ease-in-out;
color: var(--very-dark-cyan);
font-weight: 700;
}
.input__count:hover,
.input__count:focus {
border: 3px solid var(--strong-cyan);
}
.input__container img {
position: absolute;
top: 60%;
left: 15%;
height: 20%;
}
.tip__container {
height: 20vh;
}
// #media (min-width: 90em) {
// .tip__container {
// display: flex;
// }
.tip__container h2 {
color: var(--very-dark-cyan);
font-weight: 700;
font-size: 1em;
padding: 2em 0em 1em 1.5em;
}
.tip__numbers {
padding: 1.5em;
display: grid;
grid-template-columns: 50% auto;
grid-template-rows: repeat(3, 2em);
gap: 0.5em;
}
.tip__numbers span {
background: var(--very-dark-cyan);
color: var(--white);
font-weight: 700;
border-radius: 5px;
text-align: center;
padding: 0.2em 0em;
cursor: pointer;
}
.tip__numbers span:hover {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.tip__numbers span:last-child {
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
}
.tip__numbers span:nth-child(3) {
/* --> ACTIVE TIP PERCENTAGE <--*/
background: var(--strong-cyan);
color: var(--very-dark-cyan);
}
.tip__numbers input {
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
font-weight: 700;
border: none;
outline: none;
text-align: center;
cursor: pointer;
transition: all 400ms ease-in-out;
}
.tip__numbers input:hover,
.tip__numbers input:focus {
border: 3px solid var(--strong-cyan);
border-radius: 5px;
}
input::placeholder {
padding-left: 0.5em;
font-size: 1.2em;
}
.result {
height: 50vh;
padding: 1.5em;
background: var(--white);
width: 100%;
position: relative;
}
.result > span {
color: var(--very-dark-cyan);
font-weight: 700;
display: inline;
margin-bottom: 1em;
font-size: 0.8em;
}
.result .error__info {
color: orange;
margin-left: 2.5em;
}
.input__people {
border: none;
outline: none;
background: var(--light-grayish-cyan-2);
color: var(--very-dark-cyan);
position: relative;
width: 100%;
font-size: 2em;
border-radius: 10px;
padding-left: 7.5em;
cursor: pointer;
font-weight: 700;
}
.img__person {
position: absolute;
z-index: 1;
top: 12%;
left: 16%;
}
.result__numbers {
background: var(--very-dark-cyan);
margin-top: 1.5em;
padding: 1.5em 1em;
width: 19em;
display: grid;
grid-template-columns: 50% auto;
grid-template-rows: 1fr 1fr;
}
.result__numbers__container {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 7em;
margin-bottom: 1em;
}
.text__white {
color: var(--white);
}
.text__cyan {
color: var(--dark-grayish-cyan);
font-size: 0.6em;
letter-spacing: 2px;
font-weight: 700;
}
.result__tip__number {
margin-left: 4em;
color: var(--strong-cyan);
font-weight: 700;
font-size: 1.2em;
}
.btn__reset {
text-decoration: none;
text-transform: uppercase;
background: var(--strong-cyan);
color: var(--very-dark-cyan);
text-align: center;
font-weight: 700;
border-radius: 5px;
display: inline-block;
padding: 0.5em 2em;
width: 17em;
}
.btn__reset:hover {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
If you want a quick hint use media queries to adjust to smaller screens or for bigger screens
Like:
#media screen and (max-width: 992px){
//Here you put your css for everything less then 992px
}
#media screen and (max-width: 760px){
//Here you put your css for everything less then 760px
}
//etc.
or/and use percentage instead of strict sizes where it make sense
or/and use vw and vh instead of script sizes where it makes sense ("1vw" equals a 1 percent of screen size width, "1vh" is 1 percent of screen height)
or/and consider to use image instead of css for this calulator if it's just a n picture and doesn't do anything.
you can do like that every think betwen that screen size it's going to be re-style
dont use px to set the css (em,vh,%,rem)
#media screen and (min-width: 720px) and (max-width: 992px) {
}
#media screen and (min-width: 1px) and (max-width: 720px) {
}

Flexbox Form not covering entire site

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>

Is it possible for me to use CSS to have an image light up with mouseover?

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">