Assignment – Flexbox

Javascript Course 2021
#21

index.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>Flexbox Navbar</title>
</head>
<body>
    <div class="container">
        <div class="nav-bar">
            <p class="nav-bar-logo">
                Logo
            </p>
            <ul class="nav-bar-contents">
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
</body>
</html>

styles.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav-bar {
    display: flex;
    justify-content: space-between;
}

.nav-bar-logo {
    display: flex;
    width: 40%;
    padding: 1.5rem;
}

.nav-bar-contents {
    display: flex;
    width: 40%;
    padding: 1.5rem 0;
    justify-content: right;
    list-style-type: none;
}

.nav-bar-contents li {
    margin: 0rem 1.5rem;
}
1 Like
#22

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/style.css">
</head>
<body>
    <header>
        <h1 class="logo">Logo</h1>
        <nav>
            <ul class="nav-bar">
                <li><a href= "#">Home</a></li>
                <li><a href= "#">About</a></li>
                <li><a href= "#">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

style.css

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

header {
    border: 2px solid rgb(255, 0, 0);
    display:flex;
    justify-content: space-between;
}

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

.nav-bar {
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    width: 70vw;
    margin: 50px;
}
1 Like
#23

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">
    <title>Web Layout</title>
    <link rel="stylesheet" href="navbar.css">
</head>
<body>
    <header>
        <h1 class="Logo">Logo</h1>
        <nav>
            <ul class="Menus">
                <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 ipsum dolor sit amet.</p>
            </section>
            <aside>
                By the way... 
            </aside>
        </article>
    </main>
    <aside>
        Here put banners or ads...
    </aside>
    <footer>
        Data protection policy, cookie policy, legal stuff
        <p>Copyright &copy; 2021 Mihir Sumant</p>
    </footer>
 
</body>
</html>

CSS code

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

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

.Logo {
    margin: 30px;
}

.Menus {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    width: 45vw;
    margin: 40px;
}
1 Like
#24

My solution:
styles.css

ul.menu {
    list-style-type: none;
    display: flex;
    flex-direction:row; 
    align-items:baseline;
    justify-content:flex-end;   
    font-size: 24px; 
    line-height: 16px; 
    font-family: Georgia, serif; 
    font-weight: normal; 
    text-decoration: none; 
    font-style: normal; 
    font-variant: normal; 
    text-transform: none; 
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 60px;
    padding-bottom: 20px;
    border-width: 1px;
    border-style: solid; 
    border-color: black;
}
li.logo{
    font-size: 48px; 
    width: 100%;
}
li.navItem {
    padding-right: 60px;
    
}

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">
    <link rel="stylesheet" href="./css/styles.css">
    <title>Web layout</title>
</head>
<body>
    <header>
            <nav>
                <ul class="menu">   
                    <li class="logo">Logo</li>                 
                    <li class="navItem">Home</li>
                    <li class="navItem">About</li>
                    <li class="navItem">Contact</li>
                </ul>
            </nav>
    </header>
    <main>
        <section></section>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem <span>ipsum</span> dolor sit amet.</p>
                <article><b>HAHA</b></article>
            </section>
        </article>
    </main>
    <aside>
        Lorem ipsum dolor sit amet.
    </aside>
    <footer>
        <p>Copyright &copy; 2021 Jay</p>
    </footer>


</body>
</html>
1 Like
#25

This was a fun assignment , had some trouble but the forums really helped !

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

<body>
    <h1><img src="./assests/Moralis.gif" alt="LOGO"/></h1>

        <ul class="nav-style">      <!This is a list that will become our nav menu>

                     <nav class="nav-style">

            <li> <a href="#" > HOME  </a>  </li>
            <li> <a href="#" > ABOUT </a>  </li>
            <li> <a href="#" > CONTACT </a>  </li>
                    
                    </nav>

        
        </ul>
    
</body>
</html>


* {
    margin: 0;
    padding: 38px;
    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%;
    width: 30%;
    padding-left: 2%;
    font-weight: bold;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}







body {
    background-color: rgba(77, 170, 174, 0.474);

}
1 Like
#26 
<!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/assignment.css">
</head>
<body>
    <header>

        
        <nav>
        
            <ul class="menu-style">
                <li class="logo"><a href="#">logo</a></li>
                <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>

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

