done with index.html and contact.html but still need responsiveness with bigger screens

diff --git a/contact.html b/contact.html
index b9b6c84fcde8a16570f2be01d5bdbfe3e0c2dc5c..db726007a9cab62d92f5e7deadf1bf97f2406a9a 100644 (file)
--- a/contact.html
+++ b/contact.html
@@ -120,7 +120,53 @@
 
 
   <main>
-    <p>hello</p>
+    <section class="form-container">
+      <h1 class="contact-form">Contact Form</h1>
+      <form action="form-submit.php" method="POST" class="form">
+          <label for="name">First Name</label>
+          <input type="text"
+                 id="fname" 
+                 name="name"
+                 maxlength="20"
+                 placeholder="Your name here..." 
+                 autocomplete="off"
+                 tabindex="0"
+                 required>
+          <label for="name">Last Name (optional)</label>
+          <input type="text"
+                 id="lname"
+                 name="name"
+                 maxlength="20"
+                 placeholder="Your last name..."
+                 autocomplete="off">
+          <label for="email">Your Email</label>
+          <input type="email"
+                 id="email" 
+                 name="email"
+                 placeholder="email@example.com"
+                 autocomplete="off"
+                 pattern="^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$"
+                 required>
+          <label for="name">Subject</label>
+          <input type="text"
+                 id="subject" 
+                 name="subject"
+                 maxlength="20"
+                 placeholder="What is it about..." 
+                 tabindex="0"
+                 required>
+          <label for="subject">Message</label>
+          <textarea id="message"
+                    name="message"
+                    maxlength="250"
+                    placeholder="Write something here..."
+                    required></textarea>
+          <span class="form-privacy-notice">By clicking the submit button, you agree to the <a href="privacy-policy.html" class="privacy-notice-link">Privacy Policy</a></span>
+          <button type="submit"
+                  class="contact-submit-btn"
+                  aria-label="submit the form">Submit</button>
+      </form>
+    </section>
   </main>
 
 

diff --git a/css/styles.css b/css/styles.css
index d2440353c92d6c1eed7674df7aa695c605864210..65b1afe6d8ef3d5d60885733eff6f516fd15b70b 100644 (file)
--- a/css/styles.css
+++ b/css/styles.css
@@ -5,14 +5,15 @@
   --linkcolor: #fff;
   --linkhover1: #fff;
   --linkhover2: #acacac;
-  --linkhover3: #13a013;
+  --linkhover3: #0060df;
+  --linkhover4: #4680cc;
   --barcolor: #fff;
   --textcolor1: #fff;
   --textcolor2: #c2c2c2;
   --textcolor3: #727272;
-  --textcolor4: #13a013;
+  --textcolor4: #0060df;
   --textcolor5: #000;
-  --currentpageindicator: #13a013;
+  --currentpageindicator: #0060df;
 }
 *,
 ::before,
