Assignment – Flexbox

Javascript Course 2021
#143 
body {
    background-color: aqua;
}

.header-container {
    display: flex;
}
.logo {
    padding-left: 25px;
    font-size: x-large;
    width: 30%;

}
.main-nav {
    width: 70%;
    display:flex
}

.menu-list {
    display: flex;
    list-style-type: none;
    justify-content: flex-end;
    padding-right: 30px;
    align-items:stretch;
  
}
.menu-item {
    display: flex;
    margin: 20px;
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
    

}
#144

``For a first timer looks cose

HTML part

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Layoutt</title>
    <link rel="stylesheet" href="./css/Stylesl.css">
</head>
<body>
    <header>

       
            <nav>
                <div class="sebs-container">
                    <h1 class="golow">Logo</h1>
                        <ul>
                        <li class = "sebs"><a href="#">Home</a></li>
                        <li class = "sebs"><a href="#">About</a></li>
                        <li class = "sebs"><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        
    </header>
    <p></p>
    <main>
        <article>
            <h2>Article Heading</h2>
            <section>
                <p>Lorem ipsum dolor sit <span>abhye</span>amet consectetur.</p>
            </section>
        </article>
    </main>
    <aside>By TheWay. Can be a sidebaree</aside>
    <footer>Copyright Raghiu</footer>
</body>
</html>

CSS Part

ul {

list-style-type: none;

}

.sebs-container

{

display: flex;

flex-direction: row;

justify-content: space-evenly;

align-items: center;

}

.golow

{

width: 20vw;

}

.sebs

{width: 18vw;

margin:0;

padding: 0%;

border: none;}

li {

float:inline-end;

}

#145

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex box assignment</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <h1 class="logo">Logo</h1>
        <nav>
            <ul class="menu">
                <li><a href="#">About</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Other</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: 2vw;
}

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

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