2023.02.18(Hatalmas_előrehaladás)

assets/css/rendeles.css

@@ -16,6 +16,7 @@ body{
     text-align: center;
     margin-top: 5rem;
     margin-bottom: 4rem;
+    font-size: xx-large;
 }
 
 .label h1 span { 
@@ -29,12 +30,44 @@ body{
 .circle{
     background-color: blue;
     border-radius: 50%;
-    height: 400px;
+    height: 300px;
-    width: 400px;
+    width: 300px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
-    ;
+}
+
+.frame{
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr 1fr;
+}
+
+.left_div{
+    padding: 2rem;
+    padding-right: 1rem;
+}
+
+.right_div{
+    padding: 2rem;
+    padding-left: 1rem;
+}
+
+.option_label{
+    margin-bottom: 1rem;
+}
+
+.plus_next_btn{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.option_slecter{
+    margin-bottom: 1rem;
+}
+
+.selector_width{
+    width: 200px;
 }
 
 @media screen and (max-width: 500px){

assets/html/rendeles.html

@@ -5,6 +5,11 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+        crossorigin="anonymous"></script>
     <link rel="stylesheet" href="../css/rendeles.css">
     <title>Csuma Lángos</title>
 </head>
@@ -15,28 +20,47 @@
     </div>
     <div class="main_box">
         <div class="circle"></div>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque illum dolorem quod
+        <div class="frame">
-        repellat aut nostrum quam quos omnis earum aspernatur. Porro amet, veniam excepturi quia recusandae numquam
+            <div class="left_div">
-        facere aut hic rerum ullam, nam unde atque! Molestias aspernatur, laudantium incidunt voluptatem labore tenetur.
+                <div class="option_slecter">
-        Animi illum expedita impedit adipisci odio alias? Blanditiis corporis maiores omnis voluptatem eaque ut itaque
+                    <h2 class="option_label">Lángos fajták</h2>
-        saepe quae officiis. Velit similique aut quia nostrum aspernatur cum tempora quaerat, voluptates voluptatibus
+                    <select class="form-select selector_width" aria-label="Default select example">
-        Reprehenderit labore voluptates totam dolorum inventore ratione quisquam nulla eum voluptate error numquam
+                        <option selected>Sima</option>
-        assumenda sint tempore, exercitationem quia natus placeat enim, qui possimus cum, nemo officia at minus. Debitis
+                        <option value="1">Tejfölös</option>
-        maiores omnis iusto ipsum explicabo enim sunt totam quibusdam, voluptate dicta laborum reprehenderit hic
+                        <option value="2">Sajtos-Tejfölös</option>
-        accusamus cum, minus qui aliquid quisquam ea itaque recusandae. Amet a non magnam architecto culpa sequi,
+                        <option value="3">Sonkás</option>
-        consectetur distinctio doloremque modi illum debitis labore aperiam deleniti nam, nisi accusamus, pariatur dolor
+                        <option value="3">Sonkás-Kukoricás</option>
-        reprehenderit assumenda ipsam aliquid voluptatem ea accusantium. Ducimus corporis culpa tempore, saepe aliquam
+                        <option value="3">Gyroszos</option>
-        dignissimos recusandae maxime id accusantium nisi libero quis doloremque vel eveniet quasi deleniti
+                    </select>
-        reprehenderit, nesciunt quaerat earum ipsum at quos. Earum reiciendis possimus atque corrupti veritatis? Animi
+                </div>
-        quia quae laborum ratione iusto tenetur, labore autem voluptatem eligendi! Eaque aspernatur assumenda quibusdam
+                <div class="plus_next_btn">
-        ipsam nam consequatur a repellendus cumque libero, nihil quisquam corporis placeat quia. Dolore tempore nihil
+                    <div class="plus">
-        labore officiis quas vero, sunt repellat ad velit culpa earum eius voluptatum recusandae harum suscipit sit ipsa
+                        <div class="form-check">
-        nostrum omnis accusamus iusto est voluptatibus nisi tempora dolorem. Sequi, tempora repellat! Quod nisi harum
+                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
-        omnis id, distinctio blanditiis necessitatibus iure minus et quas sunt saepe doloremque tempore illo debitis sit
+                            <label class="form-check-label" for="flexCheckDefault">
-        voluptatem adipisci a quasi tenetur architecto velit sint! Necessitatibus odio, quasi dolorem, accusantium id
+                                Só
-        soluta, recusandae vel cupiditate magnam deleniti corporis. Reiciendis dolorum eos, porro ipsum hic expedita
+                            </label>
-        voluptas officiis asperiores assumenda facere. Quo fugiat suscipit error itaque ipsa cum, aspernatur vitae
+                        </div>
-        tempore quod ab, in laborum officia! Eum laudantium libero facilis, fuga aliquid perferendis officia?</div>
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
+                            <label class="form-check-label" for="flexCheckChecked">
+                                Fokhagyma
+                            </label>    
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <div class="right_div">
+                <h2 class="option_label">Leírás</h2>
+                <div class="description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta voluptates ut
+                    eveniet neque. Voluptas, numquam! Optio accusamus modi amet tempore nisi assumenda? Nostrum
+                    cupiditate labore officiis ipsum eaque vitae officia? Lorem ipsum, dolor sit amet consectetur
+                    adipisicing elit. Dolores officiis sequi aliquam modi in sint enim illum assumenda deserunt?
+                    Inventore qui impedit maiores eligendi error temporibus dolores voluptas quae doloremque.</div>
+            </div>
+        </div>
+    </div>
 </body>
 
 </html>