Assignment – Flexbox

thecil · November 1, 2021, 3:22pm

Please post your questions or solution below

Yousce · November 4, 2021, 1:14pm

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>Document</title>
    <link rel="stylesheet" href="style.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>Aricle heading</h2>
            <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 part:

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

body {
    background-color: antiquewhite;
}

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

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

header nav ul li {
    margin: 0 10px;
}

h1, li {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-weight: bold;
    color: rgb(189, 171, 11);
}

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

d0nbxx · November 5, 2021, 11:25pm

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>Flexbox menu</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header>
        <h1>Logo</h1>
        <br>
            <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>
            <br>
            <section>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa labore dolor vitae est tempore voluptate?</p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa labore dolor vitae est tempore voluptate?</p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa labore dolor vitae est tempore voluptate?</p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa labore dolor vitae est tempore voluptate?</p>
                </section>
        </article>
    </main>
    <br>
    <footer>
        <p>Copyright &copy; D</p>
    </footer>
</body>
</html>

CSS:

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

body {
    background-color:darkgrey;
}

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

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

header nav ul li {
    margin: 0 10px;
}

h1, li {
    font-family: Arial, Helvetica, sans-serif;
}

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

li a {
    text-decoration: none;
    color: black;
    font-size: 24px;
}

Bogi · November 8, 2021, 4:12pm

Html Code

<!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="page_layout.css">
    <title>Web Layout</title>
</head>
<body>
    <header>
        <div class="header">
        <h1>Logo</h1>
            <div class="navigation">
                <nav>           
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>     
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header> 
    <main>
        <section></section>
        <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 be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2021 Bogi</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>

Css Code

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

.navigation {

    display: flex;

    flex: 1;

    align-items: flex-end;

    justify-content: flex-end;

}

.navigation ul {

    display: flex;

    list-style-type: none;

}

.navigation li {

    margin: 0px 20px 0px 20px;

}

.header {

    display: flex;

    margin: 20px;

}

CryptoXyz · November 8, 2021, 5:00pm

Assignment here

layout.css

header {
  display: flex;
  justify-content: space-between;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 3rem;
  padding: 0 1rem;
}

nav {
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: flex-end;
}

.nav-menu {
  list-style: none;
  display: flex;
  padding: 0 1rem;
}

.nav-link {
  display: flex;
  margin: 10px;
}

a {
  text-decoration: none;
  color: rgb(12, 152, 156);
  font-size: 1.25rem;
}

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/layout.css">
</head>
<body>
    <header>
        <h1 class="logo">Logo</h1>
        <nav>
            <ul class="nav-menu">
                <li class="nav-link"><a href="#">Home</a></li>
                <li class="nav-link"><a href="#">About</a></li>
                <li class="nav-link"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Heading</h2>
                <section>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam possimus quisquam delectus animi sapiente. Beatae sunt officiis consectetur mollitia asperiores? Dignissimos, distinctio! Incidunt iure velit perspiciatis vero repellat quod voluptate.</p>
                </section>
        </article>
        <aside>
            Here be banners and ads...
        </aside>
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
        </ul>
    </main>
    <footer>
        <p>Copyright &copy; 2021 CryptoXyz</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>

Just refreshing knowledge on basic HTML and CSS, learned from this academy

ccholdings77 · November 10, 2021, 8:08pm

Flexbox Assignment – HTML

Tested to have no overlapping elements

<!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/flexbox-assignment.css">
    <title>Assignment - Flexbox</title>

</head>
<body>

    <header>
        <div header-nav class="nav-style">
          <h1>Logo</h1>
        <nav>
            <ul class="nav-style">
                <li><a href='#'>Home</a></li>
                <li><a href='#'>About</a></li>
                <li><a href='#'>Contact</a></li>
            </ul>
           </nav>
        </div>
    </header>
    
</body>
</html>

Flexbox Assignment - CSS

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

.nav-style {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space;
    padding-right: 10%;
    align-items: center;
    width: 100%;
}

.nav-style h1 {
    width: 30%;
    padding-left: 2%;
}

.nav-style ul {
    width: 70%;    
}

.nav-style ul li {    
    margin-left: 20px;
    font-weight: 900;
    padding: 2%;
    font-size: 1.2em;    
}

.nav-style a:link {
    text-decoration: none;    
}

Madlearner · November 12, 2021, 8:43pm

CSS & HTML LAYOUT

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

.logo {
    padding-left: 20px;
    width: 35%;
}

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

