CSS Question

CSS Question

by misostack

HTML

<h1>Interview Questions</h1>
<div id="wrapper">  
  <div class="category">
    <h2>HTML</h2>
    <div class="question">
      <div class="status correct"></div>
      <h3>HTML Sematic Elements?</h3>      
    </div>
    <div class="question">
      <div class="status in-correct"></div>
      <h3>HTML Form?</h3>      
    </div>
    <div class="question">
      <div class="status partially-correct"></div>
      <h3>HTML Graphic: Canvas vs SVG</h3>      
    </div>
    <div class="question">
      <div class="status in-correct"></div>
      <h3>HTML Media: Audio, Video</h3>      
    </div>
    <div class="question">
      <div class="status correct"></div>
      <h3>HTML APIs: Session Storage vs Local Storage</h3>      
    </div>    
  </div>
  <div class="category">
    <h2>CSS</h2>
    <div class="question">
      <div class="status correct"></div>
      <h3>CSS Viewport</h3>      
    </div>
    <div class="question">
      <div class="status in-correct"></div>
      <h3>CSS Box Model</h3>      
    </div>
    <div class="question">
      <div class="status correct"></div>
      <h3>HTML Graphic: Canvas vs SVG</h3>      
    </div>
    <div class="question">
      <div class="status partially-correct"></div>
      <h3>HTML Media: Audio, Video</h3>      
    </div>
    <div class="question">
      <div class="status in-correct"></div>
      <h3>HTML APIs: Session Storage vs Local Storage</h3>      
    </div>    
  </div>
  <div class="category">
    <h2>Javasript</h2>
    <div class="question">
      <div class="status correct"></div>
      <h3>CSS Viewport</h3>      
    </div>
    <div class="question">
      <div class="status in-correct"></div>
      <h3>CSS Box Model</h3>      
    </div>
    <div class="question">
      <div class="status correct"></div>
      <h3>HTML Graphic: Canvas vs SVG</h3>      
    </div>
    <div class="question">
      <div class="status partially-correct"></div>
      <h3>HTML Media: Audio, Video</h3>      
    </div>
    <div...

CSS

html{
  font-size:12px;  
}
h1{font-size:1.2rem;}
h2{font-size:1.1rem;}
h3{font-size:1rem;}
#wrapper{
  display: flex;
  flex-wrap: wrap;
  gap:10px;
}
.category{
  flex-grow: 1;
}

.question {
  border: 1px solid gray;
  display:flex;
  align-items: center;
}

.status {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius:50%;
}

.correct {
  background-color: green;
}

.in-correct {
  background-color: red;
}

.partially-correct {
  background-color: yellow;
}