<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700;900&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Noto Sans JP', sans-serif;
}
ul{
margin:0;
}
.images .main{
width: 69%;
float:left;
}
.images .main img{
max-width: 100%;
}
.images .side{
width:29%;
float:right;
}
.images .side img{
max-width: 100%;
}
h1,
h2,
.infos{
clear:both;
}
.infos .technical{
width:49%;
float:left;
}
.infos .packaging{
width:49%;
float:right;
}
.infos table{
border-collapse: collapse;
}
.infos table td,
.infos table th{
vertical-align: top;
text-align: left;
padding:8px 16px;
border:0;
margin:0;
}
.infos table th{
background-color:lightgrey;
}
.price{
text-align: right;
font-weight:900;
font-size:64px;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<h1>Hamburg #123456 Corner Sofa</h1>
<p>
A comfy television couch covered with gray fabric (100% polyester). The ottoman on this freestanding sofa can be placed on the right or left side.
This sofa offers plenty of space to relax and enjoy your next movie evenings.
</p>
<div class="images">
<div class="main">
<img src="https://via.placeholder.com/1200x600" />
<ul class="key">
<li>Durable, gray textured fabric (100 % polyester)</li>
<li>Natural wooden feet</li>
<li>Back covered with fabric</li>
<li>Easy-care Material</li>
<li>Ottoman can be placed left or right</li>
</ul>
</div>
<div class="side">
<img src="https://via.placeholder.com/400x200" />
<img src="https://via.placeholder.com/400x200" />
<img src="https://via.placeholder.com/400x200" />
</div>
</div>
<div class="infos">
<div class="technical">
<h3>Technical Details</h3>
<table>
<tr>
<th>Brand</th>
<td>Hamburg</td>
</tr>
<tr>
<th>Model</th>
<td>123456</td>
</tr>
<tr>
<th>Dimensions</th>
<td>216 x 159 x 62 cm</td>
</tr>
<tr>
<th>Seat Height</th>
<td>43 cm</td>
</tr>
<tr>
<th>Color</th>
<td>Light Gray</td>
</tr>
<tr>
<th>Material</th>
<td>
<ul>
<li>Polyurethane Foam</li>
<li>Wavy Feathers</li>
<li>Wood</li>
<li>Plastic</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="packaging">
<h3>Packaging and Shipping</h3>
<table>
<tr>
<th>Package Dimensions</th>
<td>
2 Boxes
<ul>
<li>146 x 170 x 80 cm</li>
<li>120 x 90 x 80 cm</li>
</ul>
</td>
</tr>
<tr>
<th>Weight</th>
<td>100kg</td>
</tr>
<tr>
<th>Shipping to</th>
<td>
<ul>
<li>Germany</li>
<li>France</li>
<li>Italy</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
<div class="price">
€ 499,-
</div>
</body>
</html>