Assignment – Flexbox

Please post your questions or solution below :raised_hands:

2 Likes

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;
}
4 Likes

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;
}
4 Likes

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;

}
3 Likes

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

4 Likes

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;    
}


2 Likes

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>
2 Likes
<!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;
}`
2 Likes
type or paste code here
Assignment Flexbox

Logo

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>
    
2 Likes
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;
}

2 Likes

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

1 Like

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;
}


1 Like

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;
}
2 Likes
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;
}
2 Likes

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;
}
2 Likes

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; 
}

2 Likes

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;
}
1 Like

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;
}
1 Like

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

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;
}
1 Like