diff --git a/contact-us/index.html b/contact-us/index.html new file mode 100644 index 00000000..6583cdc9 --- /dev/null +++ b/contact-us/index.html @@ -0,0 +1,77 @@ + + + + + + + Responsive Contact Us Form + + + + + +
+ +
+ +
+ +
+ +
Address
+
Surkhet NP12
+
Birendranagar 06
+
+ +
+ +
Phone
+
+0098 9893 5647
+
+0096 3434 5678
+
+ + + +
+ +
+ +
Send us a message
+

If you have any work from me or any types of quries related to my tutorial, + you can send me message from here. It's my pleasure to help you.

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/contact-us/readme.md b/contact-us/readme.md new file mode 100644 index 00000000..6c4dae71 --- /dev/null +++ b/contact-us/readme.md @@ -0,0 +1,52 @@ +# 🌐 Responsive Contact Us Page + +## 📋 Overview +This is a **responsive Contact Us page** built using **only HTML and CSS**. +It includes a clean, modern design suitable for websites like **E-Shop**, **Portfolio**, and **Company Landing Pages**, where a contact section is often essential but sometimes missing. + +--- + +## ✨ Features +- 📱 Fully responsive layout for all devices +- 💬 User-friendly form design +- 🎨 Simple and elegant UI with hover effects +- 🧱 Built using pure HTML and CSS (no JavaScript) + +--- + +## 🧩 Sections Included +- **Address** – Displays location details +- **Phone** – Contact numbers for easy access +- **Email** – Professional email contact +- **Message Form** – Allows users to send messages or queries + +--- + +## 🖼️ Preview +![Contact Us Page Screenshot](ui.png) + +--- + +## 💡 How to Use +1. Clone or download the project files. +2. Open `index.html` in any web browser. +3. Explore and customize it as per your project. + +--- + +## 🏷️ Category +**Websites and UI** + +--- + +## 🛠️ Tech Stack +- HTML5 +- CSS3 +- Font Awesome Icons + +--- + +## 🎯 Contribution +This page can be added to the **“Websites and UI”** category of the repository to enhance UI examples and improve completeness for projects like **Portfolio** or **E-Shop** websites. + +--- diff --git a/contact-us/style.css b/contact-us/style.css new file mode 100644 index 00000000..8b81a384 --- /dev/null +++ b/contact-us/style.css @@ -0,0 +1,171 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + user-select: none; +} + +body { + min-height: 100vh; + width: 100%; + background: #cbe8e9; + display: flex; + align-items: center; + justify-content: center; +} + +.container { + width: 80%; + background: #fff; + border-radius: 6px; + padding: 20px 60px 40px 40px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} + +.container .content { + display: flex; + align-items: center; + justify-content: space-between; +} + +.container .content .left-side { + width: 25%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 15px; + position: relative; +} + +.content .left-side::before { + content: ''; + position: absolute; + height: 70%; + width: 2px; + right: -15px; + top: 50%; + transform: translateY(-50%); + background: #afafb6; +} + +.content .left-side .details { + margin: 14px; + text-align: center; +} + +.content .left-side .details i { + font-size: 30px; + color: #3e2093; +} + +.content .left-side .details .topic { + font-size: 18px; + font-weight: 500; + margin-bottom: 10px; +} + +.content .left-side .details .text1, +.content .left-side .details .text2 { + font-size: 14px; + color: #afafb6; +} + +.container .content .right-side { + width: 75%; + margin-left: 75px; +} + +.content .right-side .topic-text { + font-size: 23px; + font-weight: 600; + color: #3e2093; +} + +.right-side .input-box { + height: 50px; + width: 100%; + margin: 12px 0; +} + +.right-side .input-box input, +.right-side .input-box textarea { + height: 100%; + width: 100%; + border: none; + font-size: 16px; + background: #f0f1f8; + border-radius: 6px; + padding: 0 15px; + resize: none; +} + +.right-side .input-box textarea { + padding-top: 10px; +} + +.right-side .message-box { + min-height: 110px; +} + +.right-side .button { + display: inline-block; + margin-top: 6px; +} + +.right-side .button input[type="button"] { + color: #fff; + font-size: 18px; + outline: none; + border: none; + padding: 8px 16px; + border-radius: 6px; + background: #3e2093; + cursor: pointer; + transition: all 0.3s ease; + outline: none; + -webkit-tap-highlight-color: transparent; +} + +.button input[type="button"]:hover { + background: #5029bc; +} + +@media (max-width:952px) { + .container { + width: 90%; + padding: 30px 35px 40px 35px; + } +} + +@media (max-width:820px) { + .container { + margin: 40px 0; + height: 100%; + } + + .container .content { + flex-direction: column-reverse; + } + + .container .content .left-side { + width: 100%; + flex-direction: row; + margin-top: 40px; + justify-content: center; + flex-wrap: wrap; + } + + .container .content .left-side::before { + display: none; + } + + .container .content .right-side { + width: 100%; + margin-left: 0; + } +} \ No newline at end of file diff --git a/contact-us/ui.png b/contact-us/ui.png new file mode 100644 index 00000000..ac2aed81 Binary files /dev/null and b/contact-us/ui.png differ diff --git a/index.html b/index.html index 7a3f1357..fbb3a2ae 100644 --- a/index.html +++ b/index.html @@ -492,6 +492,7 @@

You Dont Need JavaScript

Zomato Clone Weather App Linked Login + Contact Us Form diff --git a/misc/todo-1.html b/misc/todo-1.html index d3b63741..5a576567 100644 --- a/misc/todo-1.html +++ b/misc/todo-1.html @@ -1,519 +1,467 @@ - - - - - No JS Demo - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
-

Todos

- -
-
- -
-
- -
-
- -
-
-
-
- - + /* Button styling */ + .todo-actions { + display: flex; + justify-content: center; + align-items: center; + padding-top: 20px; + border-top: 1px solid rgba(0, 0, 0, 0.1); + position: relative; + } + + .save-btn { + background: linear-gradient(135deg, #667eea, #764ba2); + color: white; + border: none; + padding: 14px 40px; + border-radius: 25px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + position: relative; + overflow: hidden; + } + + .save-btn:hover { + transform: translateY(-3px) scale(1.05); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); + } + + .save-btn:active { + transform: translateY(0) scale(0.98); + } + + .save-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s; + } + + .save-btn:hover::before { + left: 100%; + } + + /* Progress bar animation */ + .todo-container::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + height: 3px; + background: linear-gradient(90deg, #667eea, #764ba2); + width: 0%; + animation: progressBar 3s ease-in-out infinite; + } + + @keyframes progressBar { + 0% { width: 0%; left: 0; } + 50% { width: 100%; left: 0; } + 100% { width: 0%; left: 100%; } + } + + /* Responsive design */ + @media (max-width: 600px) { + body { + padding: 10px; + } + + .todo-container { + padding: 20px; + } + + .todo-header { + font-size: 1.8rem; + } + + .todo-item { + padding: 12px 15px; + } + + .todo-text { + font-size: 1rem; + } + } + + + +
+

+ Todo List +

+ + + +
+ +
+
+ + \ No newline at end of file