<!DOCTYPE html>
<html class="page" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox — Two columns</title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="news.css">
<style>
/* Columns */
.columns {
display: flex;
justify-content: space-between;
}
.columns__item {
width: calc(50% - 10px);
}
</style>
</head>
<body class="page__body page__body--reasonable">
<div class="columns">
<div class="columns__item">
<article class="news news--first">
<h2 class="news__title">Crop circles have been discovered in England. But they are circles of cuddling Labrador puppies!</h2>
<p class="news__lead">In the English town of Bradstone in the county of Devon, eight Labrador puppies lay down in a circle, huddled together. Alas, one of the pups was too late. He had to climb right on top of his siblings and sleep on their backs. However, it was even softer and warmer!</p>
</article>
</div>
<div class="columns__item">
<article class="news news--second">
<h2 class="news__title">In Kamchatka, a fox stole a tourist’s camera. So now you will see a live feed from its mouth</h2>
<p class="news__lead">Finally, we found a video that would make Emmanuel Lubetsky, who worked on Survivor, Birdman, and Gravity, jealous of the camerawork! Let’s not keep you in suspense: in Kamchatka, a fox stole a camera from an inattentive tourist and made off with it. Accordingly, the view turned out to be literally from inside the fox, with ASMR soundtrack in the form of its loud puffing.</p>
</article>
</div>
</div>
</body>
</html>
Source code of Two Columns Article, by Vadim Makeev
Is powered by HTML Language Basics (builtin) for VSCode
Copyright © 2024 Ivan Uhalin