Merge pull request #27 from Shubhrajyoti24/main

Issue no.13 resolved:create a contact us section
E-Cell-VSSUT · Oct 7, 2022 · 21267af · 21267af
2 parents 9d49eea + 56a37b5
commit 21267af
Show file tree

Hide file tree

Showing 2 changed files with 219 additions and 0 deletions.
diff --git a/Shubhrajyoti/contact.html b/Shubhrajyoti/contact.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
+        crossorigin="anonymous">
+    <title>Contact</title>
+</head>
+<body>
+    <!--CONTACT US-->
+    <section class="contact" id="contact" style="background-color:  #9adaf375;">
+        <h1>Contact Us</h1>
+        <div class="form">
+            <form>
+                <label for="name">Name</label>
+                <input type="text" id="name">
+                <label for="email">Email</label>
+                <input type="email" id="email">
+                <label for="subject">Subject</label>
+                <input type="text" id="subject">
+                <label for="message">Message</label>
+                <textarea id="message" cols="30" rows="10"></textarea>
+                <input type="submit" value="Submit" class="btns">
+            </form>
+        </div>
+        <section class="address">
+            <div class="detail">
+                <h2>OFFICE ADDRESS</h2>
+                <h3>123 Anywhere street</h3>
+                <h3>Any city, ST 12345</h3>
+            </div>
+            <div class="detail">
+                <h2>CONTACT US</h2>
+                <h3>+ 123 456 789</h3>
+                <h3>[email protected]</h3>
+                <h3>[email protected]</h3>
+            </div>
+        </section>
+        <div class="icon">
+            <h2>FOLLOW US</h2>
+            <div class="social-icons">
+                <i class="fab fa-facebook-f"></i>
+                <i class="fab fa-twitter"></i>
+                <i class="fab fa-instagram"></i>
+                <i class="fab fa-linkedin-in"></i>
+                <i class="fab fa-youtube"></i>
+                <i class="fab fa-google-plus-g"></i>
+            </div>
+        </div>
+        <p>Made with <i class="far fa-heart"></i> by Shubhrajyoti</p>
+    </section>
+</body>
+</html>
diff --git a/Shubhrajyoti/style.css b/Shubhrajyoti/style.css
@@ -0,0 +1,161 @@
+/*------ contact us ------*/
+
+.contact {
+    width: 100%;
+    text-align: center;
+    padding: 70px 0;
+}
+
+.contact h1 {
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    color: #08393b;
+    font-size: 45px;
+    text-align: center;
+    margin-bottom: 2px;
+    margin-top: 20px;
+    font-weight: 600;
+}
+
+.contact .form {
+    width: 100%;
+    height: 100%;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.contact .form::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.contact .form input,
+.contact .form label {
+    display: block;
+    margin: 1rem auto;
+    width: 50%;
+    font-size: 1.3rem;
+    font-weight: 600;
+    text-align: start;
+    border-radius: 5px;
+    height: 2rem;
+}
+
+.contact .form textarea {
+    display: block;
+    margin: 1rem auto;
+    width: 50%;
+    font-size: 1.3rem;
+    font-weight: 600;
+    text-align: start;
+    border-radius: 5px;
+}
+
+.contact .form .btns {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+
+.contact .form .btns:hover {
+    background-color: #43bcf575;
+    transition: 0.5s;
+}
+
+.address {
+    width: 65%;
+    margin-top: 50px;
+    margin-left: 275px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    text-align: center;
+}
+
+.address .detail h2 {
+    color: #08393b;
+}
+
+.icon {
+    padding-top: 20px;
+}
+
+.icon h2 {
+    color: #08393b;
+}
+
+.icon .social-icons {
+    cursor: pointer;
+    margin: 20px;
+}
+
+.fa-heart {
+    color: #ca1508;
+}
+
+
+
+/*------ @media queries ------*/
+
+@media(max-width: 700px) {
+
+    /*---- contact us ----*/
+
+        .contact {
+            width: 100%;
+            text-align: center;
+            padding: 20px 0;
+        }
+
+        .contact h4 {
+            margin-bottom: 2px;
+            margin-top: 40px;
+            font-size: 36px;
+            font-weight: 600;
+        }
+
+        .contact .form {
+            width: 80%;
+            text-align: center;
+            background-color: #b9e4f5;
+            height: 80%;
+            margin: 0 auto;
+        }
+
+        .contact .form::after {
+            content: "";
+            display: block;
+            clear: both;
+        }
+
+        .contact .form input,
+        .contact .form label,
+        .contact .form textarea {
+            display: block;
+            margin: 1rem auto;
+            width: 50%;
+            font-size: 1.3rem;
+            font-weight: 600;
+            text-align: start;
+        }
+
+        .contact .form .btn {
+            text-align: center;
+        }
+
+        .address {
+            width: 65%;
+            margin-top: 30px;
+            margin-left: 80px;
+            display: block;
+            text-align: center;
+        }
+
+        .address .detail {
+            padding-top: 30px;
+        }
+
+        .icon {
+            padding-top: 30px;
+        }
+}