please give me a hand and explain how can I darken on hover all section.The code given below hovers only a section within a section where its written text but I would like all section to be darken.
index:
<section class="promo">
<div class="overlay">
<div class="container-fluid">
<div class="text-center col-md-12">
<h1>TEST</h1>
</div>
</div>
</div>
</section>
css:
.promo {
background-color: rgb(52, 132, 172);
color: white;
font-weight: 700;
line-height: 200%;
text-align: center;
padding: 50px;
}
.promo:hover > .overlay {
width:100%;
height:100%;
background-color:#000;
opacity:0.5;
}
try adding the padding into the overlay section instead.
<section class="promo">
<div class="overlay">
<div class="container-fluid">
<div class="text-center col-md-12">
<h1>TEST</h1>
</div>
</div>
</div>
</section>
Css:
.promo {
background-color: rgb(52, 132, 172);
color: white;
font-weight: 700;
line-height: 200%;
text-align: center;
}
.promo > .overlay {
padding: 50px;
}
.promo:hover > .overlay {
background-color:#000;
opacity:0.5;
}
codepen
Related
I don't know why my H1 is interfering with navbar in mobile version. When I scroll down my navbar in mobile version, H1 interfering to the navbar and I can't fix this issue. How can I change my code, that it works ?
Image in mobile version is here: https://i.stack.imgur.com/SJ3vi.jpg
Code below:
.banner {
background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
height: 800px;
background-position: center center;
background-size: 100%;
}
.content {
top: 25%;
left: 5%;
position: absolute;
}
.content h1 {
color: black;
font-size: 3em;
font-weight: bold;
}
.content a {
text-decoration: none;
background-color: var(--primary-color);
color: #fff;
padding: 15px 40px;
border-radius: 5px;
}
.content a:hover {
background-color: #64cff7;
color: #fff;
}
.stepBox {
background-color: #64cff7;
padding: 20px 20px;
border-radius: 5px;
text-align: center;
}
.stepBox h1 {
font-size: 30px;
font-weight: bold;
color: black;
}
.stepBox p {
font-size: 20px;
font-style: italic;
color: #fff;
}
.highlight {
color: var(--primary-color);
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
.cakebox {
padding: 10px 5px;
}
.cakebox img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
}
.cakebox h1 {
font-size: 18px;
margin-top: 20px;
font-weight: bold;
}
.viewmorebtn {
text-decoration: none;
background-color: #64cff7;
color: #fff;
padding: 10px 10px;
border-radius: 5px;
font-size: 18px;
}
.viewmorebtn i {
padding-left: 5px;
}
#media screen and (max-width:600px) {
.banner {
height: 600px;
}
}
<div class="banner">
<div class="content">
<h1 class="mb-5">Čerstvé koláče <br/> priamo k tvojim dverám</h1>
<a routerLink="menu">Objednaj teraz! <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<!-- step -->
<div class="container mt-5 mb-5">
<h1 class="text-center">Ako získať <span class="highlight">čerstvé koláče</span></h1>
<div class="row mt-3">
<!-- one -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>1</h1>
<p>vyberte koláč</p>
</div>
</div>
<!-- two -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>2</h1>
<p>vyplnte podrobnosti</p>
</div>
</div>
<!-- three -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>3</h1>
<p>doručenie vašej objednávky</p>
</div>
</div>
</div>
</div>
<!-- cakebox -->
<div class="container mt-4 mb-4">
<h1 class="text-center">Obľúbené produkty</h1>
<div class="row">
<div class="col-lg-3 mt-3" *ngFor="let ck of cakeData; index as i">
<div class="cakebox" *ngIf="i<=3">
<img src="{{ck.cakeImg}}" />
<h1>{{ck.cakeName}}</h1>
<p>{{ck.cakePrice | currency:'EUR'}}</p>
</div>
</div>
</div>
<a routerLink="menu" class="viewmorebtn">Zobraziť viac<i class="bi bi-arrow-right"></i></a>
</div>
Thank you for your answers!
.content {
top: 25%;
left: 5%;
position: absolute;
}
The container of the h1 is positioned absolutely. The default z-index is causing it to overlap other elements which have a smaller z-index value.
Setting the z-index of the .content div and navbar may help to solve the problem.
.content {
top: 25%;
left: 5%;
position: absolute;
z-index: 10; /** something smaller than the z-index of the navbar **/
}
.navbar {
...
z-index: 20; /** something bigger than the z-index of .content **/
}
I have added 9 cards to the website I'm making and I'm having two issues.
(1) How do I center the 9 cards? As it is more to the left and not centered to the screen.
(2) How do I remove the scroll bar? It seems like the spacing between the top and bottom cards and also below the bottom cards is a lot therefore its moving down and has a scroll bar.
Website Image
<!DOCTYPE html>
<html>
<head>
<title>Discover | Sweeties</title>
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
<style>
.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1001;
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #FFFFFF;
font-family:Calibri;
font-weight:900;
font-size: 25px;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Calibri;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Calibri;
color:#FFFFFF;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Calibri;
color:#fff;
width:375px;
font-size:40px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
</style>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="Videos/beach1.mp4" type="video/mp4">
</video>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Calibri;
}
.main{
margin: 3%;
}
.card{
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title{
text-align: center;
padding: 20px;
}
h1{
font-size: 40px;
}
h2{
font-size: 22px;
}
.des{
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding:10px;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.20);
}
.card:hover img {
transform: scale(1);
}
</style>
<body>
<div class="main">
<div class="card">
<div class="image">
<img src="Images/rakiraki.jpg">
</div>
<div class="title">
<h1>
Rakiraki</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Lautoka.jpg">
</div>
<div class="title">
<h1>
Lautoka</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/nadi.jpg">
</div>
<div class="title">
<h1>
Nadi </h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/sigatoka.jpg">
</div>
<div class="title">
<h1>
Sigatoka</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2 >
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/ph.jpg">
</div>
<div class="title">
<h1>
Pacific Harbour</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/suva.jpg">
</div>
<div class="title">
<h1>
Suva</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Labasa.jpg">
</div>
<div class="title">
<h1>
Labasa</h1>
</div>
<div class="des">
<h2> KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/savusavu.jpg">
</div>
<div class="title">
<h1>
Savusavu</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The best approach that I would suggest is flex.
I have added some custom style to yoy existing code just to make it fine in flex.
Here is my additional css added.
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
Your working fiddle.
.navigation {
padding-top: 30px;
padding-bottom: 30px;
/* position: absolute;
top: 0; */
width: 100%;
z-index: 1001;
}
.navbar-right {
float: right;
padding-right: 10%;
}
.navbar-right a {
text-decoration: none;
padding: 10px;
color: #ffffff;
font-family: Calibri;
font-weight: 900;
font-size: 25px;
}
.navbar-right a:hover {
text-decoration: underline;
}
.navbar-logo {
padding-left: 10%;
font-family: Calibri;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#video-bg {
width: 100%;
}
.portfolio-section {
margin-top: 50%;
}
.tagline-left {
float: left;
width: 50%;
text-align: center;
}
.tagline-right {
float: right;
width: 50%;
text-align: center;
}
.tagline-video {
width: 75%;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri;
}
.main {
/* Commented */
/* margin: 3%; */
}
.card {
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img {
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title {
text-align: center;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 22px;
}
.des {
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding: 10px;
}
button:hover {
background-color: black;
color: white;
transition: 0.5s;
cursor: pointer;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.2);
}
.card:hover img {
transform: scale(1);
}
/* Custom styles */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
body {
background: cadetblue;
}
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
</div>
</header>
<div class="background-wrap">
<video
id="video-bg-elem"
preload="auto"
autoplay="true"
loop="loop"
muted="muted"
>
<source src="https://youtu.be/ujKVJcwbpRo" type="video/mp4" />
</video>
</div>
<div class="main">
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Rakiraki
</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button
onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'"
>
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Lautoka
</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Nadi
</h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Sigatoka
</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Pacific Harbour
</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Suva
</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Labasa
</h1>
</div>
<div class="des">
<h2>KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Savusavu
</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
</div>
So I have a website for which I have the style.css and responsive CSS defined. The CSS works fine on laptop and android's chrome but kinda messes up in safari
The main problem is that the background image in the section, i.e. 1.webp appears perfectly in android and desktop chrome and firefox but fails to do so in safari. Somebody said that since there is no resolution set so that's why the safari is messing up. I would want an expert's opinion. Please help me out
<section class="whatwe" id="register" style="background: url(img/1.webp) no-repeat fixed center center/cover;">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="wedoContent">
<h2 class="lead color_white">Get Your Tickets</h2>
<!--a href="/form/register.html" id="rzp" class="bes_button" target="_blank">Register Now</a-->
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="circle c1 img-circle">
<h4 class="grey">Bennett University</h4>
<br>
<!--span class="icon blue"><i class="fa fa-eur"></i></span-->
<span class="price-large">1249</span>
<!--span class="price-small">90</span-->
<!--button type="button" class="btn btn-info">Choose</button-->
</div>
</div>
<!-- .Col-md-3 ends here -->
<div class="col-md-3">
<div class="circle c2 img-circle">
<h4 class="red">Early Bird</h4>
<br>
<!--span class="icon yellow"><i class="fa fa-eur"></i></span-->
<span class="price-large red">999</span>
<!--span class="price-small">90</span-->
<!--a href="form/early_bird.html" id="rzp" class="bes_button"
target="_blank">Register</a-->
<h4 class="red"> Coming Soon</h4>
<!--button type="button" class="btn btn-warning">Choose</button-->
</div>
</div>
<!-- .Col-md-3 ends here -->
<div class="col-md-3">
<div class="circle c3 img-circle">
<h4 class="grey">Gen Pop</h4>
<br>
<!--span class="icon green"><i class="fa fa-eur"></i></span-->
<span class="price-large grey">1499</span>
<br>
<!--button type="button" class="btn btn-success">Choose</button-->
</div>
</div>
<!-- .Col-md-3 ends here -->
<!--div class="col-md-3">
<div class="circle c4 img-circle">
<h4 class="red">Deluxe Plan</h4>
<span class="icon red"><i class="fa fa-eur"></i></span>
<span class="price-large red">8,</span>
<span class="price-small">90</span>
<p>Great for small Business</p>
<button type="button" class="btn btn-danger">Choose</button>
</div>
</div-->
<!-- .Col-md-3 ends here -->
</div>
<!-- .Container ends here -->
</div>
<!-- .Row ends here -->
</div>
<div class="mouseSlider" style="margin-top:200px;">
<img src="img/mouse.png" alt="">
<img src="img/mouseh.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
And here is the CSS :
.whatwe{
height: -webkit-fill-available;;
}
.wedoContent{
padding-top: 36vh;
}
.wedoContent h5 {
margin-bottom: 39px;
}
.wedoContent h2{
margin-bottom: 29px;
}
#charset "utf-8";
* {
padding:0;
margin:0;
border:0;
}
body {
background: #d5d5d5;
font-family:trebuchet MS;
color:#6B6B6B;
border: 0 none;
margin: 0;
font-size:13px;
padding: 0;
}
#wrapper{
padding: 60px 0px;
margin-left: 50px;
}
.container{}
.row{}
.circle{
background: #ffffff;
padding: 35px;
text-align: center;
height: 80%;
width: 80%;
border: 8px solid #F2F2F2;
transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */
}
.circle h4{
margin: 0;
padding: 0;
}
.circle p{}
.circle span{}
.circle span.icon{
}
.circle span.icon i{
font-size: 48px;
}
.circle span.price-large{
font-size: 68px
}
.price-small{
font-size: 24px
}
.c1:hover{
background: #39b3d7;
color: #ffffff;
}
.c1 .blue{
color: #39b3d7;
}
.c1:hover .blue{
color: #ffffff;
}
.c2:hover{
background: #ed9c28;
color: #ffffff;
}
.c2 .yellow{
color: #ed9c28;
}
.c2:hover .yellow{
color: #ffffff;
}
.c3:hover{
background: #47a447;
color: #ffffff;
}
.c3 .green{
color: #47a447;
}
.c3:hover .green{
color: #ffffff;
}
.c4:hover{
background: #d2322d;
color: #ffffff;
}
.c4 .red{
color: #d2322d;
}
.c4:hover .red{
color: #ffffff;
}
.c1 .grey{
color: #696969;
}
.c1:hover .grey{
color: #ffffff;
}
.c2 .grey{
color: #696969;
}
.c2:hover .grey{
color: #696969;
}
.c3 .grey{
color: #696969;
}
.c3:hover .grey{
color: #696969;
}
.c1 .red{
color: #d2322d;
}
.c1:hover .red{
color: #ffffff;
}
.c2 .red{
color: #d2322d;
}
.c2:hover .red{
color: #ffffff;
}
.c3 .red{
color: #d2322d;
}
.c3:hover .red{
color: #ffffff;
}
.c2:hover{
background: #d2322d;
color: #ffffff;
}
.c1:hover{
background: #696969;
color: #ffffff;
}
.c3:hover{
background: #696969;
color: #ffffff;
}
.c3:hover .grey{
color: #ffffff;
}
.webp format is not supported in Safari Browser, You should load different format for safari using CSS Feature Query:
I'm building the website and I want to reach the section like on my psd (img attached):
You can see that there's 100% width section and .col-md-9 and .col-md-3 inside this section.
But when .col-md-3 ends its background should continue and pave the background of the main section.
How can I make the column's background continue? I've spent hours solving this problem but I didn't find the correct way. Thanks!
.single__content {
width: 100%;
max-width: 743px;
padding-top: 57px;
}
.single__content p {
color: #707070;
font-size: 15px;
font-weight: 400;
line-height: 23px;
}
.single__meta {
background: #3c73ba;
height: 70px;
}
.single__meta h2 {
font-size: 38px;
font-weight: 300;
line-height: 42px;
color: #fff;
margin: 0;
padding-top: 14px;
}
.col-sidebar {
background: #4285db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<div class="single__meta">
<div class="container">
<div class="row ">
<div class="col-md-9">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
</div>
</div>
</div>
You can split the background of your top with background: linear-gradient.
Demo with bootstrap 4
.top-bar {
background: linear-gradient(
to right,
#3c73ba 0%,
#3c73ba 50%,
#4285db 50%,
#4285db 100%
);
width: 100%;
padding: 0;
margin: 0;
color: #fff;
}
.col-left{
background: #3c73ba;
}
.col-right {
background: #4285db;
}
<div class="top-bar" style="padding: 0">
<div class="container">
<div class="row">
<div class="col-left col-md-9">
<h2>left</h2>
</div>
<div class="col-right col-md-3">
<h2>right</h2>
</div>
</div>
</div>
</div>
"make this changes in your code" hope this u want
<div class="row col_bg">
<div class="col-md-9 ">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
<div class="clear">
</div>
</div>
"for css"
.row.col_bg {
background-color: #4285db;
clear: both;
}
.col-md-9 {
float: left;
width: 70%;
}
.single__meta h2 {
color: #000;
font-size: 38px;
font-weight: 300;
line-height: 42px;
margin: 0;
}
.col-sidebar.col-md-3 {
float: right;
width: 30%;
}
.clear {
clear: both;
}
This is how the website should look like:
https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/index.html
However the bottom sections appear next to each other rather than below. Here is the code:
(HTML)
http://pastie.org/10325555
(CSS)
http://pastie.org/10325550
Just a few tweaks! Here's my fiddle
.container {
max-width: 928px;
position: relative;
display: block;
!important
}
h1,
h2,
p,
a {
font-family: 'Helvetica Neue Thin', 'HelveticaNeue-Thin', 'helvetica neue', helvetica, arial, 'lucida grande', sans-serif;
}
h1 {
font-size: 64px;
font-weight: 100;
margin-bottom: 20px;
}
a {
font-size: 18px;
font-weight: 200;
}
.btn:link {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:active {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:hover {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
a:visited {
background-color: rgba(238, 68, 95, 0.9);
color: white;
text-decoration: none;
}
#main {
background: url("https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/intro.jpg") no-repeat center center;
background-size: cover;
height: 550px;
}
.main p {
font-size: 26px;
font-weight: 200;
margin-bottom: 40px;
}
section .row {
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #dbdbdb;
}
.section h2 {
font-size: 50px;
}
.store {
text-align: center;
border-bottom: 0px;
padding-bottom: 0px
}
footer {
position: relative;
display: block!important;
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
}
.footer ul {
list-style-type: none;
padding-left: 0;
}
.footer li {
color: #999;
font-weight: 600;
}
#media (max-width: 500px) {
.col-md-6 img {
padding: 50px;
width: 100%;
}
}
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<body>
<div id="main">
<div class="container">
<h2>Heading</h2>
<p>Paragraph Text</p> <a class="btn" href="#">Download Shutterbug</a>
</div>
</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">
</div>
<div class="col-md-6">
<h2>Heading</h2>
<p>Text Text Text Text Text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
</div>
<div class="col-md-6">
<h2>Heading<h3>
<p>Text Text Text</p>
<div>
</div>
<div class="store">
<div class="container">
<h2>Available for iPhone, iPad, and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
<img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Company</h2>
<ul>
<li>Careers</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-4">
<h2>Products</h2>
<ul>
<li>Shutterbugg</li>
<li>Speakerboxx</li>
</ul>
</div>
<div class="col-md-4">
<h2>News</h2>
<ul>
<li>Blog</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Myspace</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
You need to clean the padding-bottom of your class footer.
.footer {
border-top: 1px solid #dbdbdb;
background-color: #f3f3f3;
padding: 20px 0px 80px;
padding-bottom: 0px;
}
I hope of it helps you.