Here's an actual video recording of what the problem is (I'm not trying to advertise in any way): https://www.youtube.com/watch?v=7b38cQ0VGWI
So I'm creating a website just for practice's sake, and everything was going smoothly until I ran into this problem. I have 2 <nav> menus, where the top main nav bar leads one to another page, while the 2nd nav bar leads one to a certain section within the same page. But I'm having problems with the 2nd nav bar. So below is the html I'm using:
<nav class="navbar">
<div class="container">
<ul>
<li><a href="#drama">Drama</a></li>
<li><a href="#comedy">Comedy</a></li>
<li><a href="#romance">Romance</a></li>
<li><a href="#action">Action</a></li>
</ul>
</div>
</nav>
After this is a series of movie picture lists but I'm only going input 2 below as an example:
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
</div>
</div>
As you can see, "John Wick" is within a div tag with an ID of "action", while "Love, Rosie" is within a div tag with an ID of "romance." Now, the "Action" link works fine; it directs the page exactly where the movies within the ID of "action" are. However, when I click the "Romance" link, it doesn't take me to the bottom of the website. Rather, it takes me to the same place as if I clicked the "Action" link.
So basically, the anchor tag isn't working for me even though I made sure to input href="#romance" and also made sure to wrap around the movie "Love, Rosie" within a div tag with an ID of "romance". External links work just fine, only that internal links aren't working as I assumed it would. I also quadruple checked if I had any unclosed div tags, but that wasn't the case.
All of the movies are in the same page.
Below is the CSS (sorry for the disorganization, still working on that):
body {
margin: 0;
line-height: 1.6em;
font-size: 16px;
font-family: sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow:hidden;
}
nav {
margin: 0;
color: #E52EAE;
z-index: 1;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
}
nav a{
text-decoration: none;
color: white;
padding-right: 18px;
padding-bottom: 5px;
text-align: center;
float: right;
}
.navbar {
margin-right: 227px;
position: relative;
font-size: 30px;
color: #22D8E5;
}
.navbar a:visited {
color: #22D8E5;
}
.navbar a:hover {
color: red;
}
#showcase {
background-image:url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
background-position: center right;
background-color: black;
background-size: 850px;
background-position: left;
height: 300px;
text-align: center;
color: white;
}
.movies {
box-sizing: border-box;
width: 25%;
float: left;
padding: 1px;
}
.movies img {
height: 500px;
width: 100%;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: coral;
}
a:hover {
color: red;
}
And here's the whole html:
<!DOCTYPE html>
<html>
<head>
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="movies.css">
</head>
<body>
<section id="showcase">
<nav id="main-nav">
<div class="container">
<ul>
<li><a href="#">Etc</a></li>
<li><a href="#">Animation</a></li>
<li><a href="#">LaughTime</a></li>
<li><a href="movies.index.html">Movies</a></li>
<li><a href="practice3.index.html">Home</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Movie List</h1>
<nav class="navbar">
<div class="container">
<ul>
<li><a href="#drama">Drama</a></li>
<li><a href="#comedy">Comedy</a></li>
<li><a href="#romance">Romance</a></li>
<li><a href="#action">Action</a></li>
</ul>
</div>
</nav>
</div>
</section>
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2802144/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
<h3>Kingsmen</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2381249/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
<h3>Mission Impossible: Rogue Nation</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0468569/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
<h3>The Dark Knight</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br>
<!--2nd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1431045/" target="_blank">
<img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
<h3>Deadpool</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3315342/" target="_blank">
<img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
<h3>Logan</h3>
<p>Action, Drama, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6806448/" target="_blank">
<img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
<h3>Fast & Furious: Hobbs & Shaw</h3>
<p>Action, Adventure</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0371746/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
<h3>Iron Man</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<br>
<!--3rd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt3501632/" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg">
<h3>Thor: Ragnarok</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1631867/" target="_blank">
<img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
<h3>Edge of Tomorrow</h3>
<p>Action, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE@._V1_.jpg">
<h3>Non-Stop</h3>
<p>Action, Thriller, Mystery</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
<h3>Taken</h3>
<p>Action, Thriller</p>
</a>
</div>
<br>
<!--4th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg">
<h3>Avengers: Infinity War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg">
<h3>Avengers: Endgame</h3>
<p>Action, Adventure, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
<h3>John Wick 3: Chapter 3 - Parabellum</h3>
<p>Action, Crime, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
<img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
<h3>Venom</h3>
<p>Action, Sci-Fi, Thriller</p>
</a>
</div>
<br>
<!--5th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
<h3>Guardians of the Galaxy</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
<img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_.jpg">
<h3>Captain America: Civil War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
<img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
<h3>Spiderman</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
<img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
<h3>Mission Impossible: Fallout</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<br>
<!--6th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
<h3>The Maze Runner</h3>
<p>Action, Mystery, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
<h3>Ant-Man and the Wasp</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
<img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
<h3>범죄와의 전</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
<img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
<h3>신세계</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
<br>
<!--1st row of comedy movies-->
<div id="comedy">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
</div>
</body>
</html>
Below is a working example of the code you provided. The changes are:
position:relative; to .movies CSS class.grid-picture { position:relative; float:left; } to the CSS<br style="clear:both;"/> right before each movie category closing </div> tag in order to make sure that the div resizes to match the height of its content (old trick)Note: I also tidied up your code a bit. You can run the example below to test it.
body {
margin: 0;
line-height: 1.6em;
font-size: 16px;
font-family: sans-serif;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
margin: 0;
color: #E52EAE;
z-index: 1;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline;
}
nav a{
text-decoration: none;
color: white;
padding-right: 18px;
padding-bottom: 5px;
text-align: center;
float: right;
}
.navbar {
margin-right: 227px;
position: relative;
font-size: 30px;
color: #22D8E5;
}
.navbar a:visited {
color: #22D8E5;
}
.navbar a:hover {
color: red;
}
#showcase {
background-image: url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
background-position: center right;
background-color: black;
background-size: 850px;
background-position: left;
height: 300px;
text-align: center;
color: white;
}
.movies {
position:relative;
float:left;
box-sizing: border-box;
width: 25%;
padding: 1px;
}
.movies img {
height: 500px;
width: 100%;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: coral;
}
a:hover {
color: red;
}
.grid-picture {
position:relative;
float:left;
}<!DOCTYPE html>
<html>
<head>
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="movies.css">
</head>
<body>
<section id="showcase">
<nav id="main-nav">
<div class="container">
<ul>
<li><a href="#">Etc</a></li>
<li><a href="#">Animation</a></li>
<li><a href="#">LaughTime</a></li>
<li><a href="movies.index.html">Movies</a></li>
<li><a href="practice3.index.html">Home</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Movie List</h1>
<nav class="navbar">
<div class="container">
<ul>
<li><a href="#drama">Drama</a></li>
<li><a href="#comedy">Comedy</a></li>
<li><a href="#romance">Romance</a></li>
<li><a href="#action">Action</a></li>
</ul>
</div>
</nav>
</div>
</section>
<div class="grid-picture">
<!--First row of movies-->
<div id="action">
<div class="movies">
<a href="https://www.imdb.com/title/tt2911666/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
<h3>John Wick</h3>
<p>Action, Crime, Triller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2802144/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
<h3>Kingsmen</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2381249/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
<h3>Mission Impossible: Rogue Nation</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0468569/" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
<h3>The Dark Knight</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br>
<!--2nd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1431045/" target="_blank">
<img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
<h3>Deadpool</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3315342/" target="_blank">
<img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
<h3>Logan</h3>
<p>Action, Drama, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6806448/" target="_blank">
<img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
<h3>Fast & Furious: Hobbs & Shaw</h3>
<p>Action, Adventure</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0371746/" target="_blank">
<img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
<h3>Iron Man</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<br>
<!--3rd row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt3501632/" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg">
<h3>Thor: Ragnarok</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1631867/" target="_blank">
<img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
<h3>Edge of Tomorrow</h3>
<p>Action, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE@._V1_.jpg">
<h3>Non-Stop</h3>
<p>Action, Thriller, Mystery</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
<h3>Taken</h3>
<p>Action, Thriller</p>
</a>
</div>
<br>
<!--4th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg">
<h3>Avengers: Infinity War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg">
<h3>Avengers: Endgame</h3>
<p>Action, Adventure, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
<img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
<h3>John Wick 3: Chapter 3 - Parabellum</h3>
<p>Action, Crime, Thriller</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
<img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
<h3>Venom</h3>
<p>Action, Sci-Fi, Thriller</p>
</a>
</div>
<br>
<!--5th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
<h3>Guardians of the Galaxy</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
<img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_.jpg">
<h3>Captain America: Civil War</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
<img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
<h3>Spiderman</h3>
<p>Action, Adventure, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
<img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
<h3>Mission Impossible: Fallout</h3>
<p>Action, Adventure, Thriller</p>
</a>
</div>
<br>
<!--6th row of movies-->
<div class="movies">
<a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
<h3>The Maze Runner</h3>
<p>Action, Mystery, Sci-Fi</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
<img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
<h3>Ant-Man and the Wasp</h3>
<p>Action, Adventure, Comedy</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
<img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
<h3>범죄와의 전</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
<img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
<h3>신세계</h3>
<p>Action, Crime, Drama</p>
</a>
</div>
<br style="clear:both;" />
</div>
<br>
<!--1st row of romance movies-->
<div id="romance">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
</div>
<br>
<!--1st row of comedy movies-->
<div id="comedy">
<div class="movies">
<a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
<img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
<h3>Love, Rosie</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
<h3>About Time</h3>
<p>Comedy, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
<img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
<h3>The Proposal</h3>
<p>Comedy, Drama, Romance</p>
</a>
</div>
<div class="movies">
<a href="https://www.imdb.com/title/tt1129423/">
<img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
<h3>Fireproof</h3>
<p>Drama, Romance</p>
</a>
</div>
<br style="clear:both;" />
</div>
</div>
</body>
</html>