22:03

assets/css/fooldal.css

@@ -4,26 +4,125 @@
     box-sizing: border-box;
 }
 
-.home-nav{
+body {
+    background-color: #F2EDD7FF;
+}
+
+.home-nav {
     background-color: #A07855FF !important;
 }
 
-.hamb-btn{
+.nav-shadow {
+    box-shadow: 0px 0px 5px 1px #A07855FF;
+}
+
+.fixing2{
+    width: 80%;
+}
+
+.hamb-btn {
     margin-left: auto;
 }
 
-.list-adjust{
+.list-adjust {
     font-size: large;
 }
 
-.logo{
+.logo {
     color: white !important;
     text-decoration: none;
     text-align: left !important;
-}   
+}
 
-@media screen and (max-width: 991px){
-    .list-adjust{
+
+.carousel-caption {
+    bottom: 3rem;
+    z-index: 10;
+}
+
+.fixing1{
+    display: flex;
+    justify-content: center;
+}
+
+.carousel-item {
+    height: 32rem;
+}
+
+.carousel-item>img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    height: 40rem;
+}
+
+
+.marketing .col-lg-4 {
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+
+.marketing h2 {
+    font-weight: 400;
+}
+
+.marketing .col-lg-4 p {
+    margin-right: .75rem;
+    margin-left: .75rem;
+}
+
+
+.featurette-divider {
+    margin: 5rem 0;
+}
+
+
+.featurette-heading {
+    font-weight: 300;
+    line-height: 1;
+    letter-spacing: -.05rem;
+}
+
+.centering {
+    text-align: center;
+}
+
+.small-img{
+    display: none;
+}
+
+.title-sett{
+    background-color: whitesmoke;
+    border-radius: 50px;
+    opacity: 0.9;
+}
+
+.title-hone{
+    color: #656565;
+}
+
+@media (min-width: 40em) {
+
+    .carousel-caption p {
+        margin-bottom: 1.25rem;
+        font-size: 1.25rem;
+        line-height: 1.4;
+    }
+
+    .featurette-heading {
+        font-size: 50px;
+    }
+}
+
+@media (min-width: 62em) {
+    .featurette-heading {
+        margin-top: 7rem;
+    }
+}
+
+@media screen and (max-width: 991px) {
+    .list-adjust {
         text-align: center;
-    } 
+    }
 }

assets/html/fooldal.html

@@ -24,15 +24,11 @@
                 </button>
 
                 <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
-                    <span class="active nav-item list-adjust logo">LaGeDa Pékség</span>
                     <ul class="navbar-nav">
-                        
+
                         <li class="nav-item list-adjust">
                             <a class="nav-link active" href="#">Kezdőlap</a>
                         </li>
-                        <li class="nav-item list-adjust">
-                            <a class="nav-link" href="#">Napi ajánlat</a>
-                        </li>
                         <li class="nav-item list-adjust">
                             <a class="nav-link" href="#">Rendelés</a>
                         </li>
@@ -40,15 +36,65 @@
                             <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown"
                                 aria-expanded="false">Elérhetőségek</a>
                             <ul class="dropdown-menu" aria-labelledby="dropdown08">
-                                <li><a class="dropdown-item" href="#">Facebook <i class="fa-brands fa-facebook"></i></a></li>
-                                <li><a class="dropdown-item" href="#">Instagram <i class="fa-brands fa-instagram"></i></a></li>
-                                <li><a class="dropdown-item" href="#">Something else here</a></li>
+                                <li class="centering"><a class="dropdown-item" href="#"><i
+                                            class="fa-brands fa-facebook"></i> Facebook </a></li>
+                                <li class="centering"><a class="dropdown-item" href="#"><i
+                                            class="fa-brands fa-instagram"></i> Instagram</a></li>
+                                <li class="centering"><a class="dropdown-item" href="#"><i
+                                            class="fa-brands fa-twitter"></i> Twitter</a></li>
                             </ul>
                         </li>
                     </ul>
                 </div>
             </div>
         </nav>
+        <div class="fixing1">
+        <div id="myCarousel" class="carousel slide fixing2" data-bs-ride="carousel">
+            <div class="carousel-indicators">
+                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"
+                    aria-current="true" aria-label="Slide 1"></button>
+                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+            </div>
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img class="option-pictures" src="../img/option1.jpg" alt="option1">
+
+                    <div class="container">
+                        <div class="carousel-caption title-sett">
+                            <h1 class="title-hone">LaGeDa Pékség</h1>
+                        </div>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img src="../img/option2.jpg" alt="option2">
+
+                    <div class="container">
+                        <div class="carousel-caption title-sett">
+                            <h1 class="title-hone">LaGeDa Pékség</h1>
+                        </div>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img src="../img/option3.jpg" alt="option3">
+
+                    <div class="container">
+                        <div class="carousel-caption title-sett">
+                            <h1 class="title-hone">LaGeDa Pékség</h1>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+            </button>
+        </div>
+        </div>
     </div>
     <script src="../js/fooldal.js"></script>
     <script src="../bootstrap/js/bootstrap.min.js"></script>