Assignment – Flexbox

Javascript Course 2021
#62

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>
        <div class="logo_box">
            <div class="logo">
            <img src="./assets/metamask1.png" alt="Logo" style="width: 125px; height: 125px;">
        </div></div>
        <nav class="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>
        <div class="content">
            <article>
                <h2>Article Heading</h2>
                <section>
                    <p>Lorem <span>ipsum</span> dolor sit amet.</p>
                </section>
            </article>
        </div>
            <div class="adside">
                <p>By the way... Here be banners and ads... </p>
            </div>
        
    </main>
    <footer>
        <p>
            Copyright &copy; 2022 This Guy
        </p>
    </footer>
</body>
</html>

CSS:

body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: rgb(0, 0, 0);
}

a {
    color:rgb(0, 0, 0)
}

header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background-color: rgb(29, 30, 31);
}

.logo_box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: flex-start;
    flex-basis: 40%;
    /*background-color: rgb(241, 250, 118);*/
}

.logo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 5px;
    background-color: rgb(65, 218, 205);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    align-self: center;
    flex-basis: 60%;
    /*background-color: rgb(22, 0, 116);*/
}

.menu_list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-self: center;
    list-style-type: none;
    padding: 5px;
    margin: 5px;
    background-color: rgb(0, 0, 0);
}

.menu_item {
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border: 0px;
    font-size: 20px;
    color: #000000;  
    background-color: rgb(65, 218, 205);
}

main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    background-color: rgb(45, 59, 58);
}

.content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-basis: 70%;
    padding: 10px;
    margin: 5px;
    color: rgb(255,255,255);
    background-color: rgb(29, 30, 31);
}

.adside {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-end;
    flex-basis: 20%;
    padding: 10px;
    margin: 5px;
    color: rgb(255,255,255);
    background-color: rgb(0, 0, 0);
}

footer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 20px;
    padding: 20px;
    color: rgb(65, 218, 205);
    background-color: rgb(29, 30, 31);
}
2 Likes
#63

Screen Shot 2022-02-25 at 2.10.23 PM
Screen Shot 2022-02-25 at 2.10.23 PM1410×642 55.2 KB

Hi everyone!

I am stuck in this exercise (Assigment CSS Diner), on the very first exercise :sweat_smile: I have tried several options, but cant figure out what I am doing wrong. I have attached an ascreenshot, I hope someone can help. Thank you!
div plate {}
.table plate {}

#64

You should enter the plate selector only without div selector.

#65

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="style.css">
    <title>Document</title>
</head>
<body>
 <header>
    <h1>Logo</h1>
    <ul>
        <li><a  href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Products</a></li>
    </ul>
 </header>
</body>
</html>

CSS

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

body{
    background-color: rgb(255, 255, 255);
}
a, li{
    text-decoration: none;
    list-style-type: none;
    font-size: 20px;
}
header{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 30px 10%;
}
li{
    display: inline-block;
    padding: 0 40px;
}
type or paste code here
2 Likes
#66

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

CSS

* {
    margin: 0;
    padding: 0;
    
}



body {
    background-color: antiquewhite;
}
header {
    border: 2px solid rgb(187, 199, 146);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 20px;;
}





 ul {
        list-style-type: none;
        display: flex;
}
       

 li {
    margin: 0 100px;
}
2 Likes
#67

It’s more simple than you think - you only need to select the element by their type.

Like their example: div selects all

elements (answer would be div)

They’re only asking you to select the plates.

2 Likes
#68

I to have tried every possible combination and it keeps coming up with error

plate{ }
have also tried with just one curly bracket and two curly brackets and none still coming up with error

#69

HTML:

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

CSS:

header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 80px;
    padding: 0 50px;
    border-style: solid;
    border-radius: 7px;
    border-color: rgb(45, 161, 45);
    font-family: Arial, Helvetica, sans-serif;
}

h1{
    margin: 33px 10px;
}

ul{
    list-style-type: none;
    display: flex;
    font-size: x-large;
}

li{
    margin: 15px 40px;
}

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

