From 6928e5cd80e934b272f46a6771314e12089151f2 Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Mon, 20 Mar 2023 17:14:04 +0300
Subject: [PATCH] Add files via upload

---
 .../index.html                                | 23 ++++++++
 .../style.css                                 | 52 +++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 100_projects/27-fill-element-background-from-other/index.html
 create mode 100644 100_projects/27-fill-element-background-from-other/style.css
diff --git a/100_projects/27-fill-element-background-from-other/index.html b/100_projects/27-fill-element-background-from-other/index.html
new file mode 100644
index 0000000..abee3f2
--- /dev/null
+++ b/100_projects/27-fill-element-background-from-other/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+  <div class="product">
+    <div class="number">01</div>
+    <h3>Product Title</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      Expedita tenetur accusantium recusandae perspiciatis
+      laborum. Aspernatur optio itaque accusamus ex molestiae dolorem,
+      quas qui illo similique fugit unde error sit
+      ipsa.
+    </p>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/100_projects/27-fill-element-background-from-other/style.css b/100_projects/27-fill-element-background-from-other/style.css
new file mode 100644
index 0000000..7633b37
--- /dev/null
+++ b/100_projects/27-fill-element-background-from-other/style.css
@@ -0,0 +1,52 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.product {
+  width: 325px;
+  margin: 20px auto;
+  box-shadow: 0 0 30px #ddd;
+  padding: 20px;
+  text-align: center;
+  overflow: hidden;
+  border-radius: 5px;
+}
+.product .number {
+  background-color: #DB7093;
+  color: #fff;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  font-size: 26px;
+  transition: 1.5s;
+  border: 1px solid #fff;
+}
+.product h3 {
+  margin: 15px 0;
+  font-size: 26px;
+  transition: 0.6s;
+}
+.product p {
+  line-height: 1.6;
+  transition: 0.6s;
+  font-size: 18px;
+}
+.product:hover .number {
+  box-shadow: 0 0 0 500px #DB7093;
+}
+.product:hover h3,
+.product:hover p {
+  color: white;
+}
\ No newline at end of file
