feat: solved 1st stage of the Hyperskill project "Petbook"

Author: sswietoniowski

hyperskill/11_petbook/01/.gitkeep

@@ -0,0 +1,56 @@
+<svg fill="none" height="20" id="facebook" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+            <g id="Facebook - Negative">
+                <path d="M20 10C20 4.47715 15.5229 0 10 0C4.47715 0 0 4.47715 0 10C0 14.9912 3.65684 19.1283 8.4375 19.8785V12.8906H5.89844V10H8.4375V7.79688C8.4375 5.29063 9.93047 3.90625 12.2146 3.90625C13.3084 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1922C11.95 6.5625 11.5625 7.3334 11.5625 8.125V10H14.3359L13.8926 12.8906H11.5625V19.8785C16.3432 19.1283 20 14.9912 20 10Z"
+                      fill="white"
+                      id="Vector"/>
+            </g>
+</svg>
+
+<svg fill="none" height="20" id="twitter" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_84_49)" id="Twitter - Negative">
+                <path d="M6.2918 18.125C13.8371 18.125 17.9652 11.8723 17.9652 6.45158C17.9652 6.2758 17.9613 6.09611 17.9535 5.92033C18.7566 5.33958 19.4496 4.62024 20 3.79611C19.2521 4.12886 18.458 4.34618 17.6449 4.44064C18.5011 3.92745 19.1421 3.12126 19.4492 2.1715C18.6438 2.64883 17.763 2.98554 16.8445 3.16721C16.2257 2.50966 15.4075 2.07429 14.5164 1.92841C13.6253 1.78252 12.711 1.93424 11.9148 2.36011C11.1186 2.78598 10.4848 3.46229 10.1115 4.28446C9.73825 5.10663 9.64619 6.02888 9.84961 6.90861C8.21874 6.82677 6.62328 6.40312 5.16665 5.66511C3.71002 4.92711 2.42474 3.89123 1.39414 2.62463C0.870333 3.52773 0.710047 4.5964 0.945859 5.61344C1.18167 6.63048 1.79589 7.51957 2.66367 8.10002C2.01219 8.07933 1.37498 7.90393 0.804688 7.5883V7.63908C0.804104 8.58682 1.13175 9.50552 1.73192 10.239C2.3321 10.9725 3.16777 11.4755 4.09687 11.6625C3.49338 11.8276 2.85999 11.8517 2.2457 11.7328C2.50788 12.5479 3.01798 13.2608 3.70481 13.772C4.39164 14.2832 5.22093 14.5672 6.07695 14.5844C4.62369 15.726 2.82848 16.3451 0.980469 16.3422C0.652739 16.3417 0.325333 16.3216 0 16.2821C1.87738 17.4865 4.06128 18.1262 6.2918 18.125Z"
+                      fill="white"
+                      id="Vector"/>
+            </g>
+            <defs>
+                <clipPath id="clip0_84_49">
+                    <rect fill="white" height="20" width="20"/>
+                </clipPath>
+            </defs>
+</svg>
+
+<svg fill="none" height="20" id="instagram" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+            <g id="Instagram - Negative">
+                <g id="Group">
+                    <path d="M10 1.80078C12.6719 1.80078 12.9883 1.8125 14.0391 1.85937C15.0156 1.90234 15.543 2.06641 15.8945 2.20313C16.3594 2.38281 16.6953 2.60156 17.043 2.94922C17.3945 3.30078 17.6094 3.63281 17.7891 4.09766C17.9258 4.44922 18.0898 4.98047 18.1328 5.95312C18.1797 7.00781 18.1914 7.32422 18.1914 9.99219C18.1914 12.6641 18.1797 12.9805 18.1328 14.0313C18.0898 15.0078 17.9258 15.5352 17.7891 15.8867C17.6094 16.3516 17.3906 16.6875 17.043 17.0352C16.6914 17.3867 16.3594 17.6016 15.8945 17.7813C15.543 17.918 15.0117 18.082 14.0391 18.125C12.9844 18.1719 12.668 18.1836 10 18.1836C7.32813 18.1836 7.01172 18.1719 5.96094 18.125C4.98438 18.082 4.45703 17.918 4.10547 17.7813C3.64063 17.6016 3.30469 17.3828 2.95703 17.0352C2.60547 16.6836 2.39063 16.3516 2.21094 15.8867C2.07422 15.5352 1.91016 15.0039 1.86719 14.0313C1.82031 12.9766 1.80859 12.6602 1.80859 9.99219C1.80859 7.32031 1.82031 7.00391 1.86719 5.95312C1.91016 4.97656 2.07422 4.44922 2.21094 4.09766C2.39063 3.63281 2.60938 3.29688 2.95703 2.94922C3.30859 2.59766 3.64063 2.38281 4.10547 2.20313C4.45703 2.06641 4.98828 1.90234 5.96094 1.85937C7.01172 1.8125 7.32813 1.80078 10 1.80078ZM10 0C7.28516 0 6.94531 0.0117187 5.87891 0.0585938C4.81641 0.105469 4.08594 0.277344 3.45313 0.523438C2.79297 0.78125 2.23438 1.12109 1.67969 1.67969C1.12109 2.23438 0.78125 2.79297 0.523438 3.44922C0.277344 4.08594 0.105469 4.8125 0.0585938 5.875C0.0117188 6.94531 0 7.28516 0 10C0 12.7148 0.0117188 13.0547 0.0585938 14.1211C0.105469 15.1836 0.277344 15.9141 0.523438 16.5469C0.78125 17.207 1.12109 17.7656 1.67969 18.3203C2.23438 18.875 2.79297 19.2188 3.44922 19.4727C4.08594 19.7188 4.8125 19.8906 5.875 19.9375C6.94141 19.9844 7.28125 19.9961 9.99609 19.9961C12.7109 19.9961 13.0508 19.9844 14.1172 19.9375C15.1797 19.8906 15.9102 19.7188 16.543 19.4727C17.1992 19.2188 17.7578 18.875 18.3125 18.3203C18.8672 17.7656 19.2109 17.207 19.4648 16.5508C19.7109 15.9141 19.8828 15.1875 19.9297 14.125C19.9766 13.0586 19.9883 12.7188 19.9883 10.0039C19.9883 7.28906 19.9766 6.94922 19.9297 5.88281C19.8828 4.82031 19.7109 4.08984 19.4648 3.45703C19.2188 2.79297 18.8789 2.23438 18.3203 1.67969C17.7656 1.125 17.207 0.78125 16.5508 0.527344C15.9141 0.28125 15.1875 0.109375 14.125 0.0625C13.0547 0.0117188 12.7148 0 10 0Z"
+                          fill="white"
+                          id="Vector"/>
+                    <path d="M10 4.86328C7.16406 4.86328 4.86328 7.16406 4.86328 10C4.86328 12.8359 7.16406 15.1367 10 15.1367C12.8359 15.1367 15.1367 12.8359 15.1367 10C15.1367 7.16406 12.8359 4.86328 10 4.86328ZM10 13.332C8.16016 13.332 6.66797 11.8398 6.66797 10C6.66797 8.16016 8.16016 6.66797 10 6.66797C11.8398 6.66797 13.332 8.16016 13.332 10C13.332 11.8398 11.8398 13.332 10 13.332Z"
+                          fill="white"
+                          id="Vector_2"/>
+                    <path d="M16.5391 4.66013C16.5391 5.32419 16 5.85935 15.3398 5.85935C14.6758 5.85935 14.1406 5.32028 14.1406 4.66013C14.1406 3.99606 14.6797 3.46091 15.3398 3.46091C16 3.46091 16.5391 3.99997 16.5391 4.66013Z"
+                          fill="white"
+                          id="Vector_3"/>
+                </g>
+            </g>
+</svg>
+
+<svg fill="none" height="20" id="youtube" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+            <g id="YouTube - Negative">
+                <g id="Lozenge">
+                    <path d="M19.8008 6.00003C19.8008 6.00003 19.6055 4.62112 19.0039 4.01566C18.2422 3.21878 17.3906 3.21487 17 3.168C14.2031 2.96487 10.0039 2.96487 10.0039 2.96487H9.99609C9.99609 2.96487 5.79688 2.96487 3 3.168C2.60938 3.21487 1.75781 3.21878 0.996094 4.01566C0.394531 4.62112 0.203125 6.00003 0.203125 6.00003C0.203125 6.00003 0 7.62112 0 9.23831V10.7539C0 12.3711 0.199219 13.9922 0.199219 13.9922C0.199219 13.9922 0.394531 15.3711 0.992187 15.9766C1.75391 16.7735 2.75391 16.7461 3.19922 16.8321C4.80078 16.9844 10 17.0313 10 17.0313C10 17.0313 14.2031 17.0235 17 16.8242C17.3906 16.7774 18.2422 16.7735 19.0039 15.9766C19.6055 15.3711 19.8008 13.9922 19.8008 13.9922C19.8008 13.9922 20 12.375 20 10.7539V9.23831C20 7.62112 19.8008 6.00003 19.8008 6.00003ZM7.93359 12.5938V6.97269L13.3359 9.793L7.93359 12.5938Z"
+                          fill="white"
+                          id="Vector"/>
+                </g>
+            </g>
+</svg>
+
+<svg fill="none" height="20" id="pinterest" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+            <g id="Pinterest - Negative">
+                <g id="Group">
+                    <path d="M10 0C4.47656 0 0 4.47656 0 10C0 14.2383 2.63672 17.8555 6.35547 19.3125C6.26953 18.5195 6.1875 17.3086 6.39062 16.4453C6.57422 15.6641 7.5625 11.4766 7.5625 11.4766C7.5625 11.4766 7.26172 10.8789 7.26172 9.99219C7.26172 8.60156 8.06641 7.5625 9.07031 7.5625C9.92187 7.5625 10.3359 8.20312 10.3359 8.97266C10.3359 9.83203 9.78906 11.1133 9.50781 12.3008C9.27344 13.2969 10.0078 14.1094 10.9883 14.1094C12.7656 14.1094 14.1328 12.2344 14.1328 9.53125C14.1328 7.13672 12.4141 5.46094 9.95703 5.46094C7.11328 5.46094 5.44141 7.59375 5.44141 9.80078C5.44141 10.6602 5.77344 11.582 6.1875 12.082C6.26953 12.1797 6.28125 12.2695 6.25781 12.3672C6.18359 12.6836 6.01172 13.3633 5.98047 13.5C5.9375 13.6836 5.83594 13.7227 5.64453 13.6328C4.39453 13.0508 3.61328 11.2266 3.61328 9.75781C3.61328 6.60156 5.90625 3.70703 10.2188 3.70703C13.6875 3.70703 16.3828 6.17969 16.3828 9.48438C16.3828 12.9297 14.2109 15.7031 11.1953 15.7031C10.1836 15.7031 9.23047 15.1758 8.90234 14.5547C8.90234 14.5547 8.40234 16.4648 8.28125 16.9336C8.05469 17.8008 7.44531 18.8906 7.03906 19.5547C7.97656 19.8438 8.96875 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0Z"
+                          fill="white"
+                          id="Vector"/>
+                </g>
+            </g>
+</svg>

