<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS variable and custom </title>
</head>
<style>
:root{
--primary-color:blue;
--secondary-color:green;
}
.container{
border: 2px solid red;
display: flex;
height: 900px;
width: 700px;
background-color: var(--secondary-color);
flex-direction: column;
align-items: center;
}
.box{
border: 2px solid blue;
height: 250p;
width: 200px;
margin: 5px 5px;
padding: 5px 2px;
/* align-self: center; */
align-self: flex-end;
align-content: center;
background-color: var(--primary-color);
}
</style>
<body>
<div class="container">
<!-- <div class="box"></div> -->
<div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptatem iste rem quod, velit ab perspiciatis exercitationem soluta non sit debitis! In aliquam ea vel nostrum eveniet corporis incidunt quo et, iste animi necessitatibus.</p></div>
<div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptatem iste rem quod, velit ab perspiciatis exercitationem soluta non sit debitis! In aliquam ea vel nostrum eveniet corporis incidunt quo et, iste animi necessitatibus.</p></div>
<div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum voluptatem iste rem quod, velit ab perspiciatis exercitationem soluta non sit debitis! In aliquam ea vel nostrum eveniet corporis incidunt quo et, iste animi necessitatibus.</p></div>
</div>
</body>
</html>
No comments:
Post a Comment