.menu-style {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: baseline;
    font-size: 24px;
    width: 100%;
    padding-left: 20px;
    font-weight: bold;
    background-color: blanchedalmond;
}

li.logo {
    width: 100%;
    font-size: 35px;
}

li.Menu-item {
    padding-right: 30px;
}
1 Like
#27 
<!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>Flex Box</title>
    <link rel="stylesheet" href="./css/Index_styles.css">

</head>
<body>

    <header>

        <h1 class="logo">Logo</h1>

        <nav class="nav_bar">
            <ul class="nav_list">
                <li><a href="#">Home</a> </li>
                <li><a href="#">About</a> </li>
                <li><a href="#">Contact</a> </li>
            </ul>
        </nav>

    </header>
    
</body>
</html>

CSS:

*{  
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 100;
    color:rgb(49, 49, 49);
    padding: 0;
}

body{
    margin: 10px;
}


header{
    border-radius: 10px;
    border: aquamarine solid 3px;
    display:flex;
    justify-content: space-between;
}

.logo{
    padding-left: 40px;
    font-size: 40px
}


.nav_list{
    display: flex;
    justify-content:space-between;
    list-style-type: none;
    margin-top: 40px;
    margin-right: 40px
}



li a{
    margin: 0px 20px;
    text-decoration: none;
    color:rgb(49, 49, 49);
    font-size: 25px
}
1 Like
#28

flexbox-practice
flexbox-practice1920×1080 269 KB
[quote=“thecil, post:1, topic:41746, full:true”]

Probably not the best way to do it, but for a beginner like myself it looks good enough… At least for now…

1 Like
#29

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="./FlexBoxAssign.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>Lorem <span>ipsum</span>  dolor sit amet.</p>
            </section>
            <aside>
                By the way ....
            </aside>
        </article>
    </main>
    <aside>
        <p>  Here be banners and ads..</p>
    </aside>
    <footer>
        <p>Copyright &copy; 2022 Irina Pletneva</p>
    </footer>
</body>
</html>
1 Like
#30

css code

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style-type: none;
}
/* Header styles */
.header-container {
    display: flex;

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

}
.main-nav {
    width: 70%;

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

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

}
1 Like
#31

HTML:

<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">

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima porro totam eos perspiciatis sit ab mollitia sequi nulla? Ipsa assumenda doloribus modi, ab repudiandae voluptate praesentium consequuntur nisi reprehenderit quod.

CSS:

  • {

    margin: 0%

    padding 0%

    box-sizing: border-box;

}

body {

background-color: beige;

}

/* Header styles */

.header-container {

display: flex;

}

.logo {

width: 30%;

padding-left: 25px;

}

.main-nav {

width: 70%;

justify-content: flex-end;

}

.menu-list {

list-style-type: none;

display: flex;

justify-content: flex-end;

padding-right: 30px;

}

.menu-item {

margin: 20px;

font-size: 16px;

text-decoration: none;

font-weight: bold;

}

.dashed-border {

border: 2px dashed darkblue;

}

.d-block {

display: block;

}

.d-inline {

display: inline;

}

.d-inline-block {

display: inline-block;

}

#moralis-reference {

text-shadow: 2px 2px 7px darkgray;

}

button {

border: none;

box-shadow: 3px 3px 7px rgb(247, 175, 175);

cursor: pointer;

}

[type=text], [type=number], [type=subit] {

padding: 8px;

}

1 Like
#32

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="./css/styles2.css">
    <title>Web layout</title>
</head>
<body>
    <header class="header-container">
        <h1 class="logo"> Logo </h1>
        <nav class="main-list">
            <ul class="nav-menu">
                <li class="nav-bar"><a href="#"></a>Home</li>
                <li class="nav-bar"><a href="#"></a>About</li>
                <li class="nav-bar"><a href="#"></a>Contact</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 be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2022 KazKram</p>
        <h1>Logo</h1>
        <nav>
            <ul>
                <li><a href="#"></a>Home</li>
                <li><a href="#"></a>About</li>
                <li><a href="#"></a>Contact</li>
            </ul>
        </nav>
    </footer>
