<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calc</title>
</head>
<body>
<header>
FAKEBOOK.COM
</header>
<nav>
<ul style="list-style: none;">
<li>HOME</li>
<li>CHAT</li>
<li>FRIENDS</li>
<li>NETWORK</li>
<li>COMMUNITY</li>
<li>Q&A</li>
</ul>
</nav>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ut, eveniet dolores nostrum quo fugiat fugit eos sapiente, ex eius saepe sit aliquam. Ipsam quisquam quaerat praesentium, ipsum accusamus magni?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ut, eveniet dolores nostrum quo fugiat fugit eos sapiente, ex eius saepe sit aliquam. Ipsam quisquam quaerat praesentium, ipsum accusamus magni?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ut, eveniet dolores nostrum quo fugiat fugit eos sapiente, ex eius saepe sit aliquam. Ipsam quisquam quaerat praesentium, ipsum accusamus magni?</p>
</main>
</body>
</html>
:root {
--font-size : 1.5vw;
}
header {
background-color:blue;
color:white;
font-size: calc(var(--font-size) * 2.5);
width: calc(100vw * (30/100));
margin: 0 auto;
text-align:center;
}
nav {
margin-top:1rem;
}
ul {
display:flex;
width: calc(100% - 20%);
height:calc(var(--font-size) * 2);
display:flex;
align-items:center;
margin:0 auto;
justify-content:space-between;
background-color:blue;
padding-inline-start: unset;
padding:0 50px;
color:white;
}
ul > li:active {
background-color:skyblue;
}
main {
width: calc(100% - 200px);
margin:0 auto;
margin-top:2rem;
font-size: 1.2rem;
}
main > p::first-letter {
font-weight:bold;
font-size:2rem;
}
main > p::selection {
background-color:yellow;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.