user-interface-inline/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Editor with Inline user interface</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="demo.css" />
		<link rel="stylesheet" href="content.css" />
	</head>

	<body>
		<div class="header-wrapper">
			<h1>Editor with Inline user interface</h1>
		</div>
		<div class="editor-wrapper">
			<div id="cke5-editor-types-demo-inline">
				<header id="inline-header">
					<h2>Gone traveling</h2>
					<h3>Monthly travel news and inspiration</h3>
				</header>

				<div id="inline-main">
					<h3>Destination of the Month</h3>

					<h4>Valletta</h4>

					<figure class="image image-style-align-right" style="width: 50%">
						<img
							alt="Picture of a sunlit facade of a Maltan building."
							src="https://ckeditor.com/assets/images/ckdemo/editor-types/malta.jpg"
							srcset="
								https://ckeditor.com/assets/images/ckdemo/editor-types/malta.jpg,
								https://ckeditor.com/assets/images/ckdemo/editor-types/malta_2x.jpg 2x
							"
						/>
						<figcaption>It's siesta time in Valletta.</figcaption>
					</figure>

					<p>
						The capital city of
						<a
							href="https://en.wikipedia.org/wiki/Malta"
							target="_blank"
							rel="external"
							>Malta</a
						>
						is the top destination this summer. It’s home to a cutting-edge
						contemporary architecture, baroque masterpieces, delicious local
						cuisine and at least 8 months of sun. It’s also a top destination
						for filmmakers, so you can take a tour through locations familiar to
						you from Game of Thrones, Gladiator, Troy and many more.
					</p>
				</div>

				<div class="demo-row">
					<div class="demo-row__half">
						<div id="inline-footer-first">
							<h3>The three greatest things you learn from traveling</h3>
							<p><a href="#">Find out more</a></p>
						</div>
					</div>

					<div class="demo-row__half">
						<div id="inline-footer-second">
							<h3>Walking the capitals of Europe: Warsaw</h3>
							<p><a href="#">Find out more</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="module" src="index.js"></script>
	</body>
</html>