</body>
</html>```

CSS code

body {
background-color: wheat;
}

.header-container{
display: flex;
}

.logo {
color: seagreen;
}

.main-list {
width: 80%;
}

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

}

.nav-bar {
margin: 15px;
font-size: 20px;
} or paste code here

1 Like
#33 
.navbar-container {
  display:flex;
}

.column-logo {
  width: 30%;
}

.column-navbar-items {
  width: 70%;
  margin-right: 20%;
}

.list-items { /* class in the ul to remove bullets */
  list-style-type: none;
  display: flex;
  flex-direction: row-reverse;
}

.list-item {
  margin: 30px;
}
1 Like
#34 
<body class="body">

    <div class="main">
      
        <div class="logo">
            <h1>Logo</h1> 

            <div class="menu">
            <div>HOME</div>  
            <div>ABOUT</div>
            <div>MENU</div>
            </div>
    
        </div> 
    
    </div>

</body>


* {
    box-sizing: border-box;
    margin: 10px;
  }
  
  .body {
    display: flex;  
    font-family: Arial;
    margin: 0;
  }
   
  .main {
    flex: 70%;
    background-color: white;
    padding: 20px;
  }
  
  .logo {
    display: flex;
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
  }


  .menu {  
    display: flex;
    flex: 70%;
    flex-wrap: wrap;
  }

flexbox
flexbox1208×138 1.63 KB

1 Like
#35

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/styles.css">
</head>

<body>
    <header class = "header-container">          
        <h1 class = "logo">Logo</h1>
            <nav class = "main-nav">
                <ul class = "menu">
                    <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>

styles.css

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

.header-container{
    display:flex;
}

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

.main-nav {
    padding-right:25px;
    width:70%;
}

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

.menu-items{
    padding:15px;
}
1 Like
#36

Here is my 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">
    <title>Web Layout</title>
</head>
<body>
       <header>
            <nav class="item-container">
                <h1>Logo</h1>
                     <ul class="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>dolor</span> sit amet.</p>
    </section>
    <aside>
        <p> by the way...</p> 
    </aside>
    </article>
</main>
<aside>Here be banners...</aside>
<footer>
    <p>Copyright &copy; BG</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>

Here is my CSS



.item-container{
    display: flex;
    justify-content: flex-end;
    align-items:flex-start;
}

nav:nth-of-type(1){
    gap:40%;
}

ul.menu{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;  
    gap: 50px;
    padding: 30px;
}
  
header {
    border-radius: 5px;
    border: 3px solid turquoise;
    padding: 25px;
    height: 75px;
}

nav>ul.menu>li a, h1 {
color: rgba(0, 0, 0, 0.671);
font-family: sans-serif;
text-decoration: none;
font-size: 50px;
}
1 Like
#37

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="/stylepageHW.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>
        <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 be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2021 Zsolt Nagy</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:

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 3px outset #1F6FA8;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 25px;
    letter-spacing: 2px;
    word-spacing: 2px;
    color:black
}

h1 {
    width: 35%;
    padding-left: 25px;    
}

header nav {
    width: 65%;
}

header nav ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 35px;
}

li {
    margin: 10px;
    list-style-type: none;
}

a:link { 
    text-decoration: none;
    color: black;
    font-size: 20px;
}```
1 Like
#38

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">
    <title>Web Layout</title>
    <link rel="stylesheet" href="./css/styles2.css">
</head>
<body>
    <header>
        <div class="column-container1 d-inline-block" >
            <h1>Logo</h1>

            <nav>
                <ul >
                    <li class="column-container2"><a href="#">Home</a></li>
                    <li class="column-container2"><a href="#">About</a></li>
                    <li class="column-container2"><a href="#">Contact</a></li>
                </ul>

        </div>
    </header>
</body>
</html>

CSS Code

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

h1 {
    width: 30%;
    padding: 0 5px 0 40px;
}

nav {
    width: 70%;
}
.d-inline-block {
    display: flex;
}

.column-container2 {
    padding: 18px 32px 0 10px;
}
1 Like
#39

Here is my css code for this exercise. Thanks in advance for the feedback

.logo {
    font-size: 56px;
    width: 50%;  
}

.un-list li{
    list-style-type: none;
    font-size: 40px;
    width: 50%;
    align-items: left;
    display: inline;
}

header {
    border: 3px solid black;
    display: flex;
    padding: 5px;
    color: #1815FF;
    justify-content: space-around;
    padding: 10px;
}
1 Like
#40

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>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 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; 2021 Sam</p>  
    </footer>
</body>
</html>

CSS:

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

body {
    background-color: beige;
}

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

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

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