I want to make the size of cards to be same, irrespective of the text size. If i give more number of text, card is expanding. But i want to set fixed size for the card. Empty spaces for small number of text is what i am expecting. I have tried this code, but it is not looking as expected.
CSS:
#import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 93vh;
}
.grid {
display: grid;
width: 104em;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
align-items: start;
}
.grid-item {
background-color: #fff;
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.2s;
}
.grid-item:hover {
transform: translateY(-0.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}
.card-img {
display: block;
object-fit: cover;
width: 300px;
height: 300px;
}
.card-content {
padding: 2rem;
}
.card-header {
font-size: 2rem;
font-weight: 500;
color: #0d0d0d;
margin-bottom: 1.5rem;
}
.card-text {
font-size: 1.5rem;
letter-spacing: 0.1rem;
line-height: 1.25;
color: #3d3d3d;
margin-bottom: 2rem;
}
.card-btn {
display: block;
width: 100%;
padding: 1.5rem;
font-size: 1.5rem;
text-align: center;
color: #3363ff;
background-color: #d8e0fd;
border: none;
border-radius: 0.4rem;
transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;
}
.card-btn span {
margin-left: 1rem;
transition: 0.2s;
}
.card-btn:hover,
.card-btn:active {
background-color: #c2cffc;
}
.card-btn:hover span,
.card-btn:active span {
margin-left: 1.5rem;
}
#media only screen and (max-width: 60em) {
body {
padding: 2rem;
}
.grid {
grid-gap: 2rem;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webIQ</title>
<link rel="stylesheet" href="home.component.css" />
</head>
<body>
<div class="grid">
<div class="grid-item">
<div class="card">
<div class="card-content">
<h1 class="card-header">Catalog</h1>
<p class="card-text">
Catalog helps us to manage our data assets with information such as location, structure, quality, and relationships, which makes it easier for data users to find and understand the data you need.
</p>
<button type="button" class="card-btn" >Visit <span>→</span></button>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<div class="card-content">
<h1 class="card-header">Data Portal</h1>
<p class="card-text">
Data Portal is a section of our system where you can access details about databases, tables, location, schema, access history, and metadata. Additionally, you can manage access to the tables, including enabling, renewing, and revoking access.
</p>
<button class="card-btn">Visit <span>→</span></button>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<div class="card-content">
<h1 class="card-header">Canary Access</h1>
<p class="card-text">
Canary Access will give the details about the pending, granted requests details.
</p>
<button class="card-btn">Visit <span>→</span></button>
</div>
</div>
</div>
</div>
</body>
</html>
You can add max-height | max-width in each container/card and prevent the box from overflowing if it has more content inside.
You can give each .grid-item, .card and .card-content a height: 100% value so that all the cards are of same height.
Now for the white-space, use flexbox with column direction for card-content and set margin-top value of card-btn to auto so that the button will always stay on the bottom.
Also, make sure to use box-sizing: border-box by default for all elements so that all elements are properly laid out.
Updated fiddle:
#import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 93vh;
}
.grid {
display: grid;
width: 104em;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
align-items: start;
}
.grid-item {
background-color: #fff;
border-radius: 0.4rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: 0.2s;
height: 100%;
}
.grid-item:hover {
transform: translateY(-0.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}
.card {
height: 100%;
}
.card-img {
display: block;
object-fit: cover;
width: 300px;
height: 300px;
}
.card-content {
padding: 2rem;
display: flex;
flex-direction: column;
height: 100%;
}
.card-header {
font-size: 2rem;
font-weight: 500;
color: #0d0d0d;
margin-bottom: 1.5rem;
}
.card-text {
font-size: 1.5rem;
letter-spacing: 0.1rem;
line-height: 1.25;
color: #3d3d3d;
margin-bottom: 2rem;
}
.card-btn {
display: block;
width: 100%;
padding: 1.5rem;
font-size: 1.5rem;
text-align: center;
color: #3363ff;
background-color: #d8e0fd;
border: none;
border-radius: 0.4rem;
transition: 0.2s;
cursor: pointer;
letter-spacing: 0.1rem;
margin-top: auto;
}
.card-btn span {
margin-left: 1rem;
transition: 0.2s;
}
.card-btn:hover,
.card-btn:active {
background-color: #c2cffc;
}
.card-btn:hover span,
.card-btn:active span {
margin-left: 1.5rem;
}
#media only screen and (max-width: 60em) {
body {
padding: 2rem;
}
.grid {
grid-gap: 2rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webIQ</title>
<link rel="stylesheet" href="home.component.css" />
</head>
<body>
<div class="grid">
<div class="grid-item">
<div class="card">
<div class="card-content">
<h1 class="card-header">Catalog</h1>
<p class="card-text">
Catalog helps us to manage our data assets with information such as location, structure, quality, and relationships, which makes it easier for data users to find and understand the data you need.
</p>
<button type="button" class="card-btn">Visit <span>→</span></button>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<div class="card-content">
<h1 class="card-header">Data Portal</h1>
<p class="card-text">
Data Portal is a section of our system where you can access details about databases, tables, location, schema, access history, and metadata. Additionally, you can manage access to the tables, including enabling, renewing, and revoking access.
</p>
<button class="card-btn">Visit <span>→</span></button>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<div class="card-content">
<h1 class="card-header">Canary Access</h1>
<p class="card-text">
Canary Access will give the details about the pending, granted requests details.
</p>
<button class="card-btn">Visit <span>→</span></button>
</div>
</div>
</div>
</div>
</body>
</html>
Related
This is the HTML, the image is contained in the hero-section within the hero container, the image I am working on is the one with class = "tablet". i am trying to replicate the image where the image is offset towARDS THE right side of the screen. I HAVE FOUND IT HARD TO DECIDE ON HOW TO APPROACH THIS, I HAVE TRIED SCALE BUT THEN IT RESIZES VERY SMALL AS THE SCREEN WIDTH REDUCES. PLEASE TAKE A LOOK AT THE CODE AND ANY IDEAS WOULD BE APPRECIATED
<title>Frontend Mentor | Skilled e-learning landing page</title>
</head>
<body>
<nav class="nav">
<span class="nav-item">skilled</span>
Get Started
</nav>
<section class="hero">
<div class="hero-container">
<h1 class="hero-header">Maximize skill, minimize budget</h1>
<p class="hero-txt">
Our modern courses across a range of in-demand skills will give you
the knowledge you need to live the life you want.
</p>
<button class="btn hero-btn">Get Started</button>
</div>
<div class="img-container">
<img alt=" " src="assets/HeroImageMobile.webp" class="mobile" />
<img src="assets\image-hero-tablet#2x.png" alt="" class="tablet" />
</div>
</section>
<main>
<div class="wrapper">
<div class="courses">
<h2 class="courses-header">Check out our most popular courses!</h2>
<div class="course-desc">
<img src="assets\icon-animation.svg" alt="" class="icons" />
<h2 class="course-header">Animation</h2>
<p>
Learn the latest animation techniques to create stunning motion
design and captivate your audience
</p>
<button class="btn main-btn">Get Started</button>
</div>
<div class="course-desc">
<h2 class="course-header">Design</h2>
<img src="assets\icon-Design.svg" alt="" class="icons" />
<p>
Create beautiful, usable interfaces to help shape the future of
how the web looks.
</p>
<button class="btn main-btn">Get Started</button>
</div>
<div class="course-desc">
<img src="assets\icon-photography.svg" alt="" class="icons" />
<h2 class="course-header" 1>Photography</h2>
<p>
Explore critical fundamentals like lighting, composition, and
focus to capture exceptional photos.
</p>
<button class="btn main-btn">Get Started</button>
</div>
<div class="course-desc">
<img src="assets\icon-crypto.svg" alt="" class="icons" />
<h2 class="course-header">Crypto</h2>
<p>
All you need to know to get started investing in crypto. Go from
beginner to advanced with this 54 hour course.
</p>
<button class="btn main-btn">Get Started</button>
</div>
<div class="course-desc">
<img src="assets\icon-business.svg" alt="" class="icons" />
<h2 class="course-header">Business</h2>
<p>
A step-by-step playbook to help you start, scale, and sustain your
business without outside investment.
</p>
<button class="btn main-btn">Get Started</button>
</div>
</div>
</div>
</main>
<footer class="footer">
<span>skilled</span>
Get Started
</footer>
</body>
//CSS
:root{
--Scampi:hsl(234, 25%, 52%);
--Bunting:hsl(233,54%,16%);
--waterloo: hsl(232,10%,56%);
--Violet-Red: hsl(341,92%,62%);
--carnation-pink: hsl(341,100%,83%);
--white:#ffffff;
--roseGrad: linear-gradient(0deg, rgba(240,42,166,1) 0%, rgba(255,111,72,1) 100%);
--DodgerGrad: linear-gradient(180deg, rgba(72,81,255,1) 0%, rgba(240,42,166,1) 100%);
}
html{
background: linear-gradient(180deg, rgba(255,255,255,1) 40%, rgba(240,241,255,1) 100%);
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
line-height: 1.2;
font-family: 'Plus Jakarta Sans', sans-serif;;
width: 100%;
margin: 0;
}
body > *{
margin-bottom: 0.9rem;
padding: 0rem 0.7rem;
}
img{
max-width: 100%;
}
a{
text-decoration: none;
color: var(--white);
}
.btn{
padding: 0.9rem 1.5rem;
border-radius: 1.5rem;
border: 0;
display: inline-block;
font-family: 'Plus Jakarta Sans', sans-serif;;
font-size: 1.2rem;
}
.nav-btn{
background-color: var(--Bunting);
}
.hero-btn{
background: var(--roseGrad);
color: var(--white);
}
.main-btn{
color: var(--Violet-Red);
background-color: transparent;
}
.footer-btn{
background: var(--DodgerGrad);
color: white;
}
.nav{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.5rem;
}
.nav-item{
font-size: 1.5rem;
font-weight:700 ;
color: var(--Bunting);
}
.hero{
padding: 1rem 0.7rem;
}
.hero-header{
font-size: 2.3rem;
color: var(--Bunting);
}
.hero-txt{
color: var(--waterloo);
font-size: 0.95rem;
line-height: 1.7;
text-align: left;
}
.img-container{
margin-top: 1.5em;
}
.courses{
line-height: 1.7;
}
.courses-header{
color: white;
background: var(--roseGrad);
padding: 2rem;
border-radius: 0.5rem;
}
.main-btn{
padding: 0;
font-weight: 600;
}
.course-desc{
background: var(--white);
position: relative;
margin: 2.8rem 0;
padding: 1rem;
border-radius: 0.5rem;
}
.course-desc > p{
color: var(--waterloo);
}
.icons{
position: absolute;
top: -10%;
}
.footer{
background: var(--Bunting);
color: white;
margin: 0;
margin-top: 5rem;
padding: 2.4rem 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 7rem;
}
.footer > span{
font-size: 1.7rem;
font-weight: bold;
}
.tablet{
display: none;
}
.btn:hover{
opacity: 0.4;
}
.courses, .hero, nav{
width: min(95%, 80vw);
margin: 0 auto;
}
#media(min-width:700px) {
nav{
padding: 1.4rem;
}
.hero{
display: flex;
gap: 1.5rem;
padding:0 1.4rem;
margin-top: 1.5rem;
position: relative;
}
.hero-container{
margin-top: 10.5rem;
height: 50%;
}
.mobile{
display: none;
}
.hero-container{
flex-grow: 2;
}
///This is the container for the image
.img-container{
transform: scale(1.5);
position: relative;
left: 10rem;
/// THIS IS THE IMAGE DECLARATION
}
.tablet{
display: inline-block;
transform: scale(4rem);
}
main{
margin-top: 3.5rem;
}
.courses{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.courses, .hero, nav{
width: 80%;
max-width:950PX;
margin: 0 auto;
}
.course-desc{
padding:min(1.4rem,1.7rem) ;
display: flex;
flex-direction: column;
/* width: 400px; */
font-size: min(1rem, 2rem);
}
.courses-header{
margin-Bottom:3rem;
}
.course-desc > p{
height: 30%;
margin: 0;
margin-bottom: 2.5rem;
}
.main-btn{
text-align: left;
}
.footer{
justify-content: space-between;
}
.footer > *{
margin: 0 1rem;
}
}
#media(min-width:1400px){
.courses{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(2,400px);
gap: 1rem;
padding: 1.5rem;
}
main, .hero, nav {
width: 95%;
margin: 0 auto;
}
.course-desc{
padding:1.5rem 1rem
}
.main-btn{
margin-bottom: 2.5rem;
}
.hero, nav{
width: 75%;
}
.courses{
width: 2000px
}
}
You can try having both the images in the same parent, give position relative to parent and then position absolute to the image which you want on the right side. And then write css for that image to have bottom and left properties to shift it towards right and top. Note that this common parent should not contain anything else except these two images.
For a few days I am trying to eliminate the horizontal scroll on the website, but I am unable to do so. Here is the codepen for it: https://codepen.io/170mayank/pen/gOXExag
This is a simple website code made of basic HTML & CSS and only has two sections. I am making it mobile-first, but the problem is in all screen sizes. Sorry for the bad code, I am a total beginner to web dev. I also haven't uploaded the images, as they don't matter.
I have tried my best to solve the issue but was unsuccessful at it :(. Your help would be highly appreciated.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
line-height: 1.25;
}
body{
font-family: gimlet-text, serif;
font-size: 16px;
font-weight: 400;
color: #344559;
min-height: 100vh;
width: 100vw;
}
/* Hero Section */
.sec1{
background-color: #F7F6F4;
}
.sec1__wrap{
display: flex;
flex-direction: column;
margin: 0 15px;
padding: 50px 0;
}
.sec1__wrap__img{
height: 250px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec1__wrap__h1{
font-size: 48.83px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 25px 0 15px 0;
}
.sec1__wrap__p{
margin-bottom: 20px;
}
.sec1__wrap__wrap{
display: flex;
gap: 20px;
align-items: center;
}
.sec1__wrap__wrap__btn1{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #F9826A;
padding: 10px 20px;
}
.sec1__wrap__wrap__btn1__text{
font-size: 12.8px;
color: #F7F6F4;
font-weight: 500;
}
/* .sec1__wrap__wrap__btn1__img{
} */
.sec1__wrap__wrap__btn2{
font-size: 12.8px;
color: #F9826A;
text-decoration: underline;
font-weight: 500;
}
/* Section Separator */
.separator{
width: 100vw;
height: 1px;
background-color: #D5D5D5;
}
/* Website Section 2: Services */
.sec2{
background-color: #F7F6F4;
}
.sec2__wrap{
display: flex;
flex-direction: column;
padding: 40px 15px;
}
.sec2__wrap__box-wrap{
background-color: #fff;
border-radius: 20px 20px 0 20px;
overflow: hidden;
/* display: flex;
flex-direction: column; */
}
.sec2__wrap__box-wrap__img{
height: 200px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec2__wrap__box-wrap__h3{
font-size: 31.25px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 20px 0 10px 0;
}
.sec2__wrap__box-wrap__dash{
width: 100px;
height: 3px;
background-color: #F9826A;
margin-bottom: 15px;
}
.sec2__wrap__box-wrap__p{
margin-bottom: 30px;
}
.sec2__wrap__box-wrap__btn-wrap{
background-color: #F9826A;
gap: 10px;
}
.sec2__wrap__box-wrap__btn-wrap__p{
color: #fff;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/btg4pzb.css">
</head>
<body>
<section class="sec1">
<div class="sec1__wrap">
<img src="/Images/1. Home/hero.jpg" class="sec1__wrap__img">
<h1 class="sec1__wrap__h1">The Best Freight Solution Company</h1>
<p class="sec1__wrap__p">We provide the most specialized and helpful experience by removing hassle associated with your transportation needs.</p>
<div class="sec1__wrap__wrap">
<a href="#"><div class="sec1__wrap__wrap__btn1">
<p class="sec1__wrap__wrap__btn1__text">Contact Us Today!</p>
<img src="/Images/1. Home/hero mail.svg" class="sec1__wrap__wrap__btn1__img">
</div></a>
<div class="sec1__wrap__wrap__btn2">Apply for job</div>
</div>
</div>
</section>
<div class="separator"></div>
<section class="sec2">
<div class="sec2__wrap">
<div class="sec2__wrap__box-wrap box1">
<img class="sec2__wrap__box-wrap__img" src="/Images/1. Home/image1.jpg">
<h3 class="sec2__wrap__box-wrap__h3">Freight Transportation</h3>
<div class="sec2__wrap__box-wrap__dash"></div>
<p class="sec2__wrap__box-wrap__p">Our company specializes in delivery across multi road transportation platform while providing most competitive rates in the industry.</p>
<div class="sec2__wrap__box-wrap__btn-wrap">
<a href="#">
<p class="sec2__wrap__box-wrap__btn-wrap__p">Request a Quote</p>
</a>
<a href="#">
<img class="sec2__wrap__box-wrap__btn-wrap__img" src="/Images/1. Home/arrow1.svg">
</a>
</div>
</div>
</div>
</section>
</body>
</html>
You can use overflow css property.
Give.
overflow:'hidden'
In you css file on body it will eliminate scroll
You can read documentation of mozilla
EDIT.overflow-x: hidden; its work fore me
EDIT2
.separator {
width: 100%;
height: 1px;
background-color: #D5D5D5;
}
instead of width 100vw here give 100%
So, the problem is that you use width: 100vw; for body and .seperator class. Just change them as width: 100%;.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
line-height: 1.25;
}
body{
font-family: gimlet-text, serif;
font-size: 16px;
font-weight: 400;
color: #344559;
min-height: 100vh;
width: 100%;
}
/* Hero Section */
.sec1{
background-color: #F7F6F4;
}
.sec1__wrap{
display: flex;
flex-direction: column;
margin: 0 15px;
padding: 50px 0;
}
.sec1__wrap__img{
height: 250px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec1__wrap__h1{
font-size: 48.83px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 25px 0 15px 0;
}
.sec1__wrap__p{
margin-bottom: 20px;
}
.sec1__wrap__wrap{
display: flex;
gap: 20px;
align-items: center;
}
.sec1__wrap__wrap__btn1{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #F9826A;
padding: 10px 20px;
}
.sec1__wrap__wrap__btn1__text{
font-size: 12.8px;
color: #F7F6F4;
font-weight: 500;
}
/* .sec1__wrap__wrap__btn1__img{
} */
.sec1__wrap__wrap__btn2{
font-size: 12.8px;
color: #F9826A;
text-decoration: underline;
font-weight: 500;
}
/* Section Separator */
.separator{
width: 100%;
height: 1px;
background-color: #D5D5D5;
}
/* Website Section 2: Services */
.sec2{
background-color: #F7F6F4;
}
.sec2__wrap{
display: flex;
flex-direction: column;
padding: 40px 15px;
}
.sec2__wrap__box-wrap{
background-color: #fff;
border-radius: 20px 20px 0 20px;
overflow: hidden;
/* display: flex;
flex-direction: column; */
}
.sec2__wrap__box-wrap__img{
height: 200px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec2__wrap__box-wrap__h3{
font-size: 31.25px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 20px 0 10px 0;
}
.sec2__wrap__box-wrap__dash{
width: 100px;
height: 3px;
background-color: #F9826A;
margin-bottom: 15px;
}
.sec2__wrap__box-wrap__p{
margin-bottom: 30px;
}
.sec2__wrap__box-wrap__btn-wrap{
background-color: #F9826A;
gap: 10px;
}
.sec2__wrap__box-wrap__btn-wrap__p{
color: #fff;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/btg4pzb.css">
</head>
<body>
<section class="sec1">
<div class="sec1__wrap">
<img src="/Images/1. Home/hero.jpg" class="sec1__wrap__img">
<h1 class="sec1__wrap__h1">The Best Freight Solution Company</h1>
<p class="sec1__wrap__p">We provide the most specialized and helpful experience by removing hassle associated with your transportation needs.</p>
<div class="sec1__wrap__wrap">
<a href="#"><div class="sec1__wrap__wrap__btn1">
<p class="sec1__wrap__wrap__btn1__text">Contact Us Today!</p>
<img src="/Images/1. Home/hero mail.svg" class="sec1__wrap__wrap__btn1__img">
</div></a>
<div class="sec1__wrap__wrap__btn2">Apply for job</div>
</div>
</div>
</section>
<div class="separator"></div>
<section class="sec2">
<div class="sec2__wrap">
<div class="sec2__wrap__box-wrap box1">
<img class="sec2__wrap__box-wrap__img" src="/Images/1. Home/image1.jpg">
<h3 class="sec2__wrap__box-wrap__h3">Freight Transportation</h3>
<div class="sec2__wrap__box-wrap__dash"></div>
<p class="sec2__wrap__box-wrap__p">Our company specializes in delivery across multi road transportation platform while providing most competitive rates in the industry.</p>
<div class="sec2__wrap__box-wrap__btn-wrap">
<a href="#">
<p class="sec2__wrap__box-wrap__btn-wrap__p">Request a Quote</p>
</a>
<a href="#">
<img class="sec2__wrap__box-wrap__btn-wrap__img" src="/Images/1. Home/arrow1.svg">
</a>
</div>
</div>
</div>
</section>
</body>
</html>
How can I set the height of intro section to 100%? The height of the main is set to 100 viewport height (8rem is the height of header and 7.2rem is for the footer) but the intro section does not cover the height of the main. I've also tried to set the height of intro section to 100% but it didn't work.
'use strict';
const year = document.querySelector('.footer__year');
year.textContent = new Date().getFullYear();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.main {
width: 100%;
min-height: calc(100vh - 8rem - 7.2rem);
}
.heading__primary {
font-size: 5.2rem;
font-weight: 700;
line-height: 1.2;
color: #fff;
position: relative;
}
.header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 8rem;
padding: 0 5.6rem;
position: relative;
top: 0;
width: 100%;
z-index: 10;
}
.header__nav {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
z-index: 11;
}
.header__logo span {
color: #000;
font-size: 2rem;
font-weight: 600;
}
.header__menu {
align-items: stretch;
}
.header__menu-list {
list-style: none;
display: flex;
align-items: center;
gap: 3.2rem;
}
.header__menu-item {
position: relative;
}
.header__menu-btn {
display: flex;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
font-family: inherit;
font-weight: inherit;
}
.header__menu-icon {
width: 2.4rem;
height: 2.4rem;
fill: royalblue;
}
.header__menu-icon:not(:last-child) {
margin-right: 0.8rem;
}
.header__menu-name {
font-size: 1.4rem;
font-weight: 500;
color: var(--color-grey-light);
text-transform: uppercase;
transition: var(--transition);
letter-spacing: 0.03rem;
}
.header__menu-name:hover {
color: royalblue;
}
.intro {
height: 100%;
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
background-size: cover;
background-position: center;
}
.intro__content {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.intro__text {
max-width: 60rem;
font-size: 1.8rem;
color: #fff;
line-height: 1.8;
}
.intro__btn-search {
cursor: pointer;
width: 55%;
padding: 1.2rem;
display: flex;
align-items: center;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 0.5rem;
}
.intro__btn-icon {
width: 2.4rem;
height: 2.4rem;
fill: #fff;
transition: all 300ms ease-in-out;
}
.footer {
background-color: #f9f7f6;
padding: 3.6rem 0;
width: 100%;
height: 5rem;
}
.footer __description {
font-size: 1.4rem;
}
.t-center {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TRY</title>
</head>
<body>
<header class="header">
<nav class="header__nav">
<div class="header__logo">
<span>Random</span>
</div>
<div class="header__menu">
<ul class="header__menu-list">
<li class="header__menu-item">
<button class="header__menu-btn btn__search">
<span class="header__menu-name">Search</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-add">
<span class="header__menu-name">Add Recipe</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-bookmark">
<span class="header__menu-name">Bookmarks</span>
</button>
</li>
<li class="header__menu-item">
</li>
</ul>
</div>
</nav>
</header>
<main class="main">
<section class="intro">
<div class="intro__content container">
<h1 class="heading__primary u-mb-xs t-center">Lorem ipsum dolor?</h1>
<p class="intro__text t-center u-mb-lg">
Discover recipes, cooks and how-to's based on the food you
love.
</p>
<button class="intro__btn-search btn__search">
Search
</button>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p class="footer__description t-center">
© <span class="footer__year"></span> Try — Built by:
DevJan
</p>
</div>
</footer>
</body>
</html>
Change min-height: calc(100vh - 8rem - 7.2rem) to height: calc(100vh - 8rem - 7.2rem)
There are also a couple other options like adding min-height: inherit to your .intro class or adding something like height: 0.001px to your .main class.
Taken from here: Child inside parent with min-height: 100% not inheriting height
min-height
If the content is smaller than the minimum height, the minimum height
will be applied.
If the content is larger than the minimum height, the min-height
property has no effect.
Aside from your min-height you should add a height to your main class. Also it would be better in your example's case to have a static min-height as it would prevent it from ruining your layout as using vh would always follow viewport's height no matter how short/small it is.
'use strict';
const year = document.querySelector('.footer__year');
year.textContent = new Date().getFullYear();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.main {
width: 100%;
min-height: 600px;
height: calc(100vh - 8rem - 7.2rem);
}
.heading__primary {
font-size: 5.2rem;
font-weight: 700;
line-height: 1.2;
color: #fff;
position: relative;
}
.header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 8rem;
padding: 0 5.6rem;
position: relative;
top: 0;
width: 100%;
z-index: 10;
}
.header__nav {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
z-index: 11;
}
.header__logo span {
color: #000;
font-size: 2rem;
font-weight: 600;
}
.header__menu {
align-items: stretch;
}
.header__menu-list {
list-style: none;
display: flex;
align-items: center;
gap: 3.2rem;
}
.header__menu-item {
position: relative;
}
.header__menu-btn {
display: flex;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
font-family: inherit;
font-weight: inherit;
}
.header__menu-icon {
width: 2.4rem;
height: 2.4rem;
fill: royalblue;
}
.header__menu-icon:not(:last-child) {
margin-right: 0.8rem;
}
.header__menu-name {
font-size: 1.4rem;
font-weight: 500;
color: var(--color-grey-light);
text-transform: uppercase;
transition: var(--transition);
letter-spacing: 0.03rem;
}
.header__menu-name:hover {
color: royalblue;
}
.intro {
height: 100%;
background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
background-size: cover;
background-position: center;
}
.intro__content {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.intro__text {
max-width: 60rem;
font-size: 1.8rem;
color: #fff;
line-height: 1.8;
}
.intro__btn-search {
cursor: pointer;
width: 55%;
padding: 1.2rem;
display: flex;
align-items: center;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 0.5rem;
}
.intro__btn-icon {
width: 2.4rem;
height: 2.4rem;
fill: #fff;
transition: all 300ms ease-in-out;
}
.footer {
background-color: #f9f7f6;
padding: 3.6rem 0;
width: 100%;
height: 5rem;
}
.footer __description {
font-size: 1.4rem;
}
.t-center {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TRY</title>
</head>
<body>
<header class="header">
<nav class="header__nav">
<div class="header__logo">
<span>Random</span>
</div>
<div class="header__menu">
<ul class="header__menu-list">
<li class="header__menu-item">
<button class="header__menu-btn btn__search">
<span class="header__menu-name">Search</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-add">
<span class="header__menu-name">Add Recipe</span>
</button>
</li>
<li class="header__menu-item">
<button class="header__menu-btn header__menu-bookmark">
<span class="header__menu-name">Bookmarks</span>
</button>
</li>
<li class="header__menu-item">
</li>
</ul>
</div>
</nav>
</header>
<main class="main">
<section class="intro">
<div class="intro__content container">
<h1 class="heading__primary u-mb-xs t-center">Lorem ipsum dolor?</h1>
<p class="intro__text t-center u-mb-lg">
Discover recipes, cooks and how-to's based on the food you
love.
</p>
<button class="intro__btn-search btn__search">
Search
</button>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p class="footer__description t-center">
© <span class="footer__year"></span> Try — Built by:
DevJan
</p>
</div>
</footer>
</body>
</html>
I created a footer that I would like to reproduce on my site, after many tests here is the best result obtained:
The image of the footer I would like to make : https://i.imgur.com/QpmoreU.png
How can I match the image on my site please? I have tried so many things that I don't even understand what I'm doing so if you have any explanations and help I'd be delighted...
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login {
display: flex;
justify-content: end;
flex-direction: row-reverse;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.invite_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
<div class="login">
Login<i class="fas fa-sign-in-alt"></i>
</div>
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
<div class='container'>
Invite
Support
</div>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
I just add a new class as .links and fix your Products Resources and Business you can check it, and change a little bit about right bottom edge text, give footer relative and text to absoulte right:0 bottom : 0 and make text smaller. Hope helps.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: flex;
height: 20%;
background-color: black;
color: white;
padding-top:3em;
position:relative;
justify-content:space-between;
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
.links{
display:flex;
flex-direction:column;
justify-content:space-between;
height:50%;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
padding-bottom:2rem;
width:40%;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.right-side{
width:60%;
display:flex;
}
.right-side div{
margin-right:2em;
}
.right-side div b{
display:inline-block;
padding-bottom:1em;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 0.7em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
position:absolute;
bottom:0;
left:1em;
cursor: pointer;
}
.design {
grid-area: design;
position:absolute;
right:0;
bottom:0;
font-size: 1em;
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<div class="right-side">
<div>
<b>Product</b>
<ul class="links">
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
</div>
<div>
<b>Resources</b>
<ul class="links">
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
</div>
<div>
<b>Business</b>
<ul class="links">
<li>Contact</li>
</ul>
</div>
</div>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
How about trying this one? I have kept the codes relevant to the footer part only.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr 1fr 1fr 1.3fr;
grid-template-areas: "logo product resources business" "social . . design";
align-items: flex-start;
}
#footer ul {
margin-top: .5rem;
}
#footer ul li {
list-style: none;
padding-top: 5%;
font-size: 1rem;
line-height: 1px;
margin-top: 10px;
}
.flex {
display: flex;
justify-content: end;
}
#footer ul li a {
color: rgb(22, 145, 176);
text-decoration: none;
font-size: .7rem;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: .65em;
color: rgb(97, 97, 97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
align-self: end;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div>
<!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
Hope this solves your problem!
HTMl STARTS HERE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght#400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<link rel="stylesheet" href="./css/main.css" />
<title>Fylo | light theme page</title>
</head>
<body>
<header id="header-home">
<div class="container">
<nav class="nav-bar">
<img src="./images/logo.svg" alt="" />
<div class="nav-list">
<ul>
<li>Features</li>
<li>Sing In</li>
<li>Team</li>
</ul>
</div>
</nav>
</div>
</header>
<section id="header-content">
<div class="container">
<div class="main">
<div class="header-content-1">
<h1 class="header-title">
All your files in one secure location accessible anywhere
</h1>
<p class="header-text">
Fylo stores your most important files in one secure location.
Access them wherever you need, share and collaborate with friends,
family, and co-workers.
</p>
<form action="" class="form">
<input
type="email"
name=""
id=""
placeholder="Enter your email"
class="input"
/>
<button class="btn-main">Get Started</button>
</form>
</div>
<div class="header-content-2">
<img src="./images/illustration-1.svg" alt="" />
</div>
</div>
</div>
</section>
<section id="productive">
<div class="container">
<div class="main-2">
<div class="main-context">
<h2 class="header">Stay Productive wherever you are</h2>
<p class="text-1">
Never let location be an issue whn accessing your files. Fylo has
you covered for all your file storage needs
</p>
<p class="text-2">
Securely share your files and folders with friends, family and
colleaues for live collaboration. No email attachment required
</p>
<a href="#" class="link"
>See how fylo works <img src="./images/icon-arrow.svg" alt=""
/></a>
<div class="card">
<img src="./images/icon-quotes.svg" alt="" />
<p class="card-text">
Fylo has improved our team productivity by an rder of magnitude.
Since making the switch our team has become a well-oiled
collaboration machine
</p>
<div class="avatar-info">
<img src="./images/avatar-testimonial.jpg" alt="" />
<div class="avatar-name">
<h4>Kyle Burton</h4>
<p>Founder& & CEO, Huddle</p>
</div>
</div>
</div>
</div>
<div class="image-container">
<img src="./images/illustration-2.svg" alt="" class="image-two" />
</div>
</div>
</div>`
</section>
</body>
</html>
CSS STARTS HERE
#import "variables";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
// color: #fff;
font-family: "Open sans", sans-serif;
line-height: 1.6;
}
a {
color: $links;
text-decoration: none;
}
// img {
// max-width: %;
// }
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.6;
font-family: "Raleway", sans-serif;
color: $footer;
// text-align: center;
// margin: 10px 0;
}
p {
line-height: 1.6;
font-family: "Raleway", sans-serif;
font-size: 0.95rem;
// text-align: center;
// margin: 10px 0;
// color: ;
}
#import "utilities";
#header-home {
grid-area: header;
// display: grid;
.nav-bar {
display: grid;
grid-template-columns: 1fr 2fr;
// margin-top: 50px;
padding: 2rem 1.5rem;
position: sticky;
// justify-content: space-between;
ul {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: end;
align-items: center;
height: 100%;
margin: 0;
li {
padding: 0 10px;
a {
font-size: 0.9rem;
text-transform: uppercase;
margin-right: 0.75rem;
border-bottom: 2px transparent solid;
padding: 2px 0;
transition: border-color 0.2s;
color: black;
&:hover {
border-color: $footer;
}
&.current {
border-color: $footer;
}
&:last-of-type {
margin-right: 0;
}
}
}
}
img {
max-width: 60%;
}
}
}
#header-content {
margin-top: 90px;
grid-area: section;
// height: 100vh;
.main {
display: grid;
grid-template-columns: 1fr 1fr;
.header-content-1 {
// justify-content: center;
// width: 200px;
grid-column: 1/2;
grid-row: 1/4;
.header-title {
align-self: flex-end;
font-size: 3rem;
// grid-column: 1/2;
}
.header-text {
grid-column: 1/2;
grid-row: 2/3;
// width: 80%;
margin-top: 20px;
// padding: 0 40px;
}
.form {
margin-top: 20px;
grid-column: 1/2;
grid-row: 2/3;
.input {
width: 300px;
padding: 15px;
border-radius: 4px;
border: 1px solid $bg-2;
&:focus {
outline: none;
}
}
}
}
.header-content-2 {
img {
grid-column: 2/3;
grid-row: 1/3;
max-width: 80%;
justify-self: center;
// margin-top: -10%;
align-self: center;
}
}
}
}
#productive {
// margin-top: 200px;
// // background-color: $bg-2;
// position: relative;
background-image: url(../dist/images/logo.svg);
background-color: hsl(240, 75%, 98%);
margin-top: 100px;
// position: relative;
padding: 50px 0;
// grid-area: section;
}
Image background on the #productive section. i have tried a number of things and it is not responding.
You will probably need to specify the background width and position. Here is an example:
div {
width: 100px;
height: 100px;
background-image: url(https://images7.memedroid.com/images/UPLOADED891/5c39cdc9b5921.jpeg);
background-size: 100px;
background-position: center;
}
<div>
</div>