School Commit Init

2024-08-31 12:07:21 +03:00
commit 0b130ee18c
2801 changed files with 4720552 additions and 0 deletions
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Lab 2</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <button id="btn-1">First Button</button>
+    <button id="btn-2">Second Button</button>
+</body>
+</html>
@@ -0,0 +1,23 @@
+<!--
+    4. Write a web page which should contain on a row several thumbnail images and above that row should contain a larger image. If the mouse is over a thumbnail image, the larger version of that image should appear above it.
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Lab 2</title>
+    <link rel="stylesheet" type="text/css" href="style2.css">
+</head>
+<body>
+    <div id="thumbnail-images">
+        <img id="img1" src="thumbnail1.jpg">
+        <img id="img2" src="thumbnail2.jpg">
+        <img id="img3" src="thumbnail3.jpg">  
+        <div id="large-image">
+            <img class="large" id="img1" src="thumbnail1.jpg">
+            <img class="large" id="img2" src="thumbnail2.jpg">
+            <img class="large" id="img3" src="thumbnail3.jpg">  
+        </div>  
+    </div>
+</body>
+</html>
@@ -0,0 +1,43 @@
+html body {
+    width: 100%;
+    height: 100vh;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+#btn-1, #btn-2 {
+    margin: 10vh;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+#btn-1 {
+    background-color: palegoldenrod;
+    box-shadow: 2px 2px; 
+    transition: all 0.3s ease;
+}
+
+#btn-1:hover {
+    translate: -2px -2px;
+    box-shadow: 4px 4px;
+}
+
+#btn-2 {
+    background-color: purple;
+    color: white;
+    -webkit-box-shadow: 0 0 10px #111;
+        box-shadow: 0 0 10px #111;
+    transition: all 0.3s ease;
+}
+
+#btn-2:hover {
+    -webkit-box-shadow: 0 0 0px #111;
+        box-shadow: 0 0 0px #111;
+        margin: calc(10vh + 4px) calc(10vh + 4px);
+        padding: calc(20px - 4px) calc(20px - 4px);
+}
@@ -0,0 +1,73 @@
+html body {
+    width: 100%;
+    height: 100vh;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+img{
+    width: 400px;
+    height: 400px;
+}
+#thumbnail-images{
+    display: grid;
+
+
+}
+#thumbnail-images #img1 {
+    grid-row: 2;
+    grid-column: 1;
+}
+
+#thumbnail-images #img2 {
+    grid-row: 2;
+    grid-column: 2;
+}
+
+#thumbnail-images #img3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+#large-image {
+    grid-row: 1;
+    grid-column: 1;
+    grid-column-end: 4;
+    width: 300px;
+    height: 300px;
+    margin: 20px;
+    overflow: hidden;
+}
+
+#large-image .large {
+    width: 300px;
+    height: 300px;
+    display: none;
+}
+
+#thumbnail-images img {
+    width: 100px;
+    height: 100px;
+    
+}
+
+#thumbnail-images img:hover {
+    cursor: pointer;
+}
+
+#img1:hover ~ #large-image #img1 {
+    display: block;
+}
+
+#img2:hover ~ #large-image #img2 {
+    display: block;
+}
+
+#img3:hover ~ #large-image #img3 {
+    display: block;
+}
+