81 lines
1.7 KiB
HTML
81 lines
1.7 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset=utf-8">
|
||
<title>Task 4</title>
|
||
<style>
|
||
div {
|
||
box-sizing: border-box;
|
||
background: lightblue;
|
||
text-align: center;
|
||
margin: 5px 5px;
|
||
|
||
}
|
||
|
||
.menu{
|
||
text-align: end;
|
||
}
|
||
.menu > div{
|
||
width: 100px;
|
||
height: 50px;
|
||
display: inline-block;
|
||
background: violet;
|
||
|
||
}
|
||
.gray {
|
||
background: gainsboro;
|
||
}
|
||
|
||
.w50 {
|
||
width: 48%;
|
||
display: inline-block;
|
||
height: 250px;
|
||
}
|
||
|
||
|
||
.top {
|
||
width: 70%;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
.left {
|
||
display: inline-block;
|
||
width: 63%
|
||
}
|
||
|
||
.left .part {
|
||
height: 80px;
|
||
}
|
||
|
||
.right {
|
||
float: right;
|
||
width: 35%;
|
||
height: 340px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="menu">
|
||
<div>меню1</div>
|
||
<div>меню2</div>
|
||
<div>меню3</div>
|
||
<div>меню4</div>
|
||
</div>
|
||
<div class="top">
|
||
<div class="gray w50"><span>рисунок 1</span></div>
|
||
<div class="gray w50"><span>рисунок 2</span></div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="left">
|
||
<div class="gray part"><span>часть 1.1</span></div>
|
||
<div class="gray part"><span>часть 1.2</span></div>
|
||
<div class="gray part"><span>часть 1.3</span></div>
|
||
<div class="gray part"><span>часть 1.4</span></div>
|
||
</div>
|
||
<div class="gray right"><span>часть 2</span></div>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |