lab-3 done lower part

2025-10-20 11:03:14 +10:00
parent f17d3fada5
commit b3fd772683
5 changed files with 89 additions and 10 deletions
--- a/index.css
+++ b/index.css
@@ -45,35 +45,32 @@

 .half-size {
    width: 49%;
+    margin: 0.5%;
    float: left;
    text-align: center;
-    /* line-height: 140pt; */
-    margin: 0.5%;
 }

 .quarter-size {
    width: 24%;
-    /* height: 140pt; */
+    margin: 0.5%;
    float: left;
    text-align: center;
-    /* line-height: 140pt; */
-    margin: 0.5%;
 }

 .image-column-container {
    width: 24%;
+    height:100%;
    margin:0.5%;
-    height: 140pt;
    float: left;
+    text-align: center;
+
 }

 .image-column-container > div {
    width: 100%;
-    height: 48%;
-    margin: 1%;
+    height: 49%;
+    margin: 0.5%;
    text-align: center;
-    line-height: 96px;
-    margin-bottom: 4%;
 }

 .images-container img{
--- a/labs/lab2/lab2.css
+++ b/labs/lab2/lab2.css
--- a/labs/lab2/lab2.html
+++ b/labs/lab2/lab2.html
--- a/labs/lab3/lab3.css
+++ b/labs/lab3/lab3.css
@@ -0,0 +1,48 @@
+h3{
+    text-align: center;
+    margin: 2vh;
+}
+
+a{
+    /* display: inline-flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background-color: gray;
+    width: 10%;  это grid!!!*/ 
+}
+
+.content{
+    background-color: lightgreen;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding:10px;
+}
+
+.topic > b{
+    display: block;
+    width: 50%;
+}
+.topic * {
+    display: inline-block;
+}
+.content :first-child b, .content :first-child  a{
+    background-color: lightgreen;
+}
+
+.topic{
+    /* width:calc(50%-10px); */
+    padding:5px 10px;
+    margin: 10px ;
+    background-color: white;
+}
+@media (max-width:700px) {
+    .content{
+        display: flex;
+        flex-direction: column;
+    }
+    .topic{
+        width: calc(100%-20px);
+        /* width:50%; */
+    }
+}
--- a/labs/lab3/lab3.html
+++ b/labs/lab3/lab3.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>
+        Lab 3
+    </title>
+    <link rel="stylesheet" href="./lab3.css">
+</head>
+
+<body>
+    <h3>Языки программирования</h3>
+    <p>
+        <a href="#">Python</a>
+        <a href="#">C</a>
+        <a href="#">Java</a>
+        <a href="#">JavaScript</a>
+    </p>
+    <div class="content">
+        <div class="topic">
+            <b>Python</b> создан в 1989–1991 годах голландским программистом <a href="#"> Гвидо ван Россумом</a>.
+        </div>
+        <div class="topic"> 
+            <b>C</b> разработан в 1969–1973 годах сотрудником Bell Labs <a href="#"> Деннисом Ритчи</a>.
+        </div>
+        <div class="topic">
+            <b>Java</b> разработан в 1990–1996 годах канадским программистом <a href="#"> Джеймсом Гослингом</a>.
+        </div>
+        <div class="topic">
+            <b>JavaScript</b> разработан в 1996 году, автор - американский программист <a href="#">Брендан Айк</a>.
+        </div>
+    </div>
+</body>