Added base for avocat page
This commit is contained in:
parent
8a2e32d550
commit
e6c72e3c8b
5 changed files with 70 additions and 6 deletions
BIN
assets/saoult_bg_arbre_full.jpg
Normal file
BIN
assets/saoult_bg_arbre_full.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
|
|
@ -5,13 +5,27 @@
|
||||||
<title>Avocat | Saoul Bonmonsieur</title>
|
<title>Avocat | Saoul Bonmonsieur</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
|
||||||
|
|
||||||
<script src="../lib/anime.min.js"></script>
|
<script src="../lib/anime.min.js"></script>
|
||||||
<script src="../js/base.js"></script>
|
<script src="../js/base.js"></script>
|
||||||
|
<link href="../css/avocat.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<Navbar></Navbar>
|
<Navbar></Navbar>
|
||||||
|
<div class="avocat">
|
||||||
|
<div class="avocat-text">
|
||||||
|
<h1>Saul Bonmonsieur</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<div class="parcours-text">
|
||||||
|
<h2>Mon Parcours</h2>
|
||||||
|
<br><br>
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
20
css/avocat.css
Normal file
20
css/avocat.css
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
.avocat {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 30rem;
|
||||||
|
display: flex;
|
||||||
|
background-image: url("../assets/saoult_bg_arbre_full.jpg");
|
||||||
|
background-position-y: 50%;
|
||||||
|
background-size: cover;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avocat-text {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 0 0 2rem;
|
||||||
|
z-index: 1;
|
||||||
|
font-size: larger;
|
||||||
|
position: relative;
|
||||||
|
top: 40%;
|
||||||
|
}
|
||||||
39
css/base.css
39
css/base.css
|
|
@ -1,5 +1,10 @@
|
||||||
@import url('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');
|
@import url('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');
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Comic Sans MS';
|
||||||
|
src: url("comic-sans-ms/comici.ttf");
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--color-dark: #2D2424;
|
--color-dark: #2D2424;
|
||||||
--color-main-light: #A55540;
|
--color-main-light: #A55540;
|
||||||
|
|
@ -16,11 +21,13 @@
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
*:any-link{
|
*:any-link {
|
||||||
color: var(--color-light);
|
color: var(--color-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,h2,h3 {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
font-family: "Comic Sans MS", "Comic Sans", cursive;
|
font-family: "Comic Sans MS", "Comic Sans", cursive;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -52,14 +59,14 @@ p {
|
||||||
transition: all .3s ease 0s;
|
transition: all .3s ease 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover{
|
.btn:hover {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-3px);
|
||||||
background-color: var(--color-light);
|
background-color: var(--color-light);
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.black-bg{
|
.black-bg {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -67,4 +74,28 @@ p {
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 700px) {
|
||||||
|
.block {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.block {
|
||||||
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -42,8 +42,7 @@
|
||||||
les cours
|
les cours
|
||||||
de M. Timètres en SVT au lycée Raymond Naves.
|
de M. Timètres en SVT au lycée Raymond Naves.
|
||||||
<br><br>J’intérviens à Toulouse, Ramonville Saint-Agne et <a
|
<br><br>J’intérviens à Toulouse, Ramonville Saint-Agne et <a
|
||||||
href="https://www.google.fr/maps/@39.0198584,125.7532734,16">39.01939978492492,
|
href="https://goo.gl/maps/SAbzNjLLPDPEfkj86">평양 직할시 평양 승리거리</a>
|
||||||
125.75396209686407</a>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="description-img">
|
<div class="description-img">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue