Assignment – Flexbox

Javascript Course 2021
#102

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>Coin-Blog DEX</title>
    <link rel="stylesheet" href="./css/styles.css">

</head>
<body>
 <header>
    <div>
         <p class="logo">Logo</p>
         <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>
     </div>
</header>

<main>
    <div>
    <h1>Das ist die Coin-Blog DEX</h1>
</div>

    <div class="weisserHintergrund">
    <p>Hier können Sie verschiedene Coins mit ihrem Wallet direkt dezentral Traden</p>
    <h2>Alles komplett dezentral</h2>
    </div>

<!--hier soll das trading menü, die Coin auswahl hinikommen --->

</main>
    </div>
</body>
</html>

CSS:

body {
    background-color: rgb(78, 255, 249, 100);
}

.weisserHintergrund {
    background-color: whitesmoke;
}

.headerList {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}

header {
    background-color: azure;
    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;
}
1 Like
#103

Hi everyone,

the 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="styles.css">
</head>
<body>
    <div class="column-container">
        <header>
        <h1>Logo</h1>
        </header>
        <nav>
            <ul class="menu-list">
                <li><a href="#">Home </a></li>
                <li><a href="#">About </a></li>
                <li><a href="#">Contact </a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

the css:

.column-container {
   display: flex; 
   flex-direction: row;
   justify-content: space-between;
   border :3px solid green;
}

header {
    display:flex;
    width: 30%;
    justify-content: center;
}

.menu-list {
    display:flex;
    list-style-type: none;
    justify-content: space-between;
    padding-right: 60px;
    padding-top: 20px;
    width: 30vw;
}
1 Like
#104 
.header-container {
    display: flex;

}

.logo {
    width: 30%;

}

.main-nav {
    width: 70%;
}

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

}
1 Like
#105 
* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    background-color: beige;

}

.header-container{

    display: flex;

}

.logo{

    width: 30%;

}

.main-nav{

    width: 70%;

}

.menu-list{

    list-style-type: none;

    display: flex;

    justify-content: flex-end;
1 Like
#106

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="./page_layout.css">
    <title>Document</title>
</head>

<body>
    
    <header class="header">
        <h1 class="logo">Logo</h1>
        <nav class="navMenu">
            <ul class="menu">
                <li class="navMenuItem"><a href="#">Home</a></li>
                <li class="navMenuItem"><a href="#">About</a></li>
                <li class="navMenuItem"><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>
    </main>

    <footer>
        <p>Copyright &copy; Pyjama Man</p>
    </footer>

</body>
</html>

CSS

header{
    display :flex;
}

.logo{
    display: flex;
    flex: 1;
}

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

.navMenuItem{
    margin: 0.5rem;
}
2 Likes
#107

HTML:

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

Header Styles section 
/* Header styles */

.header-container {
    display: flex;
}

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

.main-menu {
    width: 70%;
}

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

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

a {
    text-decoration: none;
}

I had a few challenges removing the text decoration, so ended up targeting the a ref.

2 Likes
#108

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>
</head>
<body>
    <header>
        <link rel="stylesheet" href="./css/stylespl.css">
        <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>OSIS <span>OSIS</span>  OSIS OSIS Apotheosis.</p>
                <p>OSIS <span>OSIS</span>  OSIS OSIS Apotheosis.</p>
                <p>OSIS <span>OSIS</span>  OSIS OSIS Apotheosis.</p>
                <p>OSIS <span>OSIS</span>  OSIS OSIS Apotheosis.</p>
            </section>
            <aside>
                <p>By the way...</p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
    <p>Copyright &copy; 2022 Apotheosis</p>
    </footer>
    <header>
        <link rel="stylesheet" href="./css/stylespl.css">
        <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>
</body>
</html>

CSS

* {
    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;
  }
2 Likes
#109

The following is my solution

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>Page Layout</title>
    <link rel="stylesheet" href="./CSS/styles2.css">
</head>
<body>

    <header id="header-space">
        <h1 id="the-logo">Logo</h1> &nbsp; 
        <nav id="header-nav">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
        
    </header>
<body>
css code 
#header-space {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    border: 2px solid lightseagreen;
    border-radius: 6px;

}

#the-logo {
    font-family: sans-serif;
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 10px;
}

#header-nav {
    display: flex;
    width: 180px;
    justify-content: space-between;
    margin-bottom: 10px;
    
}

nav a {
    font-family: sans-serif;
    font-size: 15px;
    color: #000;
    text-decoration: none;
}

nav a:hover{
    color:blue
}
1 Like
#110 
<div class="Heading">
        <div class="logo" >
        <h1>Logo</h1>
    </div>
    
            <ul class="menu-list">
             <li><a href="#">Contact</a></li>
              <li><a href="#">Home</a></li> 
              <li><a href="#">About</a> </li> 
            </ul>
            </div>

css part

.Heading{ 
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: green solid;
}

.logo {
    flex-basis: 70%;
}

.menu-list {
    list-style-type: none;
    display:flex;
    flex-grow: 1;
    justify-content: space-between;
    height: 75 px;
}
1 Like
#111

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <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</p>
            </section>
        </article>
    </main>
    <footer>
        <p>Copyright 2021</p>
    </footer>
</body>
</html>

CSS

header {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  padding: 0 10vw;
}
header h1 {
  width: 30%;
  justify-content: flex-start;
}
header ul {
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
  width: 70%;
}
header li {
  margin: 0 12px;
}
1 Like
#112

HTML

<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>Logo</title>
    <link href="main.css" rel="stylesheet">
    <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-format">
                <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>  type or paste code here