.menu-item {
    margin: 20px;
    font-size: 16px;
    text-decoration:chocolate
}

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/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>
    <main>
        
        <article>
            <h2>Article heading</h2>
            <section>
                <p>all articles <span>published</span> on this site are cool </p>
            </section>
        </article>
    </main>
    <aside>
        Banners and ads

    </aside>
    <footer>
        <p>Copyright &copy; 2021 Oz</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>

fsvolt · November 24, 2021, 11:33am

<!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.css">
</head>
<body>
    <header class="flexbox-container">
        <h1 class="flexbox-item flexbox-item-1">Logo</h1>
        <nav>
            <ul class="flexbox-item flexbox-item-2">
                <li> <a href="#">Home</a></li>
                <li> <a href="#">About</a></li>
                <li> <a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>This is a heading</h2>
            <SECtion>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error amet repellat
                     numquam. In optio molestias expedita omnis dolores, sit sed.</p>
            </SECtion>
        </article>
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
        </ul>
        <p>
            Hello world. <br> My name is tony. <br> what is your name?
        </p>
    </main>
    <footer>
        <p>Copyright &copy; 2021 Tony</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>[quote="thecil, post:1, topic:41746, full:true"]
Please post your questions or solution below :raised_hands:
[/quote]

CSS

````.flexbox-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid lightgray;
    border-radius: 10px;
}

.flexbox-item-1{
    margin: 20px;
}

.flexbox-item-2{
    margin: 20px;
    display: flex;
    flex-direction: row;
    list-style: none;
    flex-wrap: wrap;
}

li{
    margin: 10px;
}

