styled shopping-list app

met18001 · Feb 17, 2020 · eb45147 · eb45147
1 parent 07be3ba
commit eb45147
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 2 deletions.
diff --git a/week-4/css/firestore.css b/week-4/css/firestore.css
@@ -0,0 +1,86 @@
+body{
+    background-color: hsla(156, 90%, 77%, 0.76)
+    ;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+    -webkit-box-pack: center;
+            justify-content: center;
+    -webkit-box-align: center;
+            align-items: center;
+            font-family: 'Amatic SC', cursive;
+            margin-top: 15%;
+}
+
+h1{
+    text-align: center;
+}
+#shoppingForm{
+
+}
+#add{
+    font-family: 'Amatic SC', cursive;
+    border-radius: 25px;
+    font-size: 35px;
+    background-color: hsla(161, 57%, 40%, 0.53);
+    padding: 10px;
+    border: 1px solid #ccc;
+}
+#item{
+    padding: 10px;
+    border-radius: 25px;
+    font-family: 'Amatic SC', cursive;
+    font-size: 35px;
+}
+html{
+    -webkit-box-align: center;
+            align-items: center;
+}
+#shopping-list{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+     align-items: flex-start;
+     -webkit-box-orient: vertical;
+     -webkit-box-direction: normal;
+             flex-direction: column;
+}
+#shopping-list span{
+ padding-right: 20px;
+ padding-left: 20px;
+}
+span .spanyo{
+    font-family: 'Amatic SC', cursive;
+    padding-right: 10%;
+
+}
+ul, li{
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    font-size: 25px;
+    display: -webkit-box;
+    display: flex;
+    font-size: 30px;
+    font-family: 'Amatic SC', cursive;
+
+}
+a{
+    text-decoration: none;
+    font-size: 30px;
+    color: black;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+a:hover{
+    border-radius: 25px;
+    background-color: hsla(161, 57%, 40%, 0.53);
+
+}
+li.list-item{
+    padding: 3px;
+}
diff --git a/week-4/firestore.html b/week-4/firestore.html
@@ -4,19 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="css/firestore.css">
+    <link href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700&display=swap" rel="stylesheet">
     <title>My Shopping List App</title>
     <style>
         #item {
             border: 1px solid #ccc;
-            font-size: 16px;
         }
         ul, li{
             margin: 0;
             padding: 0;
             list-style-type: none;
         }
         li{
-            padding: .5em 0;
+            padding: .3em 0;
         }
 
         #shopping-list span{