Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added responsive tags for index.css

Browse source
This commit is contained in:
Yohan Boujon 2023-06-24 10:04:41 +02:00
parent 115e045dbe
commit 5f245745f6
3 changed files with 171 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

229
css/index.css
View file

@ -3,24 +3,172 @@
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;
@media screen and (min-width: 700px) {
.presentation {
overflow: hidden;
width: 100%;
height: 30rem;
display: flex;
background-image: url("../assets/cabinet-avocats-900x601.jpeg");
background-position-y: 50%;
background-size: cover;
position: relative;
}
.presentation-text {
width: 100%;
margin: 1rem;
padding: 0 0 0 2rem;
z-index: 1;
font-size: larger;
color: var(--color-dark);
position: relative;
top: 45%;
}
.photosaoul {
max-width: inherit;
height: inherit;
float: right;
display: none;
margin-top: auto;
}
.description {
background-color: var(--color-main-light);
width: 100%;
height: auto;
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;
}
.description-text {
font-family: 'Josefin Sans', sans-serif;
color: black;
width: 100%;
margin: 2rem 2rem;
word-wrap: break-word;
text-align: justify;
}
.description-img {
width: 100%;
height: auto;
margin: 0 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.billboard {
max-width: 30rem;
height: auto;
float: right;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.profilepic {
max-width: 20rem;
height: auto;
margin: 1.5rem 0;
float: right;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.description-btn a{
margin: 1rem;
font-size: medium;
text-align: center;
}
}
.presentation-text {
width: 100%;
margin: 14rem 2rem;
padding: 0 0 0 2rem;
z-index: 1;
font-size: larger;
color: var(--color-dark);
@media screen and (max-width: 700px) {
.presentation-text {
width: 100%;
padding: 0 0 0 2rem;
z-index: 1;
font-size: small;
color: var(--color-dark);
position: relative;
top: 45%;
}
.photosaoul {
max-width: inherit;
height: 50%;
float: right;
display: none;
margin-top: 15rem;
}
}
@media screen and (max-width: 1000px) {
.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;
}
.description {
background-color: var(--color-main-light);
width: 100%;
height: auto;
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;
flex-direction: column;
overflow: clip;
}
.description-text {
font-family: 'Josefin Sans', sans-serif;
color: black;
width: 100%;
margin: 2rem 2rem;
padding-right: 4rem;
word-wrap: break-word;
text-align: justify;
}
.description-img {
width: 100%;
height: auto;
margin: 0 2rem;
padding-right: 4rem;
display: flex;
justify-content: center;
align-items: center;
}
.billboard {
max-width: 20rem;
height: auto;
float: right;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
padding-bottom: 2rem;
}
.profilepic {
max-width: 15rem;
height: auto;
margin: 1.5rem 0;
float: right;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.description-btn a{
margin: 1rem;
font-size: small;
text-align: center;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
}
.presentation-img {
@ -29,14 +177,6 @@
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);
@ -45,48 +185,11 @@
position: absolute;
}
.description {
background-color: var(--color-main-light);
width: 100%;
height: auto;
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;
}
.description-text {
font-family: 'Josefin Sans', sans-serif;
color: black;
width: 100%;
margin: 2rem 2rem;
word-wrap: break-word;
overflow: clip;
text-align: justify;
}
.description-text em {
color: var(--color-dark);
}
.description-img {
width: 100%;
height: auto;
margin: 0 2rem;
.description-btn {
display: flex;
justify-content: center;
align-items: center;
}
.billboard {
max-width: 30rem;
height: auto;
float: right;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.profilepic {
max-width: 25rem;
height: auto;
float: right;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
flex-direction: row;
}

6
index.html
View file

@ -73,8 +73,10 @@
justice !
</p>
<br>
<a class="btn"href="avocat">En savoir plus</a>
<a class="btn" href="join/contact.html">Me contacter</a>
<div class="description-btn">
<a class="btn" href="avocat">En savoir plus</a>
<a class="btn" href="join/contact.html">Me contacter</a>
</div>
</div>
</div>
<Footer></Footer>

1
js/base.js
View file

@ -113,6 +113,7 @@ function popUpPlacement(className) {
/****************************************/
//Loading the html,js and css of navbar and footer
//During the loading process we need a loading status bar
var headTag = document.getElementsByTagName("head")[0];
window.addEventListener('load', function () {
loadCSS(urlStr + "css/base.css", headTag);