Assignment – Flexbox

Javascript Course 2021
#122 
<!DOCTYPE html>
<html lang="en">
<head>
    <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 rel="stylesheet" href="CSS/CSS_firstAssignment.css">
</head>
<header>
 <h2 class="Logo">Logo</h2>
 <nav> 
<ul class="MenuList">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</nav> 
</header>
<body>
    <h2>This is where the content Goes</h2>
</body>
</html>

CSS

body{
    background-color: aqua;
}

ul{list-style-type: none;   }

header{
    display:flex;
    justify-content:space-between;
    align-items: flex-end;
}
.Logo{
    width: 30%;
    margin: 25px;
}
.MenuList{
    display: flex;
    justify-content: space-between;
    align-self: flex-end;
    width: 70%;
    margin: 25px;
}```
2 Likes
#123

page_layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header class="header-container">
        <h1 class="log">Logo</h1>
        <nav class="main-nav">
            <ul class="Menu-list">
                <li class="Menu-item"><a href="#">Home</a></li>
                <li class="Menu-item"><a href="#">About</a></li>
                <li class="Menu-item"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem ipsum dolor sit amet.</p>
            </section>
            <aside>
                <p>By the way...</p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2022 </p>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

styles.css:

/* Header styles */
.header-container{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}

.logo {
    width: 30%;
}

.main-nav {
    width: 70%;
}

.Menu-list{
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.Menu-item {

}
2 Likes
#124

HTML

<body>
    <header class="header">
        <h1 class="logo">Logo</h1>
        <nav class="nav">
            <ul class="list">
                <li class="item"><a href = "#">Home</a></li>
                <li class="item"><a href = "#">About</a></li>
                <li class="item"><a href = "#">Contact</a></li>
            </ul>
        </nav>
 ...
</body>

CSS

.header{
    display: flex;
    
}

.logo{
    padding-left: 15px;
    width: 40%;
}

.nav{
    width: 60%;
}

.list{
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
}

.item{
    padding-right: 10px;
    margin: 20px;
}
2 Likes
#125

Hi! So, I must admit that I’ve looked at other solutions a little bit at first. But mainly I used, what I’ve learned in the zombie game plus htmlcheatsheet.com.

HTML part, called page-layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web layout</title>
    <link rel="stylesheet" href="./css/flex.css">
</head>
<body>
    <header>
        <h1>
            Logo
        </h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>   
    </header>
    <main>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem <span>ipsum</span> dolor sit amet.</p>
            </section>
            <aside>
                <p>By the way... </p>
                <p>Here be banners and ads...</p>
            </aside>
        </article>
    </main>
</body>
</html>

CSS part, called flex.css

header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    margin: 40px;
    border: 2px solid lightblue;
}

header nav ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
}

header nav ul li {
    display: flex;
    margin: 19px;
}

header nav ul li a {
    display: flex;
    color: black;
    font-size: 27px;
    text-decoration-line: none;
}
1 Like
#126

HTML section

<header>
        <h1>Logo</h1>
        <nav>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

CSS styles

.menu ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.menu li {
    margin: 0 10px;
}
1 Like
#127

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web layout</title>
    <link rel="stylesheet" href="./CSS/styles2.css">
</head>
<body>
   <header class="main-header">
    <div class="logo-container">        
        <h1>Logo</h1>
    </div>

    <nav>
    <ul class="list-container">
        <li class="list-item"><a href="#">Home</a></li>
        <li class="list-item"><a href="#">About</a></li>
        <li class="list-item"><a href="#">Contact</a></li>
    </ul>
    </nav>
   </header>

CSS

.main-header {
    display: flex;
    border: 2px solid cyan;
    background-color: beige;
    align-items: flex-end;
    justify-content: space-between;
}


.logo-container {
    display: flex;
    margin-left: 10px;
    width: 30%;
    font-size: large;
}

.list-container {
    display: flex;
    list-style: none;
    margin: 10px;
    justify-content: space-around;
    width: 70%;
    gap: 50px;
}

.list-item {
    display: flex;
    font-size: 20px;
}
2 Likes
#128 
HTML part 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Layput</title>
    <link rel="stylesheet" href="./css/style2.css">
</head>
<body>
    <header>
        
        <h1 class="logo">Logo</h1>
        <nav>
            <ul class="nav_links" >
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </nav>

        <a class="cta" href="#">Subscribe</a>
    </header>

    <main>
         <article>
            <h2>Article headong</h2>
            <section>
                <p>Lorem <span>Lorem, ipsum dolor.</span> dolor sit amet.</p>
            </section>
            <aside>
                By the way...
            </aside>
        </article>
        <br>
        <a href="index.html"><button>Submit</button></a>

       <table>
        <tr>
            <td>Name</td>
            <td>Age</td>
            <td>Gender</td>
        </tr>
        <tr>
            <td>Gabrial</td>
            <td>13</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Elva</td>
            <td>8</td>
            <td>Female</td>
        </tr>
    </table>

    </main>
    <aside>
       <p> Here be banner and ads... </p>
    </aside>
    <footer>
        <p>Copyright &copy; 2021</p>
    </footer>
</body>
</html>

  • {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    /* background-color: #24252a; */

}

li, a, button {

font-family: "Monteserrat", sans-serif;

font-weight: 500;

font-size: 16px;

color: #0a0c0c;

text-decoration: none;

}

header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 30px 10%;

}

.nav_links {

list-style: none;

}

.nav_links li {

display: inline-block;

padding: 0px 20px;

}

1 Like
#129 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web layout</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header-container">
        <h1 class="logo">Logo</h1>
        <nav class="main-nav">

            <ul class="menu-list">
                <li class="menu-item"><a href="#">Home</a></li>
                <li class="menu-item"><a href="#">About</a></li>
                <li class="menu-item"><a href="#">Contact</a></li>
        
                   
            </ul>
        </nav>
    </header>
    
</body>
</html>

CSS
html * {

margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: blanchedalmond;

}

header {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 10px;
}

header nav ul li {
margin: 5px;
}

h1, li {
font-family: Times New Roman, Times, serif;
}

h1 {

font-weight: bold;
color: rgb(255, 155,75);

}

li a{
text-decoration:none;
color: aqua;
font-size: 30px;
}

2 Likes
#131

My head-er Hurts :exploding_head:

</head>
<body>
    <header class="header1">
        
        <h1 class=" logo1">
            Logo
        </h1>
        <nav class="nav1">
            
            <ul class="list1" >      
            
                <li><a class="item1" href="">Home</a></li>
                <li><a class="item1" href="">About</a></li>
                <li><a class="item1" href="">Contact</a></li>
                   
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Aricle heading</h2>
            <ul >
        
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            


            <section>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto explicabo assumenda quod quibusdam. Rem recusandae quaerat cupiditate impedit accusamus labore numquam, quibusdam iste, dignissimos illum illo earum, facere iusto aliquam!</p>
            </section>
        </article>
    </main>
    <footer>
        <p>Copyright 2021</p>
    </footer>
</body>
</html>

css:

html * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: gold;
}

/* header styles */

.header1{
    display: flex;

}

.nav1{
    width: 70%;



}


.logo1{
    width: 30%;
    color: blue;
    padding-left: 30px;

}

.list1{
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
   
}
.item1 {

    margin: 20px;
    font-size: 17px;
    text-decoration: none;
    font-weight: bold;

}
2 Likes
#132

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Layout</title>
    <link rel="stylesheet" href="./CSS/styles2.css">
</head>
<body>
   <header>
    <h1>Logo</h1>
    <nav>
        <ul class="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
   </header> 
   <main>
    <section></section>
    <article>
        <h2>Article Heading</h2>
        <section>
            <p>Lorem ipsum dolor sit amet.</p>
        </section>
        <aside>
            <p>By the way</p>
        </aside>
    </article>
   </main>
   <aside>
    Here are banners and ads...
   </aside>
   <p>
    Copyright &copy; Tim
   </p>
</body>
</html>

CSS

*.navigation{
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
}

nav ul li a{
    margin: 20px;
    font-size: 36px;
    font-weight: strong;
    color: black;
}
1 Like
#133 
html * {
    box-sizing: border-box;
    margin: 10;
    padding: 0;
}

body {
    background-color: blanchedalmond;
}

header {
    background-color: beige;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 15px;
}

header nav ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

header nav ul li {
    margin:  10px;
}


h1 {
    font-weight: bold;
    color: black;
}

li {
    text-decoration: none;
    color: grey;
    font-size: 24px;
}
#134

Here below my Css rules to solve the assignment: Thanks :slight_smile:

header {
                display: flex;
                justify-content: space-between;
                border: 1px solid aqua;
                border-radius: 1px;
                align-items: center;
                height: 70px;
                padding: 0 15px;
                }

        header nav ul {
                list-style-type: none;
                display: flex;
                width: 100%;
                margin: 0 50px;
                    }

        header nav ul li a{text-decoration: none;padding: 20px;}
#135

Hi all,
here below my exercise on FlexBox rules.
FlexBox is great, quite hard at the beginning but it’s really usefull
Good lesson to all :facepunch:

HTML part:

    <header>
        <div id="logo-container">   
            <h1>Logo</h1>
        </div>
                <nav id="menu-container">
                    <ul class="menu-list">
                    <li class="menu-item"><a href="#">Home</a></li >
                    <li class="menu-item"><a href="#">About</a></li >
                    <li class="menu-item"><a href="#">Contact</a></li>
                </ul>
                </nav>
    </header>

CSS rules

/* Header styles */

/*Important -> SET display:flex to threat THE MENU ITEMS as
 Flex items
*/
.menu-list{list-style-type: none;
display: flex;
text-decoration-line: none;
}

.menu-item{
margin: 20px; /*To give somespace to the ul li elements*/
font-size: 16px;
}

header{
    padding: 15px;
    display: flex;
    border: 1px solid green;}
#logo-container{border: 1px solid saddlebrown;width:30%;padding-left: 20px;}
#menu-container{display:flex;border: 1px solid fuchsia;width: 70%;justify-content:flex-end;}
1 Like
#136

html

 <header class="page_layout">
      <h1 class="logo">Logo</h1>
      <nav>
        <ul class="header_links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

css

.page_layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid green;
}

.header_links {
  display: flex;
  list-style-type: none;
  gap: 30px;
  margin-right: 50px;
}

.logo {
  margin-left: 50px;
}

.header_links,
.logo {
  font-size: 30px;
  font-family: monospace;
}

.header_links a {
  text-decoration: none;
  color: black;
}
1 Like
#137
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <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 rel="stylesheet" href="./FlexboxAssignment.css">
    <title>Assignment - Flexbox</title>

</head>
<body>
    <header id="header">
        <h1 class="header-logo">Logo</h1>
        <nav class="menu">
            <ul class="menu-itens">
                <li><a href='#'>Home</a></li>
                <li><a href='#'>About</a></li>
                <li><a href='#'>Contact</a></li>
            </ul>
           </nav>
    </header>
</body>
</html>
CSS: 
* { margin:0;
    padding:0;
    box-sizing: border-box;
}

#header {display:flex;}

.header-logo {
          margin: 25px;
          font-size: 14pt;
          width: 10%;
        }

 nav.menu {width:90%;
           justify-content: flex-end;}
           
ul.menu-itens {display:flex;
               list-style-type: none;
               justify-content: flex-end;    
               margin: 25px;   
              }
ul.menu-itens li,a {text-decoration: none;
                   margin: 5px; 
                   }
1 Like
#138
Home
  • About
  • Contact

    • Css part

    html * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    }

    body {
    background-color: off whitesmoke

    }
    header {
    display: flex;
    justify-content: Space-between;
    align-items: center;
    height: 70px;
    padding: 0px 25px
    }
    header nav ul {

    list-style-type: none;
display: flex;
justify-content: flex-end;
width: 100%;

    }

    header nav ul li {
    margin: 0 10px;

    }

    hi, li {
    font-family: Arial, Heletica, sans-serif;

    }

    hi {

    font-weight: strong;
color: rgb (100, 100, 100);

    }

    li a {

    text-decoration: none;
color: black; 
font-size: 24px;

    }

    /* Header styles*/
    .header-container {
    display: flex;

    }

    .logo {
    padding=left: 10px;
    width: 30%

    }

    .main-nav {
    width: 70%:

    }

    .menu-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;

    }

    .menu-item {
    margin: 20px;
    padding: 16px;
    box-sizing: border-box;

    }

    #moralis-reference {
    text-shadow: 2px 2px 7px darkgray;
    }

    .first-paragraph {
    border: 2px dashed darkblue;

    }

.dashed-border {
    border: 2px dashed darkblue;
}

    .column-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    }
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    .column {
    width: 40%;
}

    body {
    background-color: off whitesmoke;
    }

    button {
    border: none;flexbox-shadow: 3px
    box-shadow: 3px 3px 7px rgba(90, 90, 90, 0.
    curser: pointer;
    }

    form{
    padding: 15px;
    border: 2px solid black;
    margin: 30px;
    }

    [type=text], [type=number], [type=submit] {
    padding: 8px;
    }

    1 Like
    #139

    HTML

    Page Layout Title of Page

    Logo

    Hug

    CSS

    • {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      }

    body {
    background-color: beige;
    }

    /* Header Styles */
    .header-container {
    display: flex;
    }

    .logo {
    padding-left: 25px;
    width: 30%;
    }

    .nav {
    justify-content: space-between;
    width: 50%;
    }

    .menu-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    }

    .menu-item {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    margin: 20px;
    font-size: 16px;
    }

    #140

    HTML

    Web Layout

    Logo

        </nav>
</header>
<main>

    CSS Style Sheet

    {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    body {
    background-color: lightskyblue;
    }

    /* Header styles */
    .header-container {
    display: flex;
    }

    .Logo {
    padding-left: 25px;
    width: 30%;
    }

    .main-nav {
    width: 80%;
    }
    .menu-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;

    }

    .menu-item {
    Margin: 40px;
    font-size: 18px;
    text-decoration: none;
    font-weight: bolder;

    }

    font-style; normal;

    {

    }

    #141

    HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web layout</title>
    <link rel="stylesheet" href="./CSS/page_layout_styles.css">
</head>
<body>
    <header>
        <h2 class="Logo">Logo</h2>
        <nav class="nav_menu">
            <ul class="nav_menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem <span>ipsum</span> dolor sit amet.</p>
            </section>
            <aside>
                <p>
                    By the way...
                </p>
                
            </aside>
        </article>
    </main>
    <aside>
        Here will be bannerds and ads...
    </aside>
    <footer>
        <nav>
            <p>Copyright &copy; 2021 Zsolt Nagy</p>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
    </footer>
</body>
</html>

    CSS

    header * {
    font-family: monospace;
    font-size: 20px;
    color: black;
    text-decoration: none;
}

header {
    box-sizing: border-box;
    height: 100px;
    border: 2mm ridge #1889cb;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0px 5%;
    
}

.Logo {
    width: 30%;
    color: green;
}

.nav_menu li {
    list-style-type: none;
    display: inline-block;
    padding: 0px 30px;
}

.nav_menu {
    width: 70%;
    margin-left: auto;
}
    #142 
    type <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/CSS/style.css">
</head>
<body>
    <header class="header-container">
        <h1 class="logo">logo</h1> 
        <nav class="main-nav"></nav>
            <ul class="menu-list"> 
                <li class="menu-item"> <a href="#">Contact</a></li>
                <li class="menu-item"> <a href="#">Home</a></li>
                <li class="menu-item"> <a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section></section>
        <article>
            <p>Lorem <span>ipsum</span> dolor sit amet.</p>
            <section>
            </section>
            <aside>By the way...I want all the dick</aside>
        </article>
    </main>
    <aside>Here are some banners</aside>
    <footer>Copyright &copy; Liam Parsons </footer>
</body>
</html> paste code here