Merge branch 'main' into a11y

fac31 · Mar 30, 2024 · 4806100 · 4806100
2 parents 4b66c70 + eca8a67
commit 4806100
Show file tree

Hide file tree

Showing 20 changed files with 149 additions and 161 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/aboutus.html b/aboutus.html
@@ -7,13 +7,16 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
-    <link rel="stylesheet" href="/asset/css/styles.css" />
+    <link rel="stylesheet" href="/assets/css/styles.css" />
     <title>About Agency AR</title>
   </head>
 
-  <body>
+  <body class="background-main">
     <header>
-      <button onclick="location.href='index.html'">
+      <button
+        onclick="location.href='index.html'"
+        class="text-button-icon-right"
+      >
         <span class="material-symbols-rounded"> arrow_back </span>Back
       </button>
     </header>
@@ -36,7 +39,7 @@ <h2>Get to know us more!</h2>
           <br />
           modi expedita inventore quasi similique iste harum!
         </p>
-        <button>
+        <button class="contatined-button-accent">
           <span class="material-symbols-rounded"> arrow_right_alt </span>Learn
           More
         </button>

diff --git a/asset/.DS_Store → assets/.DS_Store b/asset/.DS_Store → assets/.DS_Store
diff --git a/asset/css/cards.css → assets/css/cards.css b/asset/css/cards.css → assets/css/cards.css
@@ -4,7 +4,7 @@
 	border-radius: 8px;
   padding: 16px;
   text-align: left;
-	color: black;
+	color: var(--primary-color);
 	max-width: 1000px;
 }
 
@@ -21,28 +21,31 @@
   margin: 16px;
   text-align: left;
   max-width: 200px;
-	color: black;
+	color: var(--primary-color);
 }
 
-.card-small img {
+.card-large {
+	color: var(--primary-color);
+	background-color: var(--secondary-color);
+	border-radius: 8px;
+	padding: 36px;
+	max-width: 400px;
+	margin-left: 20%;
+}
+
+
+/* how images display in cards */
+.card-small img{
   width: 200px;
   height: 250px;
 	object-fit: contain;
   border-radius: 4px;
   margin-bottom: 16px;
 }
 
-.image-card {
+.image-card-large {
   border-radius: 8px;
   text-align: center;
 	max-width: 400px;
-	color: black;
-}
-
-.image-card-gallery {
-	border-radius: 8px;
-  width: 400px;
-  height: 400px;
-	padding: 24px;
-	object-fit: contain;
+	color: var(--primary-color);
 }
diff --git a/asset/css/inputs.css → assets/css/inputs.css b/asset/css/inputs.css → assets/css/inputs.css
@@ -3,45 +3,63 @@
   margin-right: 24px;
 }
 
+.material-symbols-rounded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
 button {
   border: none;
+	margin-left: 8px;
   padding: 12px 20px;
-  border-radius: 5px;
+  border-radius: 4px;
   cursor: pointer;
   font-weight: bold;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   font-size: 16px;
   line-height: 1;
 }
 
 .nav-buttons {
+	display: inline;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.material-symbols-rounded {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  margin-right: 8px;
-  vertical-align: middle;
+.text-button-icon-right {
+  background: transparent;
+  color: var(--secondary-color);
 }
 
-header button:nth-of-type(1) {
-  background: transparent;
-  color: white;
+.contatined-button-white {
+	background: var(--secondary-color);
+	color: var(--primary-color);
 }
 
-header button:nth-of-type(2) {
-	background: white;
-	color: black;
+.contatined-button-accent {
+	background-color: var(--accent-color);
+	color: var(--primary-color);
 }
 
+/* these are form about us */
+/* I do not know why it is not picking up the text colour*/
+.text-container button {
+  margin-top: 20px;
+}
+
+#about button {
+  background-color: var(--accent-color);
+  color: var(--primary-color); 
+}
 
+
+/* contact */
 .contact .form-group {
 	display: flex;
 	flex-direction: column;
@@ -55,24 +73,24 @@ label {
 input[type="text"], input[type="email"], textarea {
 	background-color: transparent;
 	border: none;
-	border-bottom: 1px solid black;
+	border-bottom: 1px solid var(--primary-color);
 	margin-bottom: 8px;
 	width: 100%;
 	box-sizing: border-box;
 }
 
 input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
 	outline: none;
-	border-bottom: 2px solid black;
+	border-bottom: 2px solid var(--primary-color);
 }
 
 textarea {
-	border-bottom: 1px solid black;
+	border-bottom: 1px solid var(--primary-color);
 	border-radius: 2px;
 }
 
 .checkbox-label {
-	color: rgb(96, 96, 96);
+	color: var;
 	font-size: 14px;
 	font-weight: 400;
 }
@@ -91,3 +109,5 @@ form * + * {
 	flex-direction: column;
 	align-items:left;
 }
+
+