diff --git a/assets/meilleurappelersaoul.jpg b/assets/meilleurappelersaoul.jpg new file mode 100644 index 0000000..b51569d Binary files /dev/null and b/assets/meilleurappelersaoul.jpg differ diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..e4a9f2f --- /dev/null +++ b/css/index.css @@ -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; +} \ No newline at end of file diff --git a/css/saoulbonmonsieur.css b/css/saoulbonmonsieur.css deleted file mode 100644 index eb455ab..0000000 --- a/css/saoulbonmonsieur.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/index.html b/index.html index 1e3562c..b861c44 100644 --- a/index.html +++ b/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"> - + @@ -30,6 +30,41 @@
+
+
+

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.

+ 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.

+
+
+ +
+