Hey everyone! I'm working on a small school project website and I've run into an issue with the background on multiple div elements. Here's my HTML code snippet:
<div class="bloc-1-text">
<h3>
</h3>
<p>
</p>
<div class="bloc-1-img"></div>
</div>
</div>
And here is my CSS code:
.promesses{
font-family: 'Dosis', sans-serif;
font-weight: 500;
}
.bloc-1{
border: 1px solid black;
width: 100%;
height: 400px;
}
.bloc-1 .bloc-1-img{
float: left;
width: 50%;
height: 100%
background-image: url(image1.jpg);
position: relative;
}
.bloc-1-text{
float: right;
width: 50%;
height: 100%;
background: #dbdbdb;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.bloc-1-text h3{
text-align: center;
}
This is just a part of the code where the issue occurs. If you have any suggestions or tips, please let me know so I can update it here.
Since yesterday, I've been trying to make progress. Here's the updated HTML code:
`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8">
<title>Parti Nationaliste Québécois</title>
<link rel="stylesheet" type="text/css" href="css/promesse.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="img/Logo.png">
</head>
<body>
<header>
<a href="Index.html" class="logo"> <img src="img/Logo.jpg"></a>
<div class="menu-toggle"></div>
<nav>
<ul>
<li><a href="Index.html">Accueil</a></li>
<li><a href="#" class="active">Intention</a></li>
<li><a href="#">Chefs</a></li>
<li><a href="Histoire.html">Histoire</a></li>
<li><a href="https://www.paypal.me/Mathislaliberte">Don</a></li>
</ul>
</nav>
<div class="clearfix"></div>
</header>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.menu-toggle').toggleClass('active')
$('nav').toggleClass('active')
})
});
</script>
<div class="promesses">
<div class="bloc-1">
<div class="bloc-1-text">
<h3>
Emploi Assuré
</h3>
<p>
Nous avons pour toi un emploi assuré. Que ce soit dans l'armée ou dans une de nos grandes entreprises dans chacunes de nos région, tu n'auras pas de quoi te plaindre que le plaisir
</p>
<div class="bloc-1-img"></div>
</div>
</div>
</div>
And here is the updated CSS code:
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap');
.promesses{
font-family: 'Dosis', sans-serif;
font-weight: 500;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.bloc-1{
border: 1px solid black;
width: 100%;
height: 400px;
}
.bloc-1-img{
width: 50%;
height: 100vh;
background-image: url("img/image1.jpg");
}
.bloc-1-text{
float: right;
width: 50%;
height: 100%;
background: #dbdbdb;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.bloc-1-text h3{
text-align: center;
}