JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title> фотограф Ксенья Верещак </title>
		<link rel="stylesheet" type="text/css" href="mysite.css" />
	</head>
	<body>
		<div class="block1"> фотограф Ксения Верещак </div>
		<div class="block2">
			<a href="contacts.html"> Контакты </a>&nbsp;
			<a href="info.html"> Инфо </a>&nbsp;
			<a href="portfolio.html"> Портфолио </a>&nbsp;
		</div><br>
		<div class="block3"> <!-- блок 3 свернулся в 0 по высоте-->
			<div class="block4">
				<a href="1.html"><img src="1.jpg"></a>			
			</div>
			<div class="block4">
				<a href="1.html"><img src="2.jpg"></a>
			</div>
			<div class="block4">
				<a href="1.html"><img src="3.jpg"></a>
			</div>
			<div class="block4">
				<a href="1.html"><img src="anya.jpg"></a>
			</div>
		</div><br>
	</body>
</html>

CSS

body {
font-family: Century Gothic
}
.block1 {
	position: relative;
	padding-left: 200px;
	float: left;
	top: 70px;
} /* заголовок */
.block2 {
	position: relative;
	padding-right: 200px;
	float: right;
	top: 70px;
}/* список ссылок */
.block3 {
	position: relative;
	margin: auto;
	width: 950px;
	padding: 0px;
	top: 120px;
	bottom: 200px;
	outline: 1px solid #D1D1D1;
	box-shadow: 1px 1px 5px #CCC;
	-moz-box-shadow: 1px 1px 5px #ccc;
	-webkit-box-shadow: 1px 1px 5px #CCC;
	text-align: center;
} /* обводка серой рамочкой */
.block4 img {
	margin: 10px;
	width: 270px;
	padding: 1px;
	outline: 1px solid #D1D1D1;
	box-shadow: 1px 1px 5px #CCC;
	-moz-box-shadow: 1px 1px 5px #ccc;
	-webkit-box-shadow: 1px 1px 5px #CCC;
	float: left;
} /* обводка серой ромачкой */
.block4:hover {
	opacity: 0.6;
} /* реакция на фокус блока 4 */