a:link{
    text-decoration: none;
}`

SERDNA01 · November 26, 2021, 10:05pm

ccholdings77:

HTML (part 1 of 2)

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

.nav-style {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space;
    padding-right: 10%;
    align-items: center;
    width: 100%;
}

.nav-style h1 {
    width: 30%;
    padding-left: 2%;
}

.nav-style ul {
    width: 70%;    
}

.nav-style ul li {    
    margin-left: 20px;
    font-weight: 900;
    padding: 2%;
    font-size: 1.2em;    
}

.nav-style a:link {
    text-decoration: none;    
}

type or paste code here

Assignment Flexbox

Logo

Home
About
Contact

This is a heading

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error amet repellat numquam. In optio molestias expedita omnis dolores, sit sed.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, harum perspiciatis dolorum magnam dolore doloremque nostrum accusamus ratione maxime unde atque hic, dolores veniam maiores. Eum neque laboriosam architecto perferendis.

        </li>
    </ul>
    
        <p id="moralis-reference">visit <a href="https://www.moralis.io" target="_blank">Moralis.io</a>&nbsp;and&nbsp;start&nbsp;"<strong>build</strong>ing</p>     </p>
</main>
<footer>
    <p> How do we <bold>start</bold></p>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
   </nav>
</footer>

SERDNA01 · November 26, 2021, 10:06pm

CSS (Part 2 of 2)

/* Header style */

.flexbox-container {
display: flex;
justify-content: space-between;
align-items: center;
border: 2px solid rgb(216, 51, 51);
border-radius: 12px;
}

.flexbox-item1{
margin: 20px;
}

.flexbox-item2{
margin: 20px;
display: flex;
flex-direction: row;
list-style: none;
flex-wrap: wrap;
}

li{
margin: 12px;
font-size: 1.2em;
}
bold {
font-size: 23px;
border: solid;
}

a:link{
text-decoration: none;
}

FiToKa · December 1, 2021, 9:45pm

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>Assignment - Flexbox</title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <header>
        <h1 class="logo">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>
</body>

</html>

CSS

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

header {
    display: flex;
    justify-content: space-between;
}

.logo {
    width: 30vw;
    margin: 20px;
}

.menu {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    width: 70vw;
    margin: 20px;
}

.menu li {
    font-size: 25px;
}

RESULT

FOSSCrypto · December 2, 2021, 9:00am

It took me a while to finish Flexbox Zombies…a long while!..Lol. Can’t wait to learn media query break points. I struggled to do this basic assignment.

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>Document</title>
  <link rel="stylesheet" href="./css/page_layout.css">
</head>
<body>
  <header class="header-content">
    <h1 class="logo">Logo</h1>
    <nav class="main-nav">
      <ul class="menu">
        <li class="menu-link"><a href="#">Home</a></li>
        <li class="menu-link"><a href="#">About</a></li>
        <li class="menu-link"><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
      <article>
      <h2>Article heading</h2>
      <section>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et veritatis minima voluptatem culpa, eos voluptate.</p>
      </section>
      <aside>
        <p>By the way... </p>
      </aside>
    </article>
  </main>
  <aside>
    Here be banners and ads...
  </aside>
  <footer>
    <p>Copyright &copy; 2021 FOSSCrypto Codes</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>

STYLESHEET

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

body {
  background-color: beige;
}

.header-content {
  display: flex;
}

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

.main-nav {
  width: 70%;
}

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

.menu-link {
  font-size: 20px;
  margin: 40px;
}

Kamil37 · December 6, 2021, 1:29pm

Hi Guys,

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

.header-container {
    display: flex;
    
}

.logo {
    display: flex;
    padding-left: 25px;
    width: 30%;
    align-items: center;
    
}

.main-nav {
    width: 70%;
}

.menu-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 30px;
    height: 10vh;
    
}

.menu-items, a:link, a:visited {
    margin: 0px 20px 0px 20px;
    font-size: 20px;
    text-decoration: none;
    padding: 0%;
    border: none;
}

Arick · December 6, 2021, 11:41pm

header {
    border-style: solid;
    border-color: blue;
    display: flex;
    justify-content: flex-end;
}

h1 {
    width: 45%;
    align-self: flex-end;
    margin-bottom: 10px;
}

.topmenu {
    width: 50%;
    align-self: flex-end;    
}

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

adoni · December 8, 2021, 8:10am

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="./css/styles.css">
    <title>Web layout</title>
</head>
<body>
    <header class="heading-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>
    <div class="column-container">
        <p class="dashed-border column">
            XYZ
        </p>
        <p class="dashed-border column">
            XYZ
        </p>
    </div>
</body>
</html>

CSS

body {
    background-color: beige;
}

/** Heading styles **/

.heading-container {
    display: flex;

}

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

.main-nav {
    width: 70%;
}

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

Casey_Greggs · December 8, 2021, 9:36pm

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/styles.css">
</head>
<body>
    <header>
        <h1 class="logo">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>
</body>
</html>

CSS

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

body {
   background-color: #fbfffe ;
   
}

header {
    border: solid;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center; 
    height: 70px;
    padding: 0px 20px;
    background-color: #21bf96 ;
    font-family: "Lucida Console", "Courier New", monospace;
}




header nav  {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

header nav ul li {
    margin: 0 10px;
    
}

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

a {
    text-decoration: none;
    color: black; 
}

jollycoin8 · December 10, 2021, 9:19am

Shout out to FiToKa for his post! His code was an excellent template in terms of applying Flexbox. Thank you FiToKa!

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>Flexbox</title>
    <link rel="stylesheet" href="Style-copy.css">
</head>
<body>
    <header>
        <h1 class="Logo">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>
</body>
</html>

CSS

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

header {
    display: flex;
    justify-content: space-between;
}

.Logo {
    width: 30vw;
    margin: 20px;
}

.menu {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    width: 70vw;
    margin: 20px;
}

jcooneyjpc · December 11, 2021, 7:29pm

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>Document</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class= flexbox-container>
        <h1 class="flexbox-item menu-logo">Logo</h1>

        <ul class= "flexbox-item 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>
    </div>
    <main>
        <article>
            <section>
                <p>Lorem <span>ipsum </span>dolor sit amet.</p>
            </section>
        </article>
    </main>
    <aside>
        <p>Here be banners and ads....</p>
    </aside>
    <footer>
        <p>Copyright &copy; 2021 Supppp playyaaa</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>

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
</ul>

CSS

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

body{
    background-color:beige;
}

.flexbox-container{
    display:flex;
}

.flexbox-item{
    display: flex;
}
.menu-list{
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    width: 70%;
}
.menu-item{
    display: flex;
    font-size: 16px;
}

.menu-logo{
    display: flex;
    width: 30%;
    justify-content: flex-start;
}

Asit · December 12, 2021, 4:54pm

Has anyone solved Flexbox Zombies chapter 7 I am stuck at 7.16 can anyone help me?

Asit · December 14, 2021, 2:32pm

Solution of the Flexbox Assignment:

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>Document</title>
    <link rel="stylesheet" href="./css/styles1.css">
  </head>
  <body>
    <header>
        <h1 class="logo" >LOGO</h1>
        <ul style="list-style-type: none;" class="select">
            <li> <a href="#">Contact </a> </li>
            <li> <a href="#">About </a> </li>
            <li> <a href="#">Home </a> </li>
        </ul>
    </header>
  </body>
</html>

CSS part

header {
    border: 2px solid cadetblue;
    padding: 20px 40px 1px 40px;
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
}
.select {
    display:flex;
    column-gap: 20px;
    align-self: center;
}