From 3fd4b0869d474096ef74566170da83903bac46a2 Mon Sep 17 00:00:00 2001 From: "renja@LAPTOP-THCTR57K" Date: Tue, 4 Apr 2023 21:02:16 +0200 Subject: [PATCH 1/2] adding contact page --- src/app/components/ContactPage/ContactBox.css | 69 ++++++++ src/app/components/ContactPage/ContactBox.js | 25 +++ .../components/ContactPage/ContactForm.css | 150 ++++++++++++++++++ src/app/components/ContactPage/ContactForm.js | 37 +++++ .../components/ContactPage/ContactPage.css | 12 ++ src/app/components/ContactPage/ContactPage.js | 26 +++ 6 files changed, 319 insertions(+) create mode 100644 src/app/components/ContactPage/ContactBox.css create mode 100644 src/app/components/ContactPage/ContactBox.js create mode 100644 src/app/components/ContactPage/ContactForm.css create mode 100644 src/app/components/ContactPage/ContactForm.js create mode 100644 src/app/components/ContactPage/ContactPage.css create mode 100644 src/app/components/ContactPage/ContactPage.js diff --git a/src/app/components/ContactPage/ContactBox.css b/src/app/components/ContactPage/ContactBox.css new file mode 100644 index 0000000..426aa6f --- /dev/null +++ b/src/app/components/ContactPage/ContactBox.css @@ -0,0 +1,69 @@ +.box { + display: row; + justify-content: space-around; + grid-column: column; + box-sizing: border-box; + vertical-align: baseline; + padding: 80px; + margin: 0 20 30px; + border: none; + font-family: sans-serif; + } + +.breadcrumb{ + padding: 20px 16px; + list-style: none; + background-color: none; +} + +.breadcrumb-item{ + display: inline; + font-size: 22px; + font-weight: 500; +} + +.breadcrumb li+li:before{ + padding: 8px; + color: black; + content: ">"; + font-weight: bold; +} + +.breadcrumb-item a{ + color: #2e4053; + text-decoration: none; +} + +.breadcrumb-item a:hover{ + color: rgb(209, 31, 31); +} + +.imgcontact { + display: flex; + width:98%; + height: 260px; + gap: 30%; + top: 200px; + margin: 20px; + border-radius: 4px; +} + + +@media only screen and (max-width: 600px) { + .box { + display: block; + } + .imgcontact { + display: block; + height: 200px; + width: 330px; + margin: 0 10%; + } + .breadcrumb { + display: block; + margin: auto; + } + } + + + diff --git a/src/app/components/ContactPage/ContactBox.js b/src/app/components/ContactPage/ContactBox.js new file mode 100644 index 0000000..5cb9871 --- /dev/null +++ b/src/app/components/ContactPage/ContactBox.js @@ -0,0 +1,25 @@ +'use client'; +import 'primereact/resources/primereact.min.css'; +import 'primeicons/primeicons.css'; +import 'primeflex/primeflex.css'; +import Image from "next/image"; +import pastries from "../../image/pastries.jpg"; +import "./ContactBox.css"; + + +export const ContactBox = () => { + return ( +
+
    +
  1. 🏠Home
    2. +
  2. Contact
    3. +
+ pastries +
+ + ); +}; \ No newline at end of file diff --git a/src/app/components/ContactPage/ContactForm.css b/src/app/components/ContactPage/ContactForm.css new file mode 100644 index 0000000..59c9132 --- /dev/null +++ b/src/app/components/ContactPage/ContactForm.css @@ -0,0 +1,150 @@ +.row { + display: flex; + } + + .column { + flex: auto; + padding: 30px; + } + + .box { + display: row; + justify-content: space-around; + grid-column: column; + box-sizing: border-box; + vertical-align: baseline; + padding: 20px; + margin: 0 0 30px; + border: none; +} + + .column-one { + text-align: right; + max-width: 26%; + height: 700px; + line-height: 160%; + font-size: 18px; + font-weight: 200; + margin: 5%; + } + + .column-two { + text-align: left; + max-width: 100%; + height: 700px; + line-height: 160%; + font-size: 18px; + font-weight: 100; + margin: 5%; +} + + + .box h1 { + margin-top: 30%; + font-weight: 600; + font-size: 35px; + } + + * { + box-sizing: border-box; + } + + +.container { + padding: 16px; + background-color: none; + } + + input[type=text], input[type=name] { + width: 100%; + padding: 15px; + margin: 5px 0 22px 0; + display: inline-block; + border: none; + background: #D9D9D9; + border-radius: 4px; + } + + input[type=text]:focus, input[type=name]:focus { + background-color: #edd794; + outline: none; + } + + input[type=query]{ + width: 100%; + height: 200px; + padding: 15px; + margin: 5px 0 22px 0; + display: inline-block; + border: none; + background: #D9D9D9; + border-radius: 4px; + } + + input[type=query]:focus { + background-color: #edd794; + outline: none; + } + + + .submitbtn { + background-color: #24503D; + color: white; + padding: 16px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; + opacity: 0.9; + border-radius: 4px; + font-size: 22px; + } + + .submitbtn:hover { + opacity: 1; + background-color: #e7b10a; + } + + + @media only screen and (max-width: 600px) { + .box { + display: block; + } + + .column-one { + display: block; + text-align: center; + max-width: 100%; + height: 100%; + line-height: 160%; + font-size: 18px; + font-weight: 200; + margin: 15%; + } + + .column-two { + display: block; + text-align: left; + max-width: 100%; + height: 100%; + line-height: 160%; + font-size: 18px; + font-weight: 100; + margin: 15%; + } + + + .row { + display: block; + height: 100%; + margin: 0 10%; + } + } + + .box h1 { + margin-top: 15%; + } + + + + \ No newline at end of file diff --git a/src/app/components/ContactPage/ContactForm.js b/src/app/components/ContactPage/ContactForm.js new file mode 100644 index 0000000..4d2fb72 --- /dev/null +++ b/src/app/components/ContactPage/ContactForm.js @@ -0,0 +1,37 @@ +'use client'; +import 'primereact/resources/primereact.min.css'; +import 'primeicons/primeicons.css'; +import 'primeflex/primeflex.css'; +import "./ContactForm.css"; + +export const ContactForm = () => { + return ( +
+
+
+

Let us hear from you

+
+

Do you have a question? Or do you have any suggestion for our website or cooking tips? Drop your message here with your details. We will contact you as soon as possible!

+
+
+
+
+ + + + + + + +
+ + +
+ +
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/src/app/components/ContactPage/ContactPage.css b/src/app/components/ContactPage/ContactPage.css new file mode 100644 index 0000000..4eb48fc --- /dev/null +++ b/src/app/components/ContactPage/ContactPage.css @@ -0,0 +1,12 @@ +* { + box-sizing: border-box; + padding: 0px; + margin: 0px; + font-family: 'Ubuntu'; + } + + .main { + background-color: white; + color: black; + } + \ No newline at end of file diff --git a/src/app/components/ContactPage/ContactPage.js b/src/app/components/ContactPage/ContactPage.js new file mode 100644 index 0000000..7e79406 --- /dev/null +++ b/src/app/components/ContactPage/ContactPage.js @@ -0,0 +1,26 @@ +'use client'; +import 'primereact/resources/primereact.min.css'; +import 'primeicons/primeicons.css'; +import 'primeflex/primeflex.css'; +import './ContactPage.css'; + +import { Header } from '../Header'; +import { NavBar } from '../NavBar'; +import { ContactBox } from './ContactBox'; +import { ContactForm } from './ContactForm'; +import { Footer } from '../Footer'; + + + + +export default function ContactPage() { + return ( + <> +
+ + + +