You should write it with out curly and press enter.

Screenshot 2022-03-02 at 11.28.58
Screenshot 2022-03-02 at 11.28.582879×1651 306 KB

#71

I cannot get the theme in CSS to turn white. It remains orange. Can someone help ?

More Specifically I’m doing the assignment on “Flexbox” and I’m not sure whats wrong with my code but its not showing up as the same color as the instructors.
a direct example is

type or paste code here

.dashed-border {
border: 2px dashed darkblue; 

}


.column-container{
display: flex;
}

.column{
  width:40%;
}

body {
  background-color: beige;

}

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

.logo {
width: 30%;
}
.main-nav{

width: 70%;
}

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

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

#moralis-reference {
  text-shadow: 2px 2px 7px darkgray;
}


button {
    border: none;
    box-shadow: 3px 3px 7px rgba (90,90,90,0.6);
    cursor: pointer;
}

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


[type=text], [type=number], [type=submit]  {
padding: 8px;
}

so above my code will look like that, but my “none” & “flex” & “flex-end” all will remain orange and it wont turn white like on the instructors screen. I believe it is called the “theme”

#72

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="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>
            <p>Lorem <span>ipsum</span> dolor sit amet.</p>
        </section>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem ipsum dolor sit amet.</p>
            </section>  
            <aside>
                <p>By the way...</p>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy 2022 Adam</p>
    </footer>
</body>
</html>

style.css

#moralis-reference {
    text-shadow: 2px 2px 7px darkgray;
}


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

.d-block{
    display: block;
}

.d-inline{
    display: inline;
}

.d-inline-block{
    display: inline-block;
    width: 50%;
    margin: 0%;
    padding: 22px;
    box-sizing: content-box;
}

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

.column{
    width: 40%;
}

body {
    background-color: beige;
}

/* 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: 14px;
    text-decoration: none;
    font-weight: bold;

}

button{
    border: none;
    box-shadow: 3px 3px 7px rgba(90, 90, 90, 0.6);
    cursor: pointer;
}

form{
    padding: 20px 130px 20px 130px;
    border: 2px solid black;
    margin: 30px 100px 30px 100px;
}

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

I don’t really understand your question, Can you send me a screenshot of your website and your html code too.

#74

image
image1512×2016 1.53 MB

The css in my code and the themes or output remain orange and I’m trying to figure out what I’m doing wrong in my code. Because I did everything the instructor did. Step by step. Verbatim. But my CSS isn’t computing and “none” , “flex” & “flex-end” are supposed to have the output color of white. But my code remand orange. Unlike the instructors code. His code turned white.

Hopefully I made it more clear ! Thanks

1 Like
#75

image
image3024×4032 2.62 MB

This is the instructors code and the output is white not orange like mine.

1 Like
#76

hey its hard to tell from just the photos above there could be any number of reason this is happening id need to have a look at your html. can u push your code to github so i can take a look

#77

sorry for the delay in getting back also

#78

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>
    <header class="header-container">
      <h1 class="logo">Logo</h1>
      <nav class="main-navbar">
        <ul class="list-navbar">
          <li class="item-navbar"><a href="#">Home</a></li>
          <li class="item-navbar"><a href="#">About</a></li>
          <li class="item-navbar"><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>Best Practice in 2021</section>
      <article>
        <h2>Article heading</h2>
        <p>Article tags can be copied without a context out of the browser.</p>
        <section><p>Sections can be inside articles</p></section>
        <aside><p>and by the way may be used for sidenotes</p></aside>
      </article>
    </main>
    <aside>
      <p><span>Here may be</span> banners and ads..</p>
    </aside>

    <footer>
      <nav>
        <ul>
          <li><a href="#">Impessum</a></li>
          <li><a href="#">Who we are</a></li>
          <li><p>Copyright &copy; 2021 PH</p></li>
        </ul>
      </nav>
    </footer>
  </body>
</html>

CSS

* {
  margin: 25px;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: white;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  color: black;
}
/*
p {
  text-shadow: 5px 4px 7px darkgrey;
}

[type="text"],
[type="number"],
[type="submit"] {
  padding: 8px;
}

button {
  border: none;
  box-shadow: 3px 3px 7px rgba(90, 90, 90 0.6);
  border-radius: 3px;
}
*/
/*Header styles*/

