ntijoh-daniel-berg/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/mq.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="lorem"><h1>Lorem</h1>
            <input type="text" placeholder="Name">
            <input type="password" placeholder="Password">
            <button>Hej!</button>
        </div>
        <div class="ipsum"><h1>Ipsum</h1></div>
        <div class="dolor"><h1>Dolor</h1></div>
    </div>
</body>
</html>

## mq.css
body {
    background-color: #404040;
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
}

div.lorem {
    background-color: #daebf2;
}

div.ipsum {
    background-color: #ff404c;
}

div.dolor {
    background-color: #1ca5b8;
}

div.container {
    display: grid;
    width: 800px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 16px;
}

div.container div {
    grid-column: span 1;
}

@media only screen and (max-device-width: 568px) {
    div.container {
        width: 90vw;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/mq.css">
	<title>Document</title>
	</head>
	<body>
	<div class="container">
	<div class="lorem"><h1>Lorem</h1>
	<input type="text" placeholder="Name">
	<input type="password" placeholder="Password">
	<button>Hej!</button>
	</div>
	<div class="ipsum"><h1>Ipsum</h1></div>
	<div class="dolor"><h1>Dolor</h1></div>
	</div>
	</body>
	</html>
	body {
	background-color: #404040;
	font-family: Arial, sans-serif;
	}

	h1 {
	text-align: center;
	}

	div.lorem {
	background-color: #daebf2;
	}

	div.ipsum {
	background-color: #ff404c;
	}

	div.dolor {
	background-color: #1ca5b8;
	}

	div.container {
	display: grid;
	width: 800px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-gap: 16px;
	}

	div.container div {
	grid-column: span 1;
	}

	@media only screen and (max-device-width: 568px) {
	div.container {
	width: 90vw;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, 1fr);
	}

	}