(((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>
Related
I'm currently following TOP (The Odin Project) curriculum and working on my landing page project, so I'm trying to make it as responsive as possible.
How can I put the header's image below the sign up button once I minimize the page?
I've tried to use flex-wrap: wrap; but it'll not work because it wraps when the page is maximized.
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
flex-wrap: wrap;
}
My code
html, body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}
/* blue container, first container */
.dark-blue {
background-color: #1f2937;
display: flex;
flex: 1 1 0;
padding-left: 10%;
padding-right: 10%;
}
.header {
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 5%;
}
.logo {
color: #F9FAF8;
font-size: 24px;
font-weight: bolder;
display: flex;
flex: 1 1 auto;
}
.links {
font-size: 18px;
display: flex;
flex-shrink: 1;
gap: 1rem;
flex-wrap: wrap;
}
.link-text {
font-size: 18px;
color: #e5e7eb;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
}
.main-text {
color: #F9FAF8;
font-size: 48px;
font-weight: bolder;
width: 95%;
display: flex;
flex: 1 1 auto;
padding-bottom: 1rem;
}
.secondary-text {
padding-bottom: .5rem;
font-size: 18px;
max-width: 80%;
color: #e5e7eb;
display: flex;
flex: 1 1 auto;
justify-content: start;
padding-bottom: 1rem;
}
.about-text {
padding-bottom: 5%;
display: flex;
flex-direction: column;
}
.button-one {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-one:hover {
color: #F9FAF8;
font-weight: bold;
background-color: #126e32;
border-radius: 10px;
box-shadow: 0 5px 8px 0 rgba(224, 224, 224, 0.020), 0 7px 10px 0 rgba(238, 238, 238, 0.025);
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-text {
color: #F9FAF8;
}
.button-text:hover {
color: #F9FAF8;
}
.header-image {
width: 45%;
height: 18%;
border-radius: 2px;
display: flex;
flex-shrink: 0;
}
/* second container, information */
.information-header-text {
font-size: 36px;
color: #1f2937;
font-weight: bolder;
text-align: center;
display: flex;
justify-content: center;
padding-top: 5rem;
padding-bottom: 2rem;
flex: 1 1 auto;
}
.image img {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
display: flex;
}
.image img:hover {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
box-shadow: 0 5px 12px 0px rgba(8, 8, 8, 0.199);
}
.subtext {
color: #1f2937;
width: 17rem;
text-align: center;
padding-top: .5rem;
padding-bottom: 1rem;
}
.image-subtext {
display: flex;
justify-content: center;
align-content: center;
gap: 1%;
flex-wrap: wrap;
padding-bottom: 8rem;
}
/* third container, quote container */
.quote {
background-color: #e5e7eb;
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
padding-left: 25%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 10%;
}
.quote-text {
font-size: 36px;
color: #1f2937;
font-style: italic;
font-weight: 100;
width: 100%;
padding-bottom: 0;
}
.author {
font-size: 24px;
color: #1f2937;
font-weight: 900;
width: 90%;
display: flex;
flex-shrink: 1;
padding-left: 70%;
}
/* fourth container, box action */
.action {
background-color:#F9FAF8;
height: 30rem;
display: flex;
justify-content: center;
align-items: center;
flex: 1 1 auto;
}
.box-action {
background-color: #1DB954;
border-radius: 2px;
box-shadow: 0 5px 8px 0px rgba(8, 8, 8, 0.145);
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 auto;
flex-wrap: wrap;
width: 50%;
padding: 5%;
padding-left: 10%;
padding-right: 10%;
gap: 2rem;
}
.action-title {
font-size: 32px;
color: #F9FAF8;
font-weight: bolder;
display: flex;
flex-shrink: 1;
}
.action-subtext {
color: #e5e7eb;
font-size: 18px;
font-weight: lighter;
display: flex;
flex-shrink: 1;
}
.button-two {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
border: 2px solid #F9FAF8;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-two:hover {
color: #1DB954;
font-weight: bold;
background-color: #F9FAF8;
border-radius: 10px;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-text-two {
color: #F9FAF8;
}
.button-text-two:hover {
color: #1DB954;
}
/* Footer */
footer {
color: #e5e7eb;
font-weight: lighter;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Black and White</title>
<link rel="icon" href="images/blackandwhite.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header dark-blue">
<div class="logo">black and white</div>
<ul class="links">
<li><a class="link-text" href="#">home</a></li>
<li><a class="link-text" href="#photos">photos</a></li>
<li><a class="link-text" href="#sign-up">sign up</a></li>
</div>
</div>
<div class="about dark-blue">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey.
There are good things and bad things in every era, and
it's kind of very blindfolded to say one era was wonderful,
as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img class="header-image" src="./images/header-image.jpeg">
</div>
<section id ="photos"></section>
<div class="information">
<div class="information-header-text">Check some black and white photos</div>
<div class="image-subtext">
<div class="one">
<a href="https://images.unsplash.com/reserve/yZfr4jmxQyuaE132MWZm_stagnes.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80">
<div class="image"><img src="./images/rocks.jpeg" alt="Monochrome coastal rocks"></div>
</a>
<div class="subtext">Monochrome coastal rocks</div>
</div>
<div class="two">
<a href="https://images.unsplash.com/photo-1574402897005-74dbf3f19be6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
<div class="image"><img src="./images/stairway.jpeg" alt="Stairway from metro station"></div>
</a>
<div class="subtext">Stairway from metro station</div>
</div>
<div class="three">
<a href="https://images.unsplash.com/photo-1603157259666-71adcb873119?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
<div class="image"><img src="./images/cat.jpeg" alt="Cat eyes"></div>
</a>
<div class="subtext">Cat eyes</div>
</div>
<div class="four">
<a href="https://images.unsplash.com/photo-1452727333656-23ae1299777a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80">
<div class="image"><img src="./images/truck.jpeg" alt="Monochrome vintage truck"> </div>
</a>
<div class="subtext">Monochrome vintage truck</div>
</div>
</div>
<div class="quote">
<div class="quote-text">
Although humans see reality in colour, for me,
black and white has always been connected to the image's deeper truth,
to its most hidden meaning.
</div>
<div class="author">
- Peter Lindbergh
</div>
</div>
</div>
<section id ="sign-up"></section>
<div class="action">
<div class="box-action">
<div class="action-text">
<div class="action-title">More photos?</div>
<div class="action-subtext">Sign up for more beautiful black and white pictures!
</div>
</div>
<div class="button-two">
<a class="button-text-two" href="#">Sign up</a>
</div>
</div>
</div>
<footer class="dark-blue">
Copyright © The Odin Project 2023
</footer>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}
/* blue container, first container */
.dark-blue {
background-color: #1f2937;
display: flex;
flex: 1 1 0;
padding-left: 10%;
padding-right: 10%;
}
.header {
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 5%;
}
.logo {
color: #F9FAF8;
font-size: 24px;
font-weight: bolder;
display: flex;
flex: 1 1 auto;
}
.links {
font-size: 18px;
display: flex;
flex-shrink: 1;
gap: 1rem;
flex-wrap: wrap;
}
.link-text {
font-size: 18px;
color: #e5e7eb;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
}
.main-text {
color: #F9FAF8;
font-size: 48px;
font-weight: bolder;
width: 95%;
display: flex;
flex: 1 1 auto;
padding-bottom: 1rem;
}
.secondary-text {
padding-bottom: .5rem;
font-size: 18px;
max-width: 80%;
color: #e5e7eb;
display: flex;
flex: 1 1 auto;
justify-content: start;
padding-bottom: 1rem;
}
.about-text {
padding-bottom: 5%;
display: flex;
flex-direction: column;
}
.button-one {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-one:hover {
color: #F9FAF8;
font-weight: bold;
background-color: #126e32;
border-radius: 10px;
box-shadow: 0 5px 8px 0 rgba(224, 224, 224, 0.020), 0 7px 10px 0 rgba(238, 238, 238, 0.025);
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-text {
color: #F9FAF8;
}
.button-text:hover {
color: #F9FAF8;
}
.header-image {
width: 45%;
height: 18%;
border-radius: 2px;
display: flex;
flex-shrink: 0;
}
/* second container, information */
.information-header-text {
font-size: 36px;
color: #1f2937;
font-weight: bolder;
text-align: center;
display: flex;
justify-content: center;
padding-top: 5rem;
padding-bottom: 2rem;
flex: 1 1 auto;
}
.image img {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
display: flex;
}
.image img:hover {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
box-shadow: 0 5px 12px 0px rgba(8, 8, 8, 0.199);
}
.subtext {
color: #1f2937;
width: 17rem;
text-align: center;
padding-top: .5rem;
padding-bottom: 1rem;
}
.image-subtext {
display: flex;
justify-content: center;
align-content: center;
gap: 1%;
flex-wrap: wrap;
padding-bottom: 8rem;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Black and White</title>
<link rel="icon" href="images/blackandwhite.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header dark-blue">
<div class="logo">black and white</div>
<ul class="links">
<li><a class="link-text" href="#">home</a></li>
<li><a class="link-text" href="#photos">photos</a></li>
<li><a class="link-text" href="#sign-up">sign up</a></li>
</div>
</div>
<div class="about dark-blue">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey.
There are good things and bad things in every era, and
it's kind of very blindfolded to say one era was wonderful,
as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img class="header-image" src="./images/header-image.jpeg">
</div>
</body>
</html>
You could add a media query that switches the flex direction between row and column when the viewport crosses a particular width threshold.
Might look something like this:
.about {
display: flex;
flex-direction: row;
}
#media (max-width: 600px) {
.about {
flex-direction: column;
}
}
<div class="about">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey. There are good things and bad things in every era, and it's kind of very blindfolded to say one era was wonderful, as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img src="//placekitten.com/300/300">
</div>
This is difficult to demonstrate on StackOverflow due to the snippet framing, but if you full-screen the snippet above and adjust your window size you'll see it snap to column orientation when your window is narrower than 600px.
You could also do this with a container query if you need to base it on a parent element width instead of the entire viewport.
If you mean that you want the image to move when you're reducing the size of the page (rather than minimizing it, i.e. hiding it completely), you could add some media queries to your CSS.
Try adding
#media screen and (max-width: 1200px) {
.about{
flex-direction: column;
}
(setting the px breakpoints for the size you want) and see if it works!
I'm trying out frontend mentor projects and I'm having trouble serving a picture of different viewport size(for desktop) and I don't know what's wrong, I used the picture element and declared at what width the picture should be served but it doesn't work.
The confusing aspect is that flexbox and grid display properties don't have much effect. The small mobile image doesn't get replaced with the desktop one.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
\*::before,
\*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
min-height: 100vh;
background-color: hsl(30, 38%, 92%);
}
main.background {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
background-color: hsl(30, 38%, 92%);
article.card-body {
display: flex;
background-color: #fff;
flex-direction: column;
max-width: 346px;
border-radius: 10px;
section.card-details {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 25px;
picture.image-container {
width: 346px;
height: 243px;
border-radius: 10px;
}
header.title {
color: hsl(228, 12%, 48%);
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 5px;
margin-bottom: 13px;
margin-left: -5px;
margin-top: -3px;
transform: scale(0.9);
}
h1.title-detail {
color: hsl(212, 21%, 14%);
font-family: 'Fraunces', serif;
font-size: 34px;
line-height: 1;
font-weight: 700;
margin-bottom: 17px;
}
}
}
}
p.section-detail {
font-family: 'Montserrat', sans-serif;
color: hsl(228, 12%, 48%);
font-size: 13px;
line-height: 1.6;
margin-bottom: 29px;
}
h2.price {
display: flex;
flex-direction: row;
font-family: 'Fraunces', sans-serif;
color: hsl(158, 36%, 37%);
font-size: 32px;
font-weight: 900;
margin-bottom: 20px;
}
h2.price::after {
content: '$169.99';
display: flex;
flex-direction: row;
align-self: center;
color: hsl(228, 12%, 48%);
font-size: 11px;
font-family: 'Fraunces', sans-serif;
font-weight: 300;
padding-left: 23px;
text-decoration: line-through;
}
img.perfume-image {
object-fit: contain;
width: 346px;
height: 243px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
img.cart-icon {
margin-left: -15px;
}
button.add-to-cart {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
background-color: hsl(158, 36%, 37%);
color: #fff;
width: 298px;
height: 50px;
border: none;
border-radius: 5px;
}
button.add-to-cart:hover {
background-color: hsl(158, 36%, 13%);
cursor: pointer;
}
span.btn-text {
padding-left: 15px;
}
footer.challenge-userinfo {
display: flex;
align-self: flex-end;
div.attribution {
background-color: #fff;
text-align: center;
width: 100%;
font-size: 11px;
text-align: center;
}
div.attribution a {
color: hsl(228, 45%, 44%);
text-decoration: none;
}
}
#media (min-width: 800px) {
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
article.card-body {
display: flex;
flex-direction: row;
min-width: 616px;
}
picture-image-container {
display: flex;
flex-direction: row;
}
.card-details {
width: 308px;
}
}
<main class="background">
<img src="./images/image-product-mobile.jpg" alt="perfume"> PERFUME
<h1>Gabrielle Essence Eau De Parfum</h1>
<p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
<h2>$149.99</h2>
<img src="./images/icon-cart.svg" alt="cart">Add to Cart Challenge by Frontend Mentor. Coded by David Bayode.
I tried using messing with the min and max-widths to see if it's the width misbehaving.
Found the solution, my nested scss styles had a high specificity that prevented media queries from being triggered.
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;
}
}
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) {
}
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">