Post
Ask Question
Loknadh Ravineni

Loknadh Ravineni

  • NA
  • 62
  • 1.2k

i had to design the webpage like this

Dec 7 2019 1:06 AM
 
 i had to design the webpage like this when i hover this small part in the bottom corner the big part should move how to achieve this iam totally confused atleast please specify me the name what is this functionality called and i tried in this way inorder to achieve this functionality
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="flexstyles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<div class="d-flex align-items-stretch bg-light" style="height: 500px">
<div class="p-2 border padstyle" >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="p-2 border padstyle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
</div>
</form>
</body>
</html>
 
.padstyle{
margin-left:15px;
margin-right:15px;
}
 
     

Answers (3)