34 lines
3.0 KiB
HTML
34 lines
3.0 KiB
HTML
<!--
|
|
~ Copyright (c) 2024. Elex. All Rights Reesrved.
|
|
~ https://www.elex-project.com/
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Responsive Layout</title>
|
|
<style>
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
article {
|
|
column-count: 3;
|
|
column-gap: 2rem;
|
|
column-rule: 1px solid #242424;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<article>
|
|
<h1>Lorem ipsum dolor sit amet</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam cursus ultricies. Fusce sit amet sollicitudin tellus. Vivamus sed nisl tellus. Aenean iaculis sollicitudin est, sagittis interdum ex ultricies eu. Pellentesque turpis sapien, mattis eget fermentum nec, tristique congue felis. Vestibulum convallis diam et est dignissim hendrerit. Etiam feugiat, est ullamcorper imperdiet sagittis, urna mauris aliquam lacus, suscipit pretium nisl ligula vel purus. Nam euismod leo quis nulla vestibulum, varius malesuada tellus ornare.</p>
|
|
<p>Nulla eu faucibus justo, et scelerisque urna. Aenean finibus vel ipsum at congue. Nulla facilisi. Nunc rutrum neque at eros finibus pulvinar. Nunc nunc augue, ullamcorper ac nibh vel, lacinia vulputate mauris. Proin eget nibh a mi efficitur sagittis eu in odio. Vivamus elit est, dapibus eget mi laoreet, accumsan facilisis purus. Aliquam erat volutpat. Curabitur ac mauris nec nunc consequat porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
|
|
<p>Donec nec nisl pharetra, maximus velit a, dapibus arcu. Suspendisse sit amet scelerisque enim. Curabitur eget tincidunt dui. Cras hendrerit finibus odio, at fermentum velit sollicitudin eget. Fusce lacinia ac turpis ut volutpat. Maecenas tempus in magna a mollis. Maecenas quis nisi mi. Curabitur nec arcu non dolor sollicitudin lobortis at euismod elit. Ut aliquet ipsum ac enim tincidunt pretium.
|
|
</p>
|
|
<p>Donec pulvinar metus elit, vel pretium lectus vestibulum auctor. Quisque vel libero est. Ut est purus, placerat id auctor eget, tincidunt in ex. Pellentesque tincidunt dolor nunc. Suspendisse in lectus nec lectus fringilla lobortis. Nulla quam erat, volutpat et vulputate sed, cursus eget turpis. Phasellus malesuada, quam ut fringilla cursus, lorem nisl vulputate est, pulvinar posuere ligula velit in nunc. Quisque nec risus imperdiet, accumsan odio at, commodo metus. Suspendisse dignissim eu velit vitae suscipit. Quisque a volutpat tortor, quis consectetur justo. Vivamus tincidunt posuere auctor.</p>
|
|
<p>Nulla a erat diam. Donec sollicitudin molestie orci, sit amet gravida sapien. Aliquam ac justo accumsan, mollis ex at, posuere tortor. Proin quis sapien neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse ut faucibus neque. Aenean sit amet ultricies augue. Nulla facilisi. Morbi congue maximus eros, ut aliquet neque efficitur ac.</p>
|
|
</article>
|
|
</body>
|
|
</html> |