feat: practice2 task 1(B)

task-1-card/card.css

@@ -35,3 +35,73 @@
 */
 
 /* Студент починає звідси */
+* {
+    box-sizing: border-box;
+}
+:root{
+    --acent-shadow-color: goldenrod;
+    --color-border: gray;
+    --acent-text-color: black;
+    --radius: 30px;
+    --pading: 10px;
+    --space: 15px;
+    --text-size:20px;
+}
+body{
+    background-color: #e6e0e0;
+    margin: 50px;
+}
+.card{
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    box-shadow:var(--acent-shadow-color) 0 0 20px;
+    padding: var(--pading);
+    background: white;
+    width:280px;
+    border-spacing: var(--space);
+    flex-direction: column;
+    margin-top: auto;
+    font-size: var(--text-size);
+
+}
+.card:hover{
+    transform:translateY(-2px);
+    transition-duration:200ms;
+}
+.card-image{
+    border-radius: var(--radius);
+    aspect-ratio: auto;
+    object-fit: cover;
+    width: 100%;
+}
+.card-description{
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+button:hover{
+    color: white;
+    background-color: darkred;
+}
+button:focus-visible{
+    outline: none;
+    border: 5px solid #f67352;
+}
+button {
+    transition-duration: 150ms;
+    background-color: var(--acent-shadow-color);
+    color: var(--acent-text-color);
+    font-size: 30px;
+    border-radius: var(--radius);
+    border-width: 20px;
+
+}
+.card-meta{
+    color: gray;
+}
+.card-price{
+    color: blue;
+    font-weight: bold;
+    font-size: var(--text-size);
+}

task-1-card/card.html

@@ -18,13 +18,13 @@
     Варіант C — Картка СТАТТІ
     Варіант D — Картка КУРСУ
   -->
-
+<div style="display: flex; justify-content: center; width: 100%; height: 100%">
   <article class="card">
     <img class="card-image"
-         src="https://via.placeholder.com/280x180/cccccc/666666?text=Image"
-         alt="Зображення для картки">
+         src="https://m.media-amazon.com/images/M/MV5BMTM1NjExNjg1OV5BMl5BanBnXkFtZTcwMTQ0NzIwMw@@._V1_FMjpg_UX1000_.jpg"
+         alt="Зображення Майкла Джексона">
 
-    <h3 class="card-title">Назва товару / профілю / статті</h3>
+    <h3 class="card-title">Майкл Джексон</h3>
 
     <p class="card-meta">
       Допоміжна інформація: автор, дата, тривалість тощо
@@ -40,7 +40,13 @@ <h3 class="card-title">Назва товару / профілю / статті</
     <button class="card-action" type="button">
       Дізнатися більше
     </button>
+    <button style="border-color: deeppink">
+      дізнатися ще більше
+    </button>
+    <button style="border-color: aqua">
+      дізнатися нічого
+    </button>
   </article>
-
+</div>
 </body>
 </html>

task-2-selectors/styles.css

@@ -0,0 +1,45 @@
+input[type="email"] {
+    border: 2px solid blue;
+}
+
+input:focus{
+    outline: 3px solid blue;
+    box-shadow: 5px 5px 10px lightpink;
+}
+
+li:first-child{
+    font-weight: bold;
+}
+
+tbody tr:nth-child(2n){
+    background: #f5f5f5;
+}
+
+p:not(.intro){
+    color: #666;
+}
+blockquote::before{
+    content: "«";
+    color: blue;
+}
+blockquote::after{
+    content: "»";
+    color: blue;
+}
+
+blockquote{
+    border-left: 5px solid blue;
+    padding-left: 10px;
+}
+h2 {
+    color: #3030ef;
+}
+h1{
+    color: #3030ef;
+}
+
+body{
+    box-shadow: #1a1a1a 0 0 15px;
+    border-radius: 30px;
+    padding: 20px;
+}