.header-container {
  display: flex;
  border: 1px solid mediumseagreen;
  border-radius: 2px;
  background-color: sandybrown;
}

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

.main-navbar {
  width: 70%;
}
.list-navbar {
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
}
.item-navbar {
  margin: 20px;
  font-size: 16px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
2 Likes
#79

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/pageLayout.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> Artical heading</h2>
            <Section>
                <P>About Blank. <span> (Span for meaning like JS or CSS.) </span> More text.</P>
            </Section>
            <aside>
                By the way...
            </aside>
        </article>
    </main>
    <aside>
        Banners and ads...
    </aside>
    <footer>
        Copyright 2022
    </footer>

</body>
</html>

CSS

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

body {
    background: 
    conic-gradient(at 50% 50%, black, white, black, white, black);
}

.header-container {
    display: flex;
    margin: 4px;
    margin-top: 30px;
    border: solid 1px rgb(0, 0, 0);
    border-radius: 10px; 
    padding: 10px;
    background:
    linear-gradient(to right,rgb(189, 28, 28), #000000);
}

.logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 30%;
    padding-left: 20px;
    font-size: 25px;
    font-weight: bold;
}

.main-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 6px;
    padding: 6px;
    width: 70%;
}

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

.menu-item {
    display: flex;
    align-items: center;
    margin-right: 4px;
    padding-left: 30px;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
}

h2 {
    font-family: 'Courier New', Courier, monospace;
}

main, aside, footer {
    margin: 10px;
}

            @media screen and (max-width: 768px) {

                .header-container {
                    padding: 4px;
                }
                
                .logo {
                    padding-left: 10px;
                }
                
                .main-nav {
                    margin: 0px;
                    padding: 0px;
                }
                
                .menu-list {
                    flex-wrap: wrap;
                    padding: 6px;
                    padding-left: 0px;
                    padding-right: .01rem;
                }
                
                .menu-item {
                    font-size: 18px;
                    margin: 1px;
                    padding: 3px;
                    
                }

            }
1 Like
#80

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 Layouts</title>
  <link rel="stylesheet" href="/css/assignment-style2.css">
</head>
<body>
    <header class="header-logo">
<h1>Logo</h1>
<nav>
<ul class="ul-content">
<li><a href="#" class="remove-blue-underline">Home</a></li>
<li><a href="#" class="remove-blue-underline">About</a></li>
<li><a href="#" class="remove-blue-underline">Contact</a></li>
</ul>
</nav>
    </header>
    <main> 
<article>
<h2>Article Heading</h2>
<section>
<p>Lorem ipsum dolor sit amet.</p>
<aside>
    <p>By the way....</p>
    </aside>
</section>
</article>
    </main>
    <aside>Here are Banners and ads..</aside>
    <footer>
        <p>Copyright &copy; 2022 Nawaf</p>
        <ul class="bottom-footer">
            <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:

*{

    background-color: rgb(255, 249, 242);
    text-decoration: none;

}


header {
    border: 5px solid #12F944;
    font-family: Georgia, serif;
    font-size: 23px;
    color: rgb(231, 93, 93);
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    display: flex;


}

.ul-content {
    list-style-type: none;
    display: flex;
    padding-left: 300px;
    text-indent: 150px;
    margin-top: 80px;
    
}

.bottom-footer {

    list-style-type: none;
    display: flex;
    font-size: 23px;
    color: rgb(231, 93, 93);
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    display: flex;
    padding-left: 440px;
    text-indent: 150px;
    margin-top: 80px;
}

.remove-blue-underline{ 

    text-decoration: none;
    color: rgb(231, 93, 93);

}

I did my best on this assignment to replicate Mr. Zsolt instructions.

1 Like
#81
Assignment - Flexbox

Logo