CSS CSS Layout Basics CSS Layout Project Creating and Styling the Layout Containers

Abbhishek Soni
seal-mask
.a{fill-rule:evenodd;}techdegree
Abbhishek Soni
Front End Web Development Techdegree Student 5,299 Points

can anyone check my style.css for this layout challenge and tell is it wrong or i can do like this also?

  If you get stuck, feel free to watch the follow-up videos where I'll show you one solution
*/

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
  text-align: center;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.main-header {
  text-align: center;
}

.name {
    font-size: 1.25em;
  margin: 0;
}

.name a,
.main-nav a {
    text-align: center;
}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

.main-nav a:hover {
    color: #093a58;
}

/* ---- Layout Containers ---- */

.banner {
    color: #fff;
    background: #3acec2;
  padding-bottom: 30px;
}

.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
}

/* ---- Page Elements ---- */

.logo {
    width: 190px;
  margin-top: 20px;
}

.col {
    padding-left: 16px;
    padding-right: 16px;
}


/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

  .name,
  .main-nav {
    display: inline-block;
  }

  .main-nav li {
    display: inline-block;
    margin-right: 30px;
  }

  .name {
      margin: 20px 700px 20px 30px;
  }

  .banner {
    text-align: center;
    line-height: 1.5em;
    margin-bottom: 10px;
  }

  .container {
    width: 80%;
    max-width: 1150px;
    margin: 0 auto;
  }

  .col {
    float: left;
    text-align: center;
    margin-top: 30px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .primary {
    width: 40%;
  }

  .secondary,
  .tertiary {
    width: 30%;
  }

  .main-footer {
    width: 100%;
    text-align: center;
    display: inline-block;
  }

    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

}```

1 Answer