saintseiya

<!DOCTYPE html>

<html>
	<head>
		<title> Flexbox CSS html </title>

	<style>
		*{ box-sizing : border-box;}
		body {font-family : Arial, Helvetica, sans-serif;}

		header {
					background-color : #666;
					padding : 30px;
					text-align : center;
					font-size : 35px;
					color : white;
				}

		section { display : -webkit-flex; }

		nav {
				-webkit-flex : 1;
				-ms-flex : 1;
				flex : 1;
				background : #ccc;
				padding : 20px;
			}

		nav ul {
					list-style-type : none;
					padding : 0;
				}

		article {
					-webkit:flex : 3;
					-ms-flex : 3;
					flex : 3;
					background-color : #f1f1f1;
					padding : 10px;
				}

		footer {
					 background-color #777;
					 padding : 10px;
					 text-align : center;
					 color : white;
				}

		@media (max-width : 600px)
		{
		section {
					-webkit-flex-direction : column;
					flex-direction : column;
				}
		}

	</style>
	</head>


	<body>
		<h2> CSS layout flexbox </h2>
		<p> In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other. </p>
		<p> Resize the browser window to see the responsive effect. </p>
		<p><strong> Note : </strong> Flexbox is not supported in Internet Explorer 10 and earlier versions. </p>

	<header>
		<h2> Cities </h2>
	</header>

	<section>
		<nav>
			<ul>
				<li><a href ="#"> London </a></li>
				<li><a href ="#"> Paris </a></li>
				<li><a href ="#"> Tokyo </a></li>
			</ul>
		</nav>
	<article>
		<h1> London </h1>
		<p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p>
		<p> Standong of the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Roman, who named it Londinium </p>
	</article>
	</section>
	</body>
</html>