szerkezet

2022-02-11 14:03:22 +01:00
parent 91e466f948
commit c97d7c42c9
4 changed files with 141 additions and 0 deletions
--- a/szerkezet/facelogo.png
+++ b/szerkezet/facelogo.png
--- a/szerkezet/logo.png
+++ b/szerkezet/logo.png
--- a/szerkezet/style.css
+++ b/szerkezet/style.css
@@ -0,0 +1,97 @@
+*{
+    box-sizing: border-box;
+}
+/*#right{
+    background-color: red;
+    margin-left: 75%;
+    width: 25%;
+}
+#left{
+    background-color: blueviolet;
+    float: left;
+    width: 25%;
+}
+article{
+    background-color: blue;
+    margin-left: 25%;
+    width: 50%;
+}*/
+
+footer{
+    background-color: green;
+}
+
+nav{
+    background-color: yellow;
+}
+ul{
+    text-align: center;
+}
+
+#logo1{
+    float: left;
+}
+#logo1 img{
+    width: 50%;
+}
+#logo2{
+    float: right;
+}
+#logo2 img{
+    width: 50%;
+}
+
+.col-1{
+    width: 8.33%;
+}
+.col-2{
+    width: 16.66%;
+}
+.col-3{
+    width: 25%;
+}
+.col-4{
+    width: 33.33%;
+}
+.col-5{
+    width: 41.66%;
+}
+.col-6{
+    width: 50%;
+}
+.col-7{
+    width: 58.33%;
+}
+.col-8{
+    width: 66.66%;
+}
+.col-9{
+    width: 75%;
+}
+.col-10{
+    width: 83.33%;
+}
+.col-11{
+    width: 91.66%;
+}
+.col-12{
+    width: 100%;
+}
+
+#left {
+    background-color: blueviolet;
+    float: left;
+    width: 25%; 
+}
+  
+article {
+    background-color: blue;
+    float: left;
+    width: 50%; /* The width is 60%, by default */
+}
+  
+#right {
+    background-color: red;
+    float: left;
+    width: 25%; /* The width is 20%, by default */
+}
--- a/szerkezet/szerkezet.html
+++ b/szerkezet/szerkezet.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <title>Szerkezet</title>
+    </head>
+    <body>
+        <header>
+            <nav class="col-12">
+                <div id="logo1" class="icon col-2">
+                    <img src="logo.png">
+                </div>
+                <ul class="col-8">
+                    <li>opcio1</li>
+                    <li>opcio2</li>
+                    <li>opcio3</li>
+                </ul>
+                <div id="logo2" class="icon col-2">
+                    <img src="facelogo.png">
+                </div> 
+            </nav>
+        </header>
+        <br><br><br><br><br><br><br><br>
+        <section>
+            <aside id="left">
+                bal aside
+            </aside>
+            
+                <article>
+                    article
+                </article>
+            
+            <aside id="right">
+                jobb aside
+            </aside>
+        </section>   
+        <br><br><br><br><br><br><br><br><br>
+        <footer>
+            footer
+        </footer>
+    </body>
+</html>