Merge branch 'accueil-peaufinage2' into 'main'

ajout carrousel

See merge request !78

public/css/accueil.css

@@ -126,13 +126,78 @@ a{
   display: flex;
   gap:0.5rem;
   align-self: flex-end;
-  margin-right:-20px;
   align-items: center;
-  margin-right: 20px;
+  margin-right: 40px;
 }
 
 /* FIN section presentation */
 
+/*  section oeuvres */
+
+
+.section-Oeuvres{
+  min-height:100vh;
+  padding:50px 50px 50px 50px;
+}
+
+
+.section-Oeuvres h1:nth-child(2){
+  margin-left:50px;
+}
+.container-carrousel{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.carousel {
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  width: 300px;
+  }
+
+  .carousel__images img {
+    width: 300px; 
+    object-fit: cover;
+  }
+
+  
+  .carousel__images {
+  display: flex;
+  transform: translateX(0);
+  transition: transform 0.25s;
+  }
+  
+  .carousel__images img {
+  border-radius: 30px;
+  -webkit-border-radius: 30px;
+}
+  
+  .carousel__button {
+  cursor: pointer;
+  font-size: 2rem;
+  z-index: 1;
+  }
+  
+  .carousel__button.previous {
+  left: 30px;
+  }
+  
+  .carousel__button.next {
+  right: 30px;
+  }
+  
+  .voir-oeuvres{
+    display: flex;
+    gap:0.5rem;
+    align-items: center;
+    position: absolute;
+    right: 20%;
+  }
+
 
 /* FIN section oeuvres */
 

public/css/base.css

@@ -21,6 +21,11 @@ body{
     margin: 0;
 }
 
+h1{
+    font-family: 'Tanker';
+    font-size: 2rem;
+  }
+
 ul{
     list-style: none;
     list-style-type:none;

public/js/base.js

@@ -7,3 +7,5 @@ menuBtn.addEventListener('click', function(){
 	menu.classList.toggle('active');
 })
 
+
+

templates/base.html.twig

@@ -51,8 +51,6 @@
                 <li><a class="nav__link" href="{{ path('app_parcours_index') }}">Nos Parcours</a></li>
                 <li><a class="nav__link" href="{{ path('app_oeuvre_index') }}">Les Oeuvres</a></li>
                 <li><a class="nav__link" href="{{ path('prez') }}">Qui sommes-nous ?</a></li>
-                <li><a class="nav__link" href="{{ path('parcour') }}">Parcour</a></li>
-
             </ul>
         </div>
     </nav>

templates/home.html.twig

@@ -4,30 +4,11 @@
 <link rel="stylesheet" href="{{ asset('css/accueil.css') }}">
 {% endblock %}
 
-{% block main %}
-    {# <h1>{{ titre }}</h1>
-    <section>
-        <div>
-        <!--Mettre le contenu de découvrez nos parcours, mais j'ai aucune idée de comment le faire pour que ce soit responsive oops-->
-        </div>
-    </section>
-    <!-- Qui sommes-nous ? -->
-    <section>
-        <div>
-            <div>
-                <img src="#" alt="img qui sommes nous">
-            </div>
-            <div>
-                <h2>Qui sommes-nous</h2>
-                <p>Nous sommes quelques étudiants fans de Street Art. Nous sommes basés sur Strasbourg, notre ville de cœur. Cette passion, nous vous la partageons à travers de beaux parcours concoctés par nos soins.<br><br>Vous aussi, venez découvrir Strasbourg à travers ses Street Art !</p>
-                <div>
-                    <p>En savoir plus sur nous</p>
-                    <i class="bi bi-arrow-right-circle"></i>
-                </div>
-            </div>
-        </div>
-    </section> #}
+ {% block javascripts %}
+    <script src="{{ asset('js/accueil.js') }}"></script>
+{% endblock %}
 
+{% block main %}
     <section class="section-BigTitle">
     <div class="logo">
         <a href="index.html"><img src="{{ asset('image/logo-noir.png') }}"alt=""></a>
@@ -86,4 +67,32 @@
 
 </section>
 
+<section class="section-Oeuvres">
+
+    <h1>Quelques</h1>
+    <h1>Oeuvres...</h1>
+
+    <div class="container-carrousel">
+        <div class="carousel__button previous" id="previous"><i class="bi bi-chevron-left" id="previous"></i></div>
+        <div class="carousel">
+            <div class="carousel__images">
+              <img src="{{ asset('image/parcours1.png') }}" alt=""id="image">
+              <img src="{{ asset('image/parcours2.png') }}" alt="" id="image">
+              <img src="{{ asset('image/parcours3.png') }}" alt="" id="image">
+              <img src="{{ asset('image/parcours1.png') }}" alt="" id="image">
+              <img src="{{ asset('image/parcours2.png') }}" alt="" id="image">
+            </div>
+          </div>
+          <div class="carousel__button next" id="next"><i class="bi bi-chevron-right" id="next"></i></div>
+    
+    </div>
+
+      <div class="voir-oeuvres">
+        <div><a href="">Toutes les oeuvres</a></div>
+        <div class="arrow"><a href=""><i class="bi bi-arrow-right-circle"></i></a></div>
+    </div>
+
+</section>
+
+
 {% endblock %}
\ No newline at end of file