Added description div with text and img
This commit is contained in:
parent
16294ee25f
commit
90db0d2460
4 changed files with 130 additions and 61 deletions
BIN
assets/meilleurappelersaoul.jpg
Normal file
BIN
assets/meilleurappelersaoul.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
94
css/index.css
Normal file
94
css/index.css
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Comic Sans MS", "Comic Sans", cursive;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
}
|
||||
|
||||
.anim-text {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.presentation {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
background-image: url("../assets/cabinet-avocats-900x601.jpeg");
|
||||
background-position-y: 100%;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.presentation-text {
|
||||
width: 100%;
|
||||
margin: 14rem 2rem;
|
||||
padding: 0 0 0 2rem;
|
||||
z-index: 1;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.presentation-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.photosaoul {
|
||||
max-width: inherit;
|
||||
height: inherit;
|
||||
float: right;
|
||||
display: none;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.whiteband {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(16px);
|
||||
height: 10rem;
|
||||
top: 40%;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.description {
|
||||
background-color: #f97b22;
|
||||
width: 100%;
|
||||
height: 55rem;
|
||||
display: flex;
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.description-text {
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
color: black;
|
||||
width: 100%;
|
||||
margin: 2rem 2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.description-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
max-width: 30rem;
|
||||
height: auto;
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Comic Sans MS", "Comic Sans", cursive;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Josefin Sans', sans-serif;
|
||||
}
|
||||
|
||||
.anim-text {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.presentation {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
background-image: url("../assets/cabinet-avocats-900x601.jpeg");
|
||||
background-position-y: 100%;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.presentation-text{
|
||||
width: 100%;
|
||||
margin: 14rem 2rem;
|
||||
padding: 0 0 0 2rem;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.presentation-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index:10;
|
||||
}
|
||||
|
||||
.photosaoul {
|
||||
max-width: inherit;
|
||||
height: inherit;
|
||||
float: right;
|
||||
display: none;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.whiteband {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(16px);
|
||||
height: 10rem;
|
||||
top: 40%;
|
||||
z-index:0;
|
||||
position: absolute;
|
||||
}
|
||||
37
index.html
37
index.html
|
|
@ -15,7 +15,7 @@
|
|||
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
||||
rel="stylesheet">
|
||||
<link href="css/navbar.css" rel="stylesheet">
|
||||
<link href="css/saoulbonmonsieur.css" rel="stylesheet">
|
||||
<link href="css/index.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -30,6 +30,41 @@
|
|||
</div>
|
||||
<div class="whiteband"></div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="description-text">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore
|
||||
magna aliqua. Sed viverra ipsum nunc aliquet bibendum. Enim ut sem viverra aliquet eget sit amet. Cursus
|
||||
sit
|
||||
amet dictum sit amet justo donec. Volutpat est velit egestas dui id ornare arcu odio. Cras fermentum
|
||||
odio eu
|
||||
feugiat pretium nibh ipsum. Nisl condimentum id venenatis a condimentum. Massa tincidunt dui ut ornare
|
||||
lectus. Lectus mauris ultrices eros in cursus turpis. Lorem mollis aliquam ut porttitor leo a diam
|
||||
sollicitudin tempor. Dictum sit amet justo donec enim diam vulputate. Volutpat consequat mauris nunc
|
||||
congue.
|
||||
Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Risus in hendrerit
|
||||
gravida
|
||||
rutrum quisque. Nunc mi ipsum faucibus vitae aliquet. Lectus nulla at volutpat diam ut. Diam in arcu
|
||||
cursus
|
||||
euismod. Amet volutpat consequat mauris nunc congue.<br><br>
|
||||
Tincidunt augue interdum velit euismod. Cras ornare arcu dui vivamus arcu felis bibendum. In fermentum
|
||||
et
|
||||
sollicitudin ac. Id faucibus nisl tincidunt eget. Non odio euismod lacinia at quis. Quis viverra nibh
|
||||
cras
|
||||
pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Neque volutpat ac tincidunt vitae.
|
||||
Aliquet
|
||||
eget sit amet tellus. Mi proin sed libero enim sed. Enim sed faucibus turpis in eu mi bibendum neque
|
||||
egestas. Interdum posuere lorem ipsum dolor sit amet consectetur. Ipsum consequat nisl vel pretium
|
||||
lectus.
|
||||
Id volutpat lacus laoreet non curabitur gravida arcu. Turpis massa tincidunt dui ut ornare lectus. Sit
|
||||
amet
|
||||
aliquam id diam. Orci a scelerisque purus semper. Amet nisl suscipit adipiscing bibendum est ultricies
|
||||
integer quis.</p>
|
||||
</div>
|
||||
<div class="description-img">
|
||||
<img class="placeholder" src="assets/meilleurappelersaoul.jpg"></img>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue