place sliders elements

css/0-general.css

@@ -28,3 +28,8 @@ main section h2 {
 img{
   max-width: 100vw;
 }
+
+
+.credits{
+  margin-top: 10vh;
+}

css/1-2-main_title.css

@@ -1,4 +1,8 @@
-
+/**
+  css JS and html
+  made by B. Lemoine - cipherbliss.com
+  04 2023
+ */
 /******** section 1 *********/
 
 #main_title_container {

css/1-cover.css

@@ -40,11 +40,12 @@
 }
 
 #cover .button {
+  top: 16vh;
+
   box-sizing: border-box;
 
   position: relative;
   right: 0;
-  top: 33vh;
   bottom: 0;
   width: 150px;
   height: 150px;

css/2-we-come-from.css

@@ -11,7 +11,7 @@
 }
 #welcome h2 {
   font-weight: 600;
-  font-size: 10em;
+  font-size: 8em;
   line-height: 90px;
   text-align: center;
   letter-spacing: -0.04em;

css/3-open-sesame.css

@@ -16,7 +16,7 @@
   padding-bottom: 310px;
 
   color: rgba(248, 243, 241, 0.1);
-  height: 50vh;
+  /*height: 72vh;*/
 }
 
 #open .text {
@@ -27,3 +27,7 @@
 #open img{
   max-width: 90vw;
 }
+#open-handle{
+  float:left;
+  height: 20vh;
+}

css/4-content.css

@@ -59,7 +59,6 @@
 #content_first {
 
   opacity: 0;
-  width: 90vw;
   height: 35px;
   margin-bottom: 40px;
   font-style: normal;
@@ -74,6 +73,7 @@
   flex: none;
   order: 0;
   flex-grow: 0;
+  margin-top: 20vh;
 }
 
 #content_second {

css/5-popover.css

@@ -1,4 +1,3 @@
-
 /******** phone base *********/
 
 #popover {
@@ -17,37 +16,39 @@
   /* identical to box height, or 66px */
   letter-spacing: -0.04em;
 }
-.text-grey{
+
+.text-grey {
   font-weight: 400;
   font-size: 18px;
   line-height: 26px;
 }
 
-.slider-screen .text{
+.slider-screen .text {
   position: relative;
   left: 55vw;
   top: -30%;
   width: 400px;
-  text-align:left;
+  text-align: left;
 }
 
-.slider-screen .text-title
-{
-  margin-bottom:2rem;
+.slider-screen .text-title {
+  margin-bottom: 2rem;
 }
-.phone-container{
+
+.phone-container {
   border-radius: 1rem;
   width: 411px;
 }
-.phone-container .top{
+
+.phone-container .top {
   height: 60px;
-  background: url('/img/phone_rectangle_top.jpg') no-repeat  center;
+  background: url('/img/phone_rectangle_top.jpg') no-repeat center;
 
   border-top-right-radius: 1rem;
   border-top-left-radius: 1rem;
 }
 
-.phone-container .bottom{
+.phone-container .bottom {
   height: 62px;
   background: url('/img/phone_rectangle_bottom.jpg') no-repeat center;
   top: 676.5px;
@@ -56,7 +57,7 @@
   border-bottom-left-radius: 2rem;
 }
 
-.phone-container.transparent{
+.phone-container.transparent {
   background: rgba(248, 243, 241, 0.1);
   border-radius: 70px;
   width: 350px;
@@ -66,7 +67,7 @@
 .slider-screen .phone-container {
   height: 776px;
   width: 411px;
-  background: url('/img/phone_cream.png')  no-repeat;
+  background: url('/img/phone_cream.png') no-repeat;
   background-position: center;
   background-size: cover;
   position: relative;
@@ -81,20 +82,38 @@
   float: right;
 }
 
+.arrow-left, .arrow-right {
+  padding: 1.5rem;
+  border: solid 2px #1E33DA;
+  background: linear-gradient(310.41deg, rgba(255, 255, 255, 0.3) 10.9%, rgba(255, 255, 255, 0) 81.35%);
+  backdrop-filter: blur(5px);
+
+  /* Note: backdrop-filter has minimal browser support */
+  border-radius: 70px;
+  transform: matrix(-1, 0, 0, 1, 0, 0);
+  cursor: pointer;
+}
+
 .arrow-right {
   position: relative;
-  right: 40px;
   top: 50vh;
   float: right;
+  transform: rotate(0deg);
 }
+
 .arrow-left {
   position: relative;
   left: 40px;
   top: 50vh;
   float: left;
 }
-.bullets{
+
+.bullets {
   position: relative;
   left: 0;
   top: 30vh;
 }
+
+.bullets img {
+  cursor: pointer;
+}

img/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0L12.57 1.393L20.15 9H0V11H20.15L12.57 18.573L14 20L24 10L14 0Z" fill="#1E33DA"/>
+</svg>

index.html

@@ -193,14 +193,13 @@
   <!--  other section-->
     <section id="popover" class="slider-screen">
       <div class="close-button">
-        <img src="/img/cross_pink.png" alt="fermer">
+        <img src="/img/cross_blue.png" alt="fermer">
       </div>
       <div class="arrow-left">
-        <img src="/img/arrow_left.png" alt="précédent">
+        <img src="/img/arrow.svg" alt="précédent">
       </div>
       <div class="arrow-right">
-        <img src="/img/arrow_right.png" alt="suivant">
-
+        <img src="/img/arrow.svg" alt="suivant">
       </div>
       <div class="phone-container">
         <div class="top">
@@ -230,8 +229,17 @@
       </div>
     </section>
 
-
+  <!--grey bg-->
     <section id="portfolio" class="slider-screen">
+      <div class="close-button">
+        <img src="/img/cross_blue.png" alt="fermer">
+      </div>
+      <div class="arrow-left">
+        <img src="/img/arrow.svg" alt="précédent">
+      </div>
+      <div class="arrow-right">
+        <img src="/img/arrow.svg" alt="suivant">
+      </div>
       <div class="phone-container">
         <div class="top">
         </div>