<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wireframe Layout (Div Edition)</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<div class="header-area">
<div class="nav-bar">
<div class="nav-link-box">Home</div>
<div class="nav-link-box">Services</div>
<div class="nav-link-box">About</div>
</div>
</div>
<div class="main-content-flex">
<div class="column-left">
<div class="content-box large-square"></div>
</div>
<div class="column-right">
<div class="content-box top-rectangle"></div>
<div class="content-box bottom-box-wrapper">
<div class="circle"></div>
</div>
</div>
</div>
<div class="footer-area">
Thank you for today
</div>
</div>
</body>
</html>
/* --- Global Styles & Colors --- */
:root {
--border-color: #c9a9c9; /* Pale Pink for Borders */
--fill-color: #f7ffe0; /* Light Yellow/Green Fill */
--text-color: #8c738c; /* Faded Text Color */
--border-thickness: 3px;
--layout-padding: 20px;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
.container {
width: 90%;
max-width: 800px;
margin: 40px auto;
background-color: var(--fill-color);
padding: var(--layout-padding);
}
/* --- Header & Navigation --- */
.header-area {
margin-bottom: var(--layout-padding);
}
.nav-bar {
display: flex;
justify-content: flex-end; /* Pushes the boxes to the right */
gap: 15px;
color: var(--text-color);
margin-bottom: 20px;
}
.nav-link-box {
color: var(--text-color);
padding: 5px 10px;
border: var(--border-thickness) solid var(--border-color);
/* Simulate the look of the links in the image */
border-top: none;
border-left: none;
border-right: none;
text-align: center;
}
/* --- Main Content Layout (Flexbox for Columns) --- */
.main-content-flex {
display: flex;
gap: var(--layout-padding); /* Space between the two main columns */
}
/* LEFT COLUMN - The Large Square */
.column-left {
flex: 2; /* Takes up 2/3 of the space */
min-height: 350px;
}
.large-square {
width: 100%;
height: 100%;
border: var(--border-thickness) solid var(--border-color);
}
/* RIGHT COLUMN - The Two Boxes */
.column-right {
flex: 1; /* Takes up 1/3 of the space */
display: flex;
flex-direction: column; /* Stacks the two right boxes vertically */
gap: var(--layout-padding);
}
.top-rectangle {
height: 80px; /* Shorter box */
border: var(--border-thickness) solid var(--border-color);
}
.bottom-box-wrapper {
flex-grow: 1; /* Takes up the remaining vertical space */
border: var(--border-thickness) solid var(--border-color);
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%; /* Makes it a circle */
background-color: var(--border-color);
}
/* --- Footer --- */
.footer-area {
text-align: center;
margin-top: var(--layout-padding);
padding-top: var(--layout-padding);
font-size: 0.9em;
color: var(--text-color);
}