search

jsartisan / frontend-challenges

FrontendChallenges is a collection of frontend interview questions and answers. It is designed to help you prepare for frontend interviews. It's free and open source.
https://frontend-challenges.com
27 stars 4 forks source link

Layout 1 #40

Closed jsartisan closed 6 months ago

jsartisan commented 6 months ago

Info

difficulty: easy
title: Layout 1
template: vanilla
tags: css

Question

You are given a container with 6 children divs. Implement the layout as shown in the video:

https://github.com/jsartisan/frontend-challenges/assets/6636360/b837567c-66b5-45f5-b289-d6167c849af9

The breakpoints are 400px, 600px, 800px.

Template

styles.css

.container {

}

.item {
  background: #e1e1e1;
  height: 100px;
}

index.js

import "./styles.css";

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>

<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>

</html>
github-actions[bot] commented 6 months ago

41 - Pull Request updated.