I want to create two div tags that will display vertically (one on the left and one on the right). The left side div tag will contain images album.
When users will upload their images, it will save into database and display inside the image album. I am using thumbnail to display the images. Then the right-side div tag will contain links to navigate to other pages.
When the window is minimized (mobile view), the right-side div tag should be hidden (it should disappear in smaller windows) but the left side window will still display. Also, I want to be able to scroll the left-side div tag only.
When the left side div is scrolling, the right-side div tag should be static.
I hope my explanation is understood?
Here is my HTML below:
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@500&display=swap" rel="stylesheet"/>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<title></title>
<style type="text/css">
.norm {
height: 100%;
background-size: cover;
background-color: #eafbe0;
position: absolute;
width: 100%;
z-index: 100;
overflow:auto;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="norm">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
</div>
<div class="album py-5 bg-light">
<div class="row">
<div class="container col-sm-8">
<div class="row">
<div class="col-sm-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="images/double3.jpg" alt="Card image cap"/>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="images/double3.jpg" alt="Card image cap"/>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="images/double3.jpg" alt="Card image cap"/>
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3 d-sm-none d-md-block ">
<p>
I know that there are other reasons why people do these things but this is one of the paramount reasons.
Most problems of mankind is financial. People go to school, Start businesses, etc just because they want to
make money and be financially empowered. I have come to the conclusion that without money, there is little or
nothing you can accomplish in Life. So Making money is very important. If you see a legit opportunity/business
to make money, don’t give yourself excuse, learn the process, stay consistent and make the money. At the end of
the day, what matters is that you are financially free and can fulfill your dreams without bordering anybody.
Then you need to stop whatever you are doing and watch this short video to hear what other Nigerians like you
have to say about this new amazing information you are just coming across!
</p>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
