#3 CSS and HTML

django_web_galleries/web_galleries/static/web-galleries.css

@@ -0,0 +1,74 @@
+.RV-Header {
+    height: 80px;
+    margin-bottom: 70px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    border-bottom: 1px solid gray;
+}
+
+.RV-Navigation__list {
+    display: flex;
+    flex-direction: row;
+
+    list-style-type: none;
+    gap: 1em;
+
+    font-size: 22px;
+}
+
+.RV-Navigation__link {
+    text-decoration: none;
+    display: inline-block;
+    transition: transform 300ms ease-in-out;
+}
+
+.RV-Navigation__link:hover {
+    transform: scale(1.2);
+}
+
+.RV-Images__list {
+    list-style-type: none;
+    display: grid;
+    gap: 22px;
+
+    grid-template-columns: repeat(auto-fit, 200px);
+}
+
+.RV-Image__link {
+    transition: transform 300ms ease-in-out;
+}
+
+.RV-Image__link:hover {
+    transform: scale(1.1);
+}
+
+.RV-Fieldset {
+    margin: 50px 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.RV-Input {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.RV-Input--compact {
+    flex-direction: row;
+}
+
+.RV-Input.RV-Input--reverse {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+}
+
+.RV-Input--compact.RV-Input--reverse {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}