├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Write Us Page Using HTML & CSS 📝 2 | 3 | This project showcases a "Write Us" page designed using HTML and CSS. 4 | 5 | ## Introduction ℹ️ 6 | 7 | The "Write Us" page provides a platform for users to submit their contact information and messages. It is designed using HTML for structure and CSS for styling. 8 | 9 | ## Features ✨ 10 | 11 | - **Responsive Design**: Ensures optimal viewing experience across different devices. 12 | - **Form Submission**: Allows users to input their name, company, phone number, email, and message. 13 | - **Checkbox Selection**: Users can select from a list of services using checkboxes. 14 | 15 | ## Live Preview 🌐 16 | 17 | Explore the live preview of the "Write Us" page [here](https://poshika27.github.io/WriteUs-Page-HTML-CSS/). 18 | 19 | ## Usage 🖥️ 20 | 21 | 1. Clone or download the repository. 22 | 2. Open the `index.html` file in your web browser to view the page. 23 | 3. Enter your details in the form and submit your message. 24 | 25 | ## Contributing 🤝 26 | 27 | Contributions are welcome! If you have any suggestions, improvements, or feature requests, please feel free to open an issue or create a pull request. 28 | 29 | ## License 📝 30 | 31 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 32 | 33 | ## Acknowledgements 🙏 34 | 35 | - **HTML & CSS Community**: For providing resources and tutorials for web development. 36 | - **GitHub Pages**: For hosting the live preview of the "Write Us" page. 37 | 38 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Write us Design Using HTML & CSS 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | Let's scale your
brand, together 22 |

Get a start@ something.com

23 | sample images 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |

Services

39 |
40 |
41 | 42 |
43 | 44 |
45 | 46 | 47 |
48 |
49 | 50 |
51 | 52 |
53 | 54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | margin: 0; 6 | font-family: 'Lato', sans-serif; 7 | 8 | } 9 | .container{ 10 | height: 100vh; 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | .box{ 17 | width: 85%; 18 | height: 90%; 19 | display: flex; 20 | flex-direction: row; 21 | } 22 | .c1{ 23 | width: 50%; 24 | height: 100%; 25 | } 26 | span{ 27 | font-size: 50px; 28 | font-weight: bolder; 29 | letter-spacing: 1px; 30 | } 31 | p{ 32 | font-size: 23px; 33 | font-weight: 600; 34 | color: gray; 35 | } 36 | p a{ 37 | text-decoration: none; 38 | color: gray; 39 | } 40 | img{ 41 | width: 500px; 42 | height: 420px; 43 | margin-top: 75px; 44 | } 45 | .c2{ 46 | width: 50%; 47 | height: 100%; 48 | } 49 | label{ 50 | padding: 10px; 51 | font-size: 18px; 52 | font-weight: bolder; 53 | } 54 | input{ 55 | padding: 10px; 56 | margin-top: 10px; 57 | margin-bottom: 15px; 58 | outline: none; 59 | background: transparent; 60 | border: none; 61 | border-bottom: 1px solid black; 62 | font-size: 16px; 63 | width: 70%; 64 | } 65 | h4{ 66 | margin: 10px; 67 | } 68 | .ser{ 69 | width:70% ; 70 | height: 90px; 71 | margin-left: 10px; 72 | display: flex; 73 | flex-direction: row; 74 | font-weight: bolder; 75 | font-size: 20px; 76 | } 77 | .r1,.r2{ 78 | width: 50%; 79 | } 80 | .r1 label,.r2 label{ 81 | padding: 0px; 82 | font-weight: normal; 83 | font-size: 16px; 84 | } 85 | .r1 input,.r2 input{ 86 | padding: 0px; 87 | margin: 0px; 88 | width: 30px; 89 | } 90 | input[type="submit"]{ 91 | background-color:#e45015; 92 | width:fit-content; 93 | padding: 15px; 94 | border-radius: 5px; 95 | border: none; 96 | letter-spacing: 1px; 97 | color: white; 98 | font-size: 15px; 99 | margin-left: 10px; 100 | cursor: pointer; 101 | } 102 | @media screen and (max-width:1024px){ 103 | .container{ 104 | height: fit-content; 105 | } 106 | .box{ 107 | height: fit-content; 108 | } 109 | .c1{ 110 | height: fit-content; 111 | } 112 | .c2{ 113 | height: fit-content; 114 | } 115 | .ser{ 116 | height: fit-content; 117 | width: 100%; 118 | flex-direction: column; 119 | } 120 | img{ 121 | width:320px; 122 | height: 300px; 123 | margin: 0px; 124 | margin-left: -40px; 125 | object-fit: cover; 126 | } 127 | input{ 128 | width: 90%; 129 | } 130 | .r1,.r2{ 131 | width: 100%; 132 | } 133 | } 134 | @media screen and (max-width:630px){ 135 | .container{ 136 | height: fit-content; 137 | } 138 | .box{ 139 | height: fit-content; 140 | flex-direction: column; 141 | row-gap: 55px; 142 | } 143 | .c1{ 144 | height: fit-content; 145 | width: 90%; 146 | display: flex; 147 | flex-direction: column; 148 | align-items: center; 149 | } 150 | .c2{ 151 | height: fit-content; 152 | width: 90%; 153 | } 154 | input{ 155 | width: 100%; 156 | } 157 | span{ 158 | font-size: 35px; 159 | text-align: center; 160 | } 161 | p{ 162 | font-size: 20px; 163 | text-align: center; 164 | } 165 | img{ 166 | margin: auto; 167 | } 168 | } 169 | --------------------------------------------------------------------------------