finished up to bootstrap

lectures/lec2/part2/task1.css

@@ -0,0 +1,23 @@
+.main > p:last-child{
+    color:green;
+}
+
+/* 
+<div class="menu">
+    <ol>
+        <li><a href="#">Комбинация селекторов</a></li>
+        <li><a href="#">Селекторы атрибутов</a></li>
+    </ol>
+    <p>CSS селекторы</p>
+</div>
+<div class="main">
+    <h2>Комбинация селекторов</h2>
+    <img src="tree.png">
+    <p> Различают следующие виды селекторов: </p>
+    <ol>
+        <li><a href="#">вложенный селектор;</a></li>
+        <li><a href="#">родительский селектор;</a></li>
+    </ol>
+    <p> Соединение селекторов</p> --- ВОТ ЕГО КРАСИМ!!!
+</div>
+*/

lectures/lec2/part2/task2.css

@@ -0,0 +1,24 @@
+.main li > [href="#"] {
+    color:green
+}
+
+
+/*
+<div class="menu">
+    <ul>
+        <li><a href="a1.html">Комбинация селекторов</a></li>
+        <li><a href="#">Селекторы атрибутов</a></li>
+    </ul>
+    <p>CSS селекторы</p>
+</div>
+<div class="main">
+    <h2>Комбинация селекторов</h2>
+    <img src="tree.png">
+    <p> Различают следующие виды селекторов: </p>
+    <ol>
+        <li><a href="#">вложенный селектор;</a></li>
+        <li><a href="b1.html">родительский селектор;</a></li>
+    </ol>
+    <p> <a href="#"> Соединение селекторов </a></p>
+</div>
+*/

lectures/lec2/part2/task3.css

@@ -0,0 +1,24 @@
+h2, ol >li:nth-child(2) , ol + p{
+    color: green;
+}
+
+
+/* 
+<div class="menu">
+    <ul>
+        <li><a href="a1.html">Комбинация селекторов</a></li>
+        <li><a href="#">Селекторы атрибутов</a></li>
+    </ul>
+</div>
+<div class="main">
+    <h2>Комбинация селекторов</h2> ---  
+    <img src="tree.png">
+    <p> Различают следующие виды селекторов: </p>
+    <ol>
+        <li><a href="#">вложенный селектор;</a></li>
+        <li><a href="#">родительский селектор;</a></li> ---  
+        <li><a href="#">соседний селектор</a></li>
+    </ol>
+    <p> <a href="#"> Соединение селекторов </a></p> ---  
+</div>
+*/

lectures/lec2/part3/task1.css

@@ -0,0 +1,3 @@
+div > a > img{
+    width: 10vw;
+}

lectures/lec2/part3/task2.css

@@ -0,0 +1,8 @@
+div > a > img{
+    width: 10vw;
+    min-width: 170px;
+}
+div > a {
+    min-width: 170px;
+}
+ 

lectures/lec2/part3/task3.css

@@ -0,0 +1,26 @@
+div > a > img{
+    width: 10vw;
+    min-width: 170px;
+}
+div > a {
+    min-width: 170px;
+}
+div {
+    display: flex;
+}
+@media (max-width: 600px) {
+    div {
+        flex-direction: column;
+        align-items: center;
+    }
+    div > a {
+        width: 80vw;
+        max-width: 300px;
+        min-width: 0;
+    }
+    div > a > img {
+        width: 80vw;
+        max-width: 300px;
+        min-width: 0;
+    }
+}

lectures/lec2/part4/task1.html

@@ -0,0 +1,24 @@
+<div class="container">
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+</div>
+
+<style>
+.container {
+    display: flex;
+    flex-wrap: no-wrap;
+    background: LightGreen;
+}
+.container div {
+    min-width: 120px;
+    height: 50px;
+    margin: 5px;
+    border: solid thin green;
+}
+</style>

lectures/lec2/part4/task2.html

@@ -0,0 +1,38 @@
+
+
+<style>
+.pict {
+    display: flex;
+    flex-wrap: nowrap;
+
+    justify-content: center;
+    align-items: center;
+}
+
+.pict a img {
+    min-width:280px;
+    min-height:280px;
+}
+
+@media (max-width: 1000px) {
+    .pict {
+        flex-wrap: wrap;
+    }
+}
+
+@media (max-width: 700px) {
+    .pict {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+</style>
+<hr>
+<div class="pict">
+    <a href="#"><img src="images/image_1.jpg"></a>
+    <a href="#"><img src="images/image_2.jpg"></a>
+    <a href="#"><img src="images/image_3.jpg"></a>
+    <a href="#"><img src="images/image_4.jpg"></a>
+    <a href="#"><img src="images/image_5.jpg"></a>
+</div>
+<hr>

lectures/lec2/part4/task3.html

@@ -0,0 +1,46 @@
+<style>
+    .pict {
+        display: flex;
+        flex-wrap: nowrap;
+
+        justify-content: center;
+        align-items: center;
+    }
+
+    .pict a img {
+        min-width: 280px;
+        min-height: 280px;
+    }
+
+    .big {
+        min-width: 330px;
+        min-height: 330px;
+    }
+
+    @media (max-width: 1000px) {
+        .pict {
+            flex-wrap: wrap;
+        }
+
+        .big {
+            min-width: 280px;
+            min-height: 280px;
+        }
+    }
+
+    @media (max-width: 700px) {
+        .pict {
+            flex-direction: column;
+            align-items: center;
+        }
+    }
+</style>
+<hr>
+<div class="pict">
+    <a href="#"><img src="images/image_1.jpg"></a>
+    <a href="#"><img src="images/image_2.jpg"></a>
+    <a href="#" class="big"><img src="images/image_3.jpg"></a>
+    <a href="#"><img src="images/image_4.jpg"></a>
+    <a href="#"><img src="images/image_5.jpg"></a>
+</div>
+<hr>