CSS

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

/* Header Style*/


.menu-format{
    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;
}

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

.header-container {
    display: flex;
}

.main-nav {
    width: 70%;
}
1 Like
#113

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="styleslist.css">
</head>
<body>
    
    <header class="flex">
        <h1>Logo</h1>
        <Nav>
            
 <ul style="list-style-type: none;
 display: flex;
 ">
                <li><a href="#"> Home</a></li>
                <li><a href="#"> About</a></li>
                <li><a href="#"> Contact</a></li>
            </ul>
            </div>
           
        </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>
            <footer>
                <P>Copyright &copy; 2021 Zsolt Nagy</P>
            </footer>
        </article>
    </main>
    <aside>Here be banners and ads...</aside>
</body>
</html>

CSS

li {
    margin: 30px;
    font-size: 30px;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    height: 150px;
    
}

h1 {
    font-size: 50px;
    margin: 30px;
}
1 Like
#114

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/style1.css">
</head>
<body>
    <header>
        <h1>Logo</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>    
                <li><a href="#">Account</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 be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2022 Maikel van Haagen</p>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>    
                <li><a href="#">Account</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

CSS

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

body {
    background-color:lightgray;
}

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

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

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

li a {
    text-decoration: none;
    color: black;
    font-size: 24px;
}
1 Like
#115 
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>
        <section></section>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem <span><strong>ipsum</strong></span> dolor sit amet consectetur adipisicing!</p>
            </section>
            <aside>
                <p>By the way...</p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2022 Austin Wells</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:
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(78, 8, 138);
}

/* Header styles */

.header-container {
    display: flex;
}

.logo {
    padding-left: 25px;
    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;
    font-size: 16px;
    list-style-type: none;
}

#moralis-reference {
    text-shadow: .5px .5px 5px rgb(1, 186, 57);
}

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

.column-container {
    display: flex;
}

.column {
    width: 40%;
}

button {
    border: none;
    box-shadow: 3px 3px 7px rgb(2, 130, 130, 0.7);
    cursor: pointer;
}

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

[type=text], [type=number], [type=submit] {
    padding: 8px;
}
1 Like
#116

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

CSS

.header-container {
    display: flex;
    /* justify-content: space-evenly; */
}

.header-logo {
    width: 30vw;
    display: flex;
    justify-content: flex-start;
}

.header-menu {
    width: 70vw;
    display: flex;
    justify-content: space-around;
    list-style-type: none;
}
1 Like
#117

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_page_layout.css">
</head>
<body>
    <header>
        
    
        <h1 id="logo">Logo</h1>
        <nav>
            <ul id="topnav">
                <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. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam odio, ipsum maiores, nam optio voluptas aspernatur perferendis quaerat excepturi omnis placeat recusandae soluta mollitia, voluptatum non consequuntur tempore repellat id!</p>
            </section>
                <article>
                    <p>Fillers here</p>
                </article>
        </article>
    </main>
    <aside>
        <p>Here be banners and ads...</p>
    </aside>
    <footer>
        Copyright &copy; 2022 Jere Salmisto
    </footer>
</body>
</html>

CSS

header {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

#topnav {
    list-style-type: none;
    display: flex;
    gap: 30px;
    padding-right: 50px;
    
}
1 Like
#118

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 assignment</title>

    <!--Link to stylesheet-->
    <link rel="stylesheet" href="./css/flexbox_assignment_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>Some content title..</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>
            <section>
                <h3>content subtitle</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                Iusto consequatur eaque quae inventore. Doloremque, dolorum praesentium, 
                ipsum nostrum quas explicabo dolorem accusantium, sed perspiciatis repudiandae tempora labore amet adipisci ex!
                </p>
            </section>
        </article>
    </main>
    <footer>
        <p>Copyright etc....</p>
    </footer>
</body>
</html>

CSS

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

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/style.css">
    <title>Web layout</title>
</head>
<body>
    <header class="header-container">
        <h1 class="logo">Logo</h1>
        <nav class="main-nav"></nav>
            <ul class="nav-list">
                <li class="nav-item"><a href="#">Home</a></li>
                <li class="nav-item"><a href="#">About</a></li>
                <li class="nav-item"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>"This is page"</h2>
            <section>
                <p>"Loremmmm" </p>
            </section>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <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

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

body {
    background-color:beige;
}

/* Header style */

.header-container{
    display: flex;
    align-items: center;
}

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

.main-nav{
    width: 70%;

}

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

.nav-item{
    margin: 20px;
    font-size: 16px;
}
1 Like
#120

homework:

CSS new classes 
.header-menu {
display:flex;

}
.menu-logo {
align-self: center;
padding:25px;
}

.main-nav {
padding:25px;
}
.nav-list {
    list-style-type: none;
    display:flex;
    justify-content: space-around;
}
.nav-items {
    margin: 20px;
    font-size: 20px;
    font-weight:bold;
}
HTML portion 
<header class="header-menu">
        <h1 class="menu-logo">Logo </h1>
            <nav class="main-nav">
                <ul class="nav-list">
                    <li class="nav-items"> <a href="#">Home</a> </li>
                    <li class="nav-items"> <a href="#">About</a> </li>
                    <li class="nav-items"> <a href="#">Contact</a> </li>
                </ul>
            </nav> 
    </header>
2 Likes
#121

CSS

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

header {
    display:flex;
    justify-content: space-around;
    align-items: center;
}

.list { list-style-type:none;
    display:flex;
justify-content: space-between;
align-content:space-around;}


body {
    background-color:aqua;
}

HTML

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