Scribd
Upload
11 views2 pages

Message

The document is an HTML page titled 'Uyga vazifa help' that outlines an assignment with various examples of styled rows using CSS. Each row contains colored div elements arranged in flexible layouts to demonstrate different configurations. The document includes sections for provided examples and student TODOs, showcasing various color combinations and layouts.

Uploaded by

k45318001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views2 pages

Message

The document is an HTML page titled 'Uyga vazifa help' that outlines an assignment with various examples of styled rows using CSS. Each row contains colored div elements arranged in flexible layouts to demonstrate different configurations. The document includes sections for provided examples and student TODOs, showcasing various color combinations and layouts.

Uploaded by

k45318001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Uyga vazifa help</title>
</head>
<body>
<h1>Assignment 1</h1>
<h2>Provided Examples</h2>
<div style="width: 500px; margin: 0 auto;">
<div>
<p>Row 1</p>
<div style="display: flex; height: 50px;">
<div style="flex: 1; background-color: red;"></div>
<div style="flex: 1; background-color: blue;"></div>
</div>
</div>
<div>
<p>Row 2</p>
<div style="display: flex; height: 50px; margin-top: 5px;">
<div style="flex: 3; background-color: green;"></div>
<div style="flex: 1; background-color: blue;"></div>
</div>
</div>

<h2>Student TODOs</h2>

<div>
<p>Row 3</p>
<div style="display: flex; height: 50px; margin-top: 5px;">
<div style="flex: 1; background-color: red;"></div>
<div style="flex: 3; background-color: green;"></div>
<div style="flex: 1; background-color: blue;"></div>
</div>
</div>
<!-- Row 4 -->
<div>
<p>Row 4</p>
<div style="display: flex; height: 50px; margin-top: 5px;">
<div style="flex: 8; background-color: red;"></div>
<div style="flex: 2; background-color: blue;"></div>
</div>
</div>
<!-- Row 5 -->
<div>
<p>Row 5</p>
<div style="height:50px;width:100%;background-color:green">
<div style="background-color:red; width:8%; height:80%; margin-
left:46%;margin-top:10%;"></div>
</div>
</div>
<!-- Row 6 -->
<div>
<p>Row 6</p>
<div style="display: flex; height: 50px; margin-top: 5px;">
<div style="flex: 4.2; background-color: red;"></div>
<div style="flex: 1.6; background-color: blue;"></div>
<div style="flex: 4.2; background-color: red;"></div>
</div>
</div>
<!-- Row 7 -->
<div>
<p>Row 7</p>
<div style="display:flex;">
<div style="background-color:red;width:10%;height:50px;"></div>
<div style="background-color:blue;width:90%;height:50px;">
<div style="background-color:green;width:100%;height:33%;margin-
top:16px"></div>
</div>
</div>
</div>

</div>
<!-- Row 8 -->
<div>
<p>Row 8</p>
<div style="display:flex;width:500px;height:50px;">

<div style="width:15%;:height:100%;background-color:yellow"></div>
<div style="width:7%;height:100%;background-color:green"></div>
<div style="width:15%;height:100%;background-color:yellow"></div>
<div style="width:7%;height:100%;background-color:green"></div>
<div style="width:15%;height:100%;background-color:yellow"></div>
<div style="width:7%;height:100%;background-color:green"></div>
<div style="width:15%;height:100%;background-color:yellow"></div>
<div style="width:7%;height:100%;background-color:green"></div>
<div style="width:15%;height:100%;background-color:yellow"></div>
</div>
<!-- Row 9 -->
<div>
<p>Row 9</p>
<div style="display:flex;width:500px;height:50px;">

<div style="width:15%;:height:100%;background-color:yellow"></div>
<div style="width:7%;height:100%;background-color:green"></div>
<div style="width:15%;height:100%;background-color:yellow"></div>
<div style="width:7%;height:100%;background-color:green"></div>
<div style="width:15%;height:100%;background-color:yellow"></div>
<div style="width:7%;height:100%;background-color:green"></div>
<div style="width:15%;height:100%;background-color:yellow"></div>
<div style="width:7%;height:100%;background-color:green"></div>
<div style="width:15%;height:100%;background-color:yellow"></div>
</div>
</div>
</body>
</html>

You might also like