diff --git a/frontend/assets/girl_juice.png b/frontend/assets/girl_juice.png
new file mode 100644
index 0000000..e40d62f
Binary files /dev/null and b/frontend/assets/girl_juice.png differ
diff --git a/frontend/assets/style.css b/frontend/assets/style.css
index b70e2e9..fe72350 100644
--- a/frontend/assets/style.css
+++ b/frontend/assets/style.css
@@ -1,38 +1,56 @@
-body {
- background-color: black;
-
+* {
box-sizing: border-box;
+}
+
+body {
margin: 0;
height: 100vh;
padding: 5em;
+ padding-left: auto;
+ padding-right: auto;
+ background-color: pink;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-#main-grid {
- width: 100%;
- height: 100%;
+.search-grid {
+ margin-top: -10em;
+
+ width: 40em;
+ height: 30em;
display: grid;
- gap: 2em;
+ gap: 5em;
- grid-template-rows: 2.5em auto;
+ grid-template-rows: 10em 4em;
}
-#search {
+.search {
+ grid-row: 2;
grid-column: 1 / span 2;
}
-#left {
- grid-column: 1;
+.search-logo {
+ grid-row: 1;
+ height: 100%;
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+
+ color: black;
}
-#right {
- grid-column: 2;
+.search-logo img {
+ height: 100%;
}
.grid-item {
- background-color: rgba(255, 192, 203, 1);
- border: 1px solid blueviolet;
+ background-color: lightblue;
padding: 1em;
border-radius: .5em;
diff --git a/frontend/index.html b/frontend/index.html
index a61d67e..83fcf60 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,11 +8,13 @@
-
-
-
-
Hellow
-
World
+
+
+
+
GirlJuice.Inject()
+
+
+