Holy Grail Layout Gold Challenge

Frontend Web Development: The Big Nerd Ranch Guide Chapter 5: Adative Layouts with Media Queries
1

Hello, everyone. I’m a beginner. I’ve just finished my Grail layout challenge, but I don’t know if it’s right or if there’s a better way? Can you help me see it?

css:

@font-face {

font-family: ‘airstreamregular’;
src: url(‘fonts/LAKESHOR-webfont.eot’);
src: url(‘fonts/LAKESHOR-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/LAKESHOR-webfont.woff’) format(‘woff’),
url(‘fonts/LAKESHOR-webfont.ttf’) format(‘truetype’),
url(‘fonts/LAKESHOR-webfont.svg#lakeshore’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘lakeshore’;
src: url(‘fonts/LAKESHOR-webfont.eot’);
src: url(‘fonts/LAKESHOR-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fonts/LAKESHOR-webfont.woff’) format(‘woff’),
url(‘fonts/LAKESHOR-webfont.ttf’) format(‘truetype’),
url(‘fonts/LAKESHOR-webfont.svg#lakeshore’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

html,body{
height: 100%;
}

body{
display: flex;
flex-direction: column;
font-size: 10px;
background: rgb(149, 194, 215);
}

a{
text-decoration: none;
}

.main-header{
flex: 0 1 auto;
}

.logo-text{
background: white;
font-family: lakeshore;

text-align: center;
text-transform: uppercase;
font-size: 37px;
}

.main-content{
flex: 1 1 auto;

display: flex;
flex-direction: row;
overflow: hidden;
}

.thumbnail-list-left{
display: flex;
flex: 0 1 auto;
flex-direction: column;
justify-content: space-between;
white-space: nowrap;
overflow-x: auto;
order: 0;
list-style: none;
margin-left: 20px;
padding: 0px;
}

.thumbnail-list-right{
display: flex;
flex: 0 1 auto;
flex-direction: column;
justify-content: space-between;
order: 2;
list-style: none;
white-space: nowrap;
margin-right: 20px;
padding: 0px;
overflow-x: auto;
}

.thumbnail-item{
/* display: block; /
display: inline-block;
min-width: 120px;
max-width: 260px;
/ width: 120px; */
border: 1px solid rgb(100%,100%,100%);
border: 1px solid rgba(100%,100%,100%,0.8);
}

.thumbnail-item + .thumbnail-item{
margin-top: 10px;
}

.thumbnail-image{
display: block;
width: 100%;
}

.thumbnail-title{
display: block;
margin: 0;
padding: 4px 10px;
font-size: 18px;
background: rgb(96,125,139);
color: rgb(202,238,255);
}

.detail-image-container{
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
}

.detail-image-frame{
text-align: center;
position: relative;
}

.detail-image{
width:90%;
}

.detail-image-title{
position: absolute;
bottom: -16px;
left: 4px;
font-family: airstreamregular;
color: white;
text-shadow: rgba(0, 0, 0, 0.9) 1px 2px 9px;
font-size: 40px;
}

.main-footer{
flex: 0 1 auto;
}

.foot-text{
background: white;
font-family: lakeshore;

text-align: center;
text-transform: uppercase;
font-size: 37px;
}

/* @media all and (min-width: 768px) {
.main-content{
flex-direction: row;
overflow: hidden;
}

.thumbnail-list{
flex-direction: column;
order: 0;
margin-left: 20px;
}

.thumbnail-item{
max-width: 260px;
}

.thumbnail-item + .thumbnail-item{
margin-top: 20px;
} */

/* } */

html:

ottergram

ottergram

<main class="main-content">
  <ul class="thumbnail-list-left">
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter1.jpg" alt="Barry">
        <span class="thumbnail-title">Barry</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter2.jpg" alt="Robin">
        <span class="thumbnail-title">Robin</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter3.jpg" alt="Robin">
        <span class="thumbnail-title">Maurice</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter4.jpg" alt="Robin">
        <span class="thumbnail-title">Lesley</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter5.jpg" alt="Robin">
          <span class="thumbnail-title">Barbara</span>
      </a>
    </li>

    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter1.jpg" alt="Barry">
        <span class="thumbnail-title">Barry</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter2.jpg" alt="Robin">
        <span class="thumbnail-title">Robin</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter3.jpg" alt="Robin">
        <span class="thumbnail-title">Maurice</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter4.jpg" alt="Robin">
        <span class="thumbnail-title">Lesley</span>
      </a>
    </li>
    <li class="thumbnail-item">
      <a href="#">
        <img class="thumbnail-image" src="img/otter5.jpg" alt="Robin">
          <span class="thumbnail-title">Barbara</span>
      </a>
    </li>
  </ul>

<div class="detail-image-container">
  <div class="detail-image-frame">
    <img class="detail-image" src="img/otter1.jpg" alt="">
    <span class="detail-image-title">Stayin' Alive</span>
  </div>
</div>

<ul class="thumbnail-list-right">
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter1.jpg" alt="Barry">
      <span class="thumbnail-title">Barry</span>
    </a>
  </li>
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter2.jpg" alt="Robin">
      <span class="thumbnail-title">Robin</span>
    </a>
  </li>
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter3.jpg" alt="Robin">
      <span class="thumbnail-title">Maurice</span>
    </a>
  </li>
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter4.jpg" alt="Robin">
      <span class="thumbnail-title">Lesley</span>
    </a>
  </li>
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter5.jpg" alt="Robin">
        <span class="thumbnail-title">Barbara</span>
    </a>
  </li>

  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter1.jpg" alt="Barry">
      <span class="thumbnail-title">Barry</span>
    </a>
  </li>
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter2.jpg" alt="Robin">
      <span class="thumbnail-title">Robin</span>
    </a>
  </li>
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter3.jpg" alt="Robin">
      <span class="thumbnail-title">Maurice</span>
    </a>
  </li>
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter4.jpg" alt="Robin">
      <span class="thumbnail-title">Lesley</span>
    </a>
  </li>
  <li class="thumbnail-item">
    <a href="#">
      <img class="thumbnail-image" src="img/otter5.jpg" alt="Robin">
        <span class="thumbnail-title">Barbara</span>
    </a>
  </li>
</ul>

@typecrit 2018

%E6%8D%95%E8%8E%B7
捕获.jpg763×659 159 KB