Я пытаюсь совместить два нижних изображения друг с другом с подписями под каждым соответственно. Прямо сейчас я могу сделать только так, чтобы они были друг на друге с подписями внизу. Я пытаюсь связать каждое изображение с другой страницей. У меня проблемы, так что буду рад, если кто-нибудь может помочь. Если у вас есть какие-либо вопросы, не стесняйтесь комментировать ниже.
/* Imported Fonts*/
@font-face {
font-family: 'Fira Sans';
src: url('Fonts/firasans-regular-webfont.woff2') format('woff2'),
url('Fonts/firasans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin:0;
padding:0;
border:0;
}
a:link{
text-decoration:none;
color:black;
}
a:hover{
text-decoration: none;
color:red;
}
a:visited{
text-decoration:none;
color:black;
}
.TopRow{
font-family: Fira Sans, sans-serif;
letter-spacing: 0px;
width:100%;
background-color:grey;
}
.Image1NavBreak{
line-height:0px;
}
.Image1txt{
margin-left:10%;
}
.Image1{
display: block;
width:80%;
margin-top:5%;
margin-left:auto;
margin-right:auto;
}
.Image2Nav{
display:inline-block;
width:20%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="CSS/style.css">
<head>
<title>TJ</title>
</head>
<body>
<header class= TopRow>
<div>
<h1>
<a href="https://www.google.com">
Tj
</a>
</h1>
</div>
</header>
<div class = 'Image1Nav'>
<a href="https://www.google.com">
<img class="Image1" src="Images/noimg.jpg" alt="noimg.jpg">
</a>
<br class= 'Image1NavBreak'>
</br>
<div class="Image1txt">
<p>
Lorem ipsum, dolor sit amet consect
</p>
</div>
</div>
<div class = 'Image2Nav'>
<a href="https://www.google.com">
<img class="Image2" src="Images/noimg.jpg" alt="noimg.jpg">
</a>
<br class= 'Image2NavBreak'>
</br>
<div class="Image2txt">
<p>
Lorem ipsum, dolor sit amet consect
</p>
<a href="https://www.google.com">
<img class="Image3" src="Images/noimg.jpg" alt="noimg.jpg">
</a>
<br class= 'Image2NavBreak'>
</br>
<div class="Image3txt">
<p>
Lorem ipsum, dolor sit amet consect
</p>
</div>
</div>
</body>
</html>