CSS - calc()
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
:root{ /*Use :root to store all the variables*/
--hue:100;
}
header{
background-color: hotpink;
width: calc(100% - 200px); /*By this we can use 200px space as margin from left and right each 100px*/
height:100vh;
margin: 0 auto;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
}
.head1,.head2,.head3{
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
padding: 10px;
}
.head1{
background-color: coral;
width: calc(60vh - 20vh + calc(10vh + 10vh)); /*Here we are using calc function*/
height:calc(10vh + 20vh);
}
.head2{
background-color: orange;
width: calc(40% + calc(10% + 10vh)); /*We can also add values of different unit*/
height:calc(10vh + 20vh);
}
.head3{
--width:500px;
background-color: orange;
width: calc(var(--width)*2);
height:calc(10vh + 20vh);
}
.primary{
outline: none;
margin:20px auto;
background-color: hsl(var(--hue),200%,55%);
}
.secondary{
outline: none;
margin:20px auto;
background-color: hsl(calc(var(--hue) - 180),200%,55%);
}
</style>
</head>
<body>
<header>
<h1 class="head1"><p>HELLO WORLD!!</p></h1>
<h2 class="head2"><p>Today we are going to start "calc Funtion"</p></h2>
<h2 class="head3"><p>It is a very useful function</p></h2>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
</header>
</body>
</html>
Comments
Post a Comment