@@ -30,7 +31,6 @@ body {
   display: flex;
   flex-direction: column;
   color: var(--textcolor1);
-  height: 1000rem;
   background-color: #0e0e0d;
 }
 header {
@@ -44,6 +44,7 @@ header {
   justify-content: space-between;
   align-items: center;
   padding: 0 2rem;
+  border-bottom: 1px solid gray;
   z-index: 1;
 }
 .logo {
@@ -76,7 +77,7 @@ header {
 }
 .nav-menu.active {
   pointer-events: unset;
-  opacity: 0.97;
+  opacity: 1;
 }
 .nav-title {
   font-size: 2.4rem;
@@ -183,14 +184,14 @@ section {
   height: 100vh;
 }
 .bg-1 {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url(/assets/images/static/background-cover-1.jpg);
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url(/assets/images/static/background-cover-1.jpg);
 }
 .background-cover {
   background-position: center;
   background-size: cover;
   height: 100%;
   width: 100%;
-  filter: blur(1px) brightness(50%) contrast(90%);
+  filter: blur(0.5px) brightness(70%) contrast(90%);
   pointer-events: none;
   user-select: none;
 }
@@ -212,6 +213,9 @@ section {
 
 
 /* LINK CARDS */
+.cards {
+  height: auto;
+}
 .crd-link {
   display: flex;
   justify-content: center;
@@ -250,7 +254,7 @@ section {
   font-size: 1.7rem;
   width: 100%;
 }
-.fa-arrow-right {
+.crd-arrow {
   font-size: 5rem;
   position: absolute;
   bottom: 0;
@@ -263,19 +267,138 @@ section {
   filter: drop-shadow( 1px 1px 2px #000);
 }
 .crd-1 {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url(/assets/images/static/crd-cover-1.jpg);
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url(/assets/images/static/crd-cover-1.jpg);
 }
 .crd-2 {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)), url(/assets/images/static/crd-cover-2.jpeg);
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)), url(/assets/images/static/crd-cover-2.jpeg);
+}
+
+
+
+/* QUESTIONS? */
+.questions {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 20rem auto;
+  height: auto;
+}
+.got-q {
+  font-family: 'Amatic SC', serif;
+  font-size: 4rem;
+  transition: transform 0.2s ease-in-out;
+  cursor: help;
+}
+.got-q:hover {
+  transform: rotate(7deg);
+}
+.q-link {
+  text-decoration: none;
+}
+.q-link:hover {
+  text-decoration: none;
+  word-spacing: 1rem;
+}
+.got-ans {
+  font-size: 3rem;
+  transition: 0.2s ease-in-out;
+  color: var(--linkcolor);
+}
+.q-arrow {
+  margin-bottom: -0.3rem;
+  transition: 0.2s ease-in-out;
+  color: var(--linkhover3);
 }
 
 
+
+/* FOOTER */
 footer {
-  margin-top: auto;
-  background-color: var(--mainbg2);
-  height: 1rem;
+  margin-top: 7rem;
+  border-top: 1px solid gray;
+  font-size: 1.4rem;
+  background-color: var(--mainbg1);
+  height: 5rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.logo-sml {
+  font-family: 'Amatic SC', serif;
+  font-weight: 700;
+  font-size: 2rem;
+}
+
+
+
+/* CONTACT.HTML */
+.form-container {
+  margin-top: 7rem;
+  padding: 2rem;
+}
+.contact-form {
+  font-family: 'Amatic SC', serif;
+  font-size: 4rem;
+  padding-left: 1.7rem;
+  margin-bottom: 1rem;
+}
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.7rem;
+  border: 0.1rem solid white;
+  border-radius: 1rem;
+  max-width: 60rem;
+}
+label,
+input,
+textarea {
+  display: inline-block;
+  width: 100%;
+}
+input,
+textarea {
+  font-family: 'Pangolin', serif;
+  font-size: 1.7rem;
+  padding: 0.4rem;
+}
+label {
+  font-size: 2rem;
+  margin-top: 1rem;
+}
+textarea {
+  resize: none;
+  height: 17rem;
+}
+.contact-submit-btn {
+  font-size: 1.7rem;
+  padding: 0.4rem;
+  margin-top: 1.4rem;
   width: 100%;
+  transition: 0.1s ease-in-out;
+  border: none;
+  border-radius: 0.4rem;
+  background-color: var(--linkhover3);
+  color: var(--textcolor1);
 }
+.contact-submit-btn:hover {
+  background-color: var(--linkhover4);
+}
+.form-privacy-notice {
+  margin-top: 1rem;
+  font-size: 1.2rem;
+}
+.privacy-notice-link {
+  color: var(--linkcolor);
+}
+.privacy-notice-link:hover {
+  color: var(--linkhover4);
+}
+
+
 
 @media (prefers-reduced-motion: no-preference) {
   * {

diff --git a/index.html b/index.html
index 67a9807e8699a33838c9acd425641b776f8acea8..07a92bd6cf68eea91932a8b4c789d0a0f2737805 100644 (file)
--- a/index.html
+++ b/index.html
@@ -139,26 +139,35 @@
     <section class="cards">\r
       <a href="photos.html" class="crd-link crd-1">\r
         <div class="crd-content-ctn-1">\r
-          <h1 class="crd-title">Photos.</h1>\r
+          <h2 class="crd-title">Photos.</h1>\r
           <p class="crd-tagline">Glimpses and memories through my lens, captured specks of our world.</p>\r
-          <i class="fas fa-arrow-right"></i>\r
+          <i class="fas fa-arrow-right crd-arrow"></i>\r
         </div>\r
       </a>\r
       <a href="projects.html" class="crd-link crd-2">\r
         <div class="crd-content-ctn-1">\r
-          <h1 class="crd-title">Projects.</h1>\r
-          <p class="crd-tagline">Websites I've made from codes written using pen and paper.</p>\r
-          <i class="fas fa-arrow-right"></i>\r
+          <h2 class="crd-title">Projects.</h1>\r
+          <p class="crd-tagline">Websites I've made from codes written out of pen and paper.</p>\r
+          <i class="fas fa-arrow-right crd-arrow"></i>\r
         </div>\r
       </a>\r
     </section>\r
+\r
+    <section class="questions">\r
+        <h2 class="got-q">GOT SOME QUESTIONS?</h1>\r
+        <a href="contact.html" class="q-link">\r
+          <p class="got-ans">I have answers.\r
+            <i class="fas fa-arrow-right q-arrow"></i>\r
+          </p>\r
+        </a>\r
+    </section>\r
   </main>\r
 \r
 \r
   <footer>\r
-    <p class="copy">\r
-      &copy; 2024 rain/bocharudo.\r
-    </p>\r
+    <span class="copy">\r
+      &copy; 2024 <span class="logo-sml">bocharudo.</span>\r
+    </span>\r
   </footer>\r
 \r
   <script src="js/script.js"></script>\r