hyperskill/11_petbook/01/assets/footer/socials.txt

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Petbook</title>
+</head>
+<body>
+
+</body>
+</html>

hyperskill/11_petbook/01/assets/friends/brazil.png

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Petbook</title>
+    <link rel="stylesheet" href="site.css">
+</head>
+<body>
+<header id="navbar">
+    <nav></nav>
+</header>
+<main id="profile">
+    <aside id="profile-card">
+    </aside>
+    <section id="description">
+    </section>
+</main>
+<footer id="footer"></footer>
+</body>
+</html>

hyperskill/11_petbook/01/assets/friends/china.png

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Petbook</title>
+</head>
+<body>
+
+</body>
+</html>

hyperskill/11_petbook/01/assets/friends/egypt.png

@@ -0,0 +1,58 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #ffffff;
+    color: #000000;
+    width: 1200px;
+    height: 700px;
+    margin: 0 auto;
+    padding: 0;
+}
+
+#navbar {
+    background-color: rgb(58, 172, 255);
+    color: #ffffff;
+    height: 50px;
+    width: 100%;
+}
+
+#profile {
+    background-color: #ffffff;
+    color: #000000;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+}
+
+#profile #profile-card {
+    background-color: rgb(171, 219, 255);
+    height: 100%;
+    width: 400px;
+    padding-right: 20px;
+    border-radius: 24px;
+    box-shadow: rgba(0, 0, 0, 0.25) 0 5px 5px 0;
+}
+
+#profile #description {
+    background-color: rgba(171, 219, 255, 0.5);
+    height:100%;
+    width: 100%;
+    border-radius: 24px;
+    box-shadow: rgba(0, 0, 0, 0.25) 0 5px 5px 0;
+}
+
+#footer {
+    background-color: rgb(58, 172, 255);
+    color: #ffffff;
+    height: 50px;
+    width: 100%;
+}