diff --git a/css/general.css b/css/general.css
index 53a227d..c115945 100644
--- a/css/general.css
+++ b/css/general.css
@@ -26,12 +26,20 @@ nav {
nav * {
padding: 0;
- margin: 2px 5px;
+ margin: 0px 5px;
list-style: none;
box-sizing: border-box;
z-index: 100;
}
+#nav-logo {
+ margin-top: 5px;
+}
+
+#nav-logo-a {
+ position: relative;
+}
+
nav ul {
float: right;
margin-right: 20px;
@@ -78,36 +86,126 @@ nav li a:focus::after{
}
.checkbtn {
- font-size: 30px;
+ font-size: 23px;
color: white;
float: right;
- line-height: 60px;
+ line-height: 59px;
margin-right: 20px;
cursor: pointer;
display: none;
+
}
#check {
display: none;
}
+#nav-links-container {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ height: 59px;
+ float: right;
+ flex-wrap: nowrap;
+ flex-direction: row-reverse;
+ align-content: stretch;
+}
+
#sign-up {
- padding: 3px 5px;
+ padding: 3px 7px;
+ margin: 14px 7px 14px 5px;
+
border-radius: 5px;
- line-height: 30px;
+ font-size: 16px;
background-color: rgb(140, 42, 165);
color: bisque;
+ display: flex;
+ place-items: center;
}
#sign-up:hover {
background-color: blueviolet;
transition: 0.5s;
cursor: pointer;
- padding: 4px 6px;
- margin: 0px 4.5px;
+ padding: 4px 8px;
+ margin: 13px 7px 13px 0;
font-size: 17px;
}
+@media (max-width: 800px) {
+ .checkbtn {
+ display: inline-block;
+ }
+ nav ul {
+ position: fixed;
+ width: 100%;
+ height: 250px;
+ margin-top: 60px;
+ margin-right: 0;
+ background: rgb(24, 24, 24);
+ top: -100%;
+ text-align: center;
+ /*animation: growOut 300ms ease-in-out forwards*/
+ }
+ nav ul li {
+ display: block;
+ margin: 20px 0;
+ line-height: 30px;
+ }
+ #check:checked ~ul {
+ top: 0;
+ }
+ .checkbtn {
+ display: inline-block;
+ }
+ #card-container {
+ grid-template-columns: repeat(1, 1fr) !important;
+ }
+}
+@media (max-width: 500px) {
+ .checkbtn {
+ display: none;
+ }
+}
+
+#spots-container {
+ display: flex;
+ place-items: center;
+}
+
+.blob {
+ background: black;
+ border-radius: 50%;
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
+ margin: 10px 4px;
+ height: 10px;
+ width: 10px;
+ transform: scale(1);
+ animation: pulse-black 2s infinite;
+ position: relative;
+ }
+
+.blob.green {
+ background: rgba(51, 217, 178, 1);
+ box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
+ animation: pulse-green 2s infinite;
+ }
+
+@keyframes pulse-green {
+ 0% {
+ transform: scale(0.95);
+ box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
+ }
+ 70% {
+ transform: scale(1);
+ box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
+ }
+ 100% {
+ transform: scale(0.95);
+ box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
+ }
+ }
+
#header-background {
background-image: none;
background-position: center;
diff --git a/index.html b/index.html
index a751371..62d4ecc 100644
--- a/index.html
+++ b/index.html
@@ -38,29 +38,34 @@
+