├── form-handler.php ├── .DS_Store ├── img ├── about.jpg ├── logo.png ├── user1.jpg ├── user2.jpg ├── banner.png ├── banner2.jpg ├── library.png ├── london.png ├── newyork.png ├── background.jpg ├── basketball.png ├── cafeteria.png ├── washington.png └── certificate.jpg ├── about.html ├── contact.html ├── course.html ├── blog.html ├── index.html └── style.css /form-handler.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/.DS_Store -------------------------------------------------------------------------------- /img/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/about.jpg -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/user1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/user1.jpg -------------------------------------------------------------------------------- /img/user2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/user2.jpg -------------------------------------------------------------------------------- /img/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/banner.png -------------------------------------------------------------------------------- /img/banner2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/banner2.jpg -------------------------------------------------------------------------------- /img/library.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/library.png -------------------------------------------------------------------------------- /img/london.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/london.png -------------------------------------------------------------------------------- /img/newyork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/newyork.png -------------------------------------------------------------------------------- /img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/background.jpg -------------------------------------------------------------------------------- /img/basketball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/basketball.png -------------------------------------------------------------------------------- /img/cafeteria.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/cafeteria.png -------------------------------------------------------------------------------- /img/washington.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/washington.png -------------------------------------------------------------------------------- /img/certificate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OracleBrain/University-Web-Using-HTML--CSS--Java-Script/HEAD/img/certificate.jpg -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | University Website Design - Oracle Brain 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 29 |

About Us

30 |
31 | 32 |
33 |
34 |

We are the world's largest university

35 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet turpis nulla, eleifend faucibus est sollicitudin ut. Maecenas ut venenatis ex, et dapibus purus. Donec sit amet nisl non justo malesuada fermentum. Donec eget felis dolor. Suspendisse condimentum vestibulum ex ac cursus. Nam pharetra viverra efficitur. Sed pellentesque luctus arcu, quis finibus nibh luctus

36 | EXPLORE NOW 37 |
38 |
39 | About Us Image 40 |
41 |
42 | 43 | 52 | 53 | 54 | 55 | 56 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | University Website Design - Oracle Brain 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 28 |

Contact Us

29 |
30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 |
38 | 39 |
40 | 41 |
42 |
43 | 44 | 45 |
XYZ Road, ABC Building
46 |

Pool Chowk, Janakpur, Nepal

47 |
48 |
49 |
50 | 51 |
+977 1234567890
52 |

Monday to Friday, 9AM to 5PM

53 |
54 |
55 |
56 | 57 | 58 |
info@gmail.com
59 |

Email us your query

60 |
61 |
62 | 63 |
64 | 65 |
66 | 67 | 68 | 69 | 70 | 71 |
72 |
73 |
74 | 75 | 76 | 77 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /course.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | University Website Design - Oracle Brain 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 29 |

Our Courses

30 |
31 | 32 | 33 | 34 |
35 |

Courses We Offer

36 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tempora totam, optio illum dolores ea iure dignissimos illo
commodi velit, qui ut, dolorem a dolore possimus?

37 | 38 |
39 |
40 |

Intermediate

41 |

Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...

42 |
43 |
44 |

Post Graduation

45 |

Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...

46 |
47 |
48 |

Doctorate

49 |

Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...

50 |
51 |
52 |
53 | 54 | 55 | 56 |
57 |

Our Facilities

58 |

Lorem impum dolor site amet, consectetur adipisicing elit.

59 | 60 |
61 |
62 | World Class Library 63 |

World Class Library

64 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.

65 |
66 |
67 | Largest Play Ground 68 |

Largest Play Ground

69 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.

70 |
71 |
72 | Tasty and Healthy Food 73 |

Tasty and Healthy Food

74 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.

75 |
76 |
77 |
78 | 79 | 80 | 81 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 121 | 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | University Website Design - Oracle Brain 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 29 |

Our Certificate & Online Programs For 2024

30 |
31 | 32 | 33 | 34 |
35 | 36 |
37 | < class="blog-left"> 38 | 39 |

Our Certificate & Online Programs For 2024

40 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum ad autem accusantium quaerat saepe eos excepturi, rem vitae quasi dolores perferendis, enim eveniet magnam voluptatibus dolorem hic maiores voluptatem!

41 |
42 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum ad autem accusantium quaerat saepe eos excepturi, rem vitae quasi dolores perferendis, enim eveniet magnam voluptatibus dolorem hic maiores voluptatem!

43 |
44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum ad autem accusantium quaerat saepe eos excepturi, rem vitae quasi dolores perferendis, enim eveniet magnam voluptatibus dolorem hic maiores voluptatem!

45 |
46 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat eum ad autem accusantium quaerat saepe eos excepturi, rem vitae quasi dolores perferendis, enim eveniet magnam voluptatibus dolorem hic maiores voluptatem!

47 | 48 |
49 |

Leave a comment

50 |
51 | 54 | 55 | 56 |
57 |
58 | 59 |
60 |
61 |

Post Categories

62 |
63 | Business Analytics 64 | 21 65 |
66 |
67 | Business Analytics 68 | 21 69 |
70 |
71 | Business Analytics 72 | 21 73 |
74 |
75 | Business Analytics 76 | 21 77 |
78 |
79 | Business Analytics 80 | 21 81 |
82 | 83 |
84 | 85 | 86 | 87 | 88 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 128 | 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | University Website Design - Oracle Brain 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 29 |
30 |

World's Biggest University

31 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tempora totam, optio illum dolores ea iure dignissimos illo
commodi velit, qui ut, dolorem a dolore possimus?

32 | Visit Us To know More 33 |
34 |
35 | 36 | 37 | 38 |
39 |

Courses We Offer

40 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tempora totam, optio illum dolores ea iure dignissimos illo
commodi velit, qui ut, dolorem a dolore possimus?

41 | 42 |
43 |
44 |

Intermediate

45 |

Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...

46 |
47 |
48 |

Post Graduation

49 |

Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...

50 |
51 |
52 |

Doctorate

53 |

Lorem Lorem lorme45 Lorem Lorem lorme45 Lorem ...

54 |
55 |
56 |
57 | 58 | 59 | 60 |
61 |

Our Global Campus

62 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

63 | 64 |
65 | 66 |
67 | London Campus 68 |
69 |

LONDON

70 |
71 |
72 |
73 | New York Campus 74 |
75 |

NEW YORK

76 |
77 |
78 |
79 | Washington Campus 80 |
81 |

WASHINGTON

82 |
83 |
84 |
85 |
86 | 87 |
88 |

Our Facilities

89 |

Lorem impum dolor site amet, consectetur adipisicing elit.

90 | 91 |
92 |
93 | World Class Library 94 |

World Class Library

95 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.

96 |
97 |
98 | Largest Play Ground 99 |

Largest Play Ground

100 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.

101 |
102 |
103 | Tasty and Healthy Food 104 |

Tasty and Healthy Food

105 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. pellentesque aliquet turpis nulla.

106 |
107 |
108 |
109 | 110 |
111 |

What Our Students Say

112 |

Lorem impum dolor site amet, consectetur adipisicing elit.

113 | 114 |
115 |
116 | Student 1 117 |
118 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.

119 |

Christine Berkley

120 | 121 | 122 | 123 | 124 | 125 |
126 |
127 |
128 | Student 2 129 |
130 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.

131 |

David Byer

132 | 133 | 134 | 135 | 136 | 137 |
138 |
139 |
140 |
141 | 142 | 143 |
144 |
145 |

Enroll For Our Various Online Courses
Anywhere From The World

146 | CONTACT US 147 |
148 |
149 | 150 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 190 | 191 | 192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Reset styles and set default font */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | /* Header styling */ 9 | .header { 10 | min-height: 100vh; 11 | width: 100%; 12 | background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(img/banner.png); 13 | background-position: center; 14 | background-size: cover; 15 | position: relative; 16 | } 17 | 18 | /* Navigation styling */ 19 | .nav { 20 | display: flex; 21 | padding: 2% 6%; 22 | justify-content: space-between; 23 | align-items: center; 24 | } 25 | 26 | .nav img { 27 | width: 150px; 28 | } 29 | 30 | .nav-links { 31 | flex: 1; 32 | text-align: right; 33 | } 34 | 35 | .nav-links ul li { 36 | list-style: none; 37 | display: inline-block; 38 | padding: 8px 12px; 39 | position: relative; 40 | } 41 | 42 | .nav-links ul li a { 43 | color: #fff; 44 | text-decoration: none; 45 | font-size: 13px; 46 | } 47 | 48 | .nav-links ul li::after { 49 | content: ''; 50 | width: 100%; 51 | height: 2px; 52 | background: #f44336; 53 | display: block; 54 | margin: auto; 55 | transition: 0.5s; 56 | } 57 | 58 | .nav-links ul li:hover::after { 59 | width: 100%; 60 | } 61 | 62 | .text-box { 63 | width: 90%; 64 | color: #fff; 65 | position: absolute; 66 | top: 50%; 67 | left: 50%; 68 | transform: translate(-50%, -50%); 69 | text-align: center; 70 | } 71 | 72 | .text-box h1 { 73 | font-size: 62px; 74 | } 75 | 76 | .text-box p { 77 | margin: 10px 0 40px; 78 | font-size: 14px; 79 | color: #fff; 80 | } 81 | 82 | /* Hero button styling */ 83 | .hero-btn { 84 | display: inline-block; 85 | text-decoration: none; 86 | color: #fff; 87 | border: 1px solid #fff; 88 | padding: 12px 34px; 89 | font-size: 13px; 90 | background: transparent; 91 | position: relative; 92 | cursor: pointer; 93 | } 94 | 95 | .hero-btn:hover { 96 | border: 1px solid #f44336; 97 | background: #f44336; 98 | transition: 1s; 99 | } 100 | 101 | /* Responsive navigation styling */ 102 | @media (max-width: 700px) { 103 | .text-box h1 { 104 | font-size: 20px; 105 | } 106 | .nav-links ul li { 107 | display: block; 108 | } 109 | .nav-links { 110 | position: fixed; 111 | background: #f44336; 112 | height: 100vh; 113 | width: 200px; 114 | top: 0; 115 | right: -200px; 116 | text-align: left; 117 | z-index: 2; 118 | transition: 1s; 119 | } 120 | .nav .fa { 121 | display: block; 122 | color: #fff; 123 | margin: 10px; 124 | font-size: 22px; 125 | cursor: pointer; 126 | } 127 | 128 | .nav-links ul { 129 | padding: 30px; 130 | } 131 | } 132 | 133 | /* Course section styling */ 134 | .course { 135 | width: 80%; 136 | margin: auto; 137 | text-align: center; 138 | padding-top: 100px; 139 | } 140 | 141 | h1 { 142 | font-size: 36px; 143 | font-weight: 600; 144 | } 145 | 146 | p { 147 | color: #777; 148 | font-size: 14px; 149 | font-weight: 300; 150 | line-height: 22px; 151 | padding: 10px; 152 | } 153 | 154 | .row { 155 | margin-top: 5%; 156 | display: flex; 157 | justify-content: space-between; 158 | } 159 | 160 | .course-col { 161 | flex-basis: 31%; 162 | background: #fff3f3; 163 | border-radius: 10px; 164 | margin-bottom: 5%; 165 | padding: 20px 12px; 166 | box-sizing: border-box; 167 | } 168 | 169 | h3 { 170 | text-align: center; 171 | font-weight: 600; 172 | margin: 10px 0; 173 | } 174 | 175 | .course-col:hover { 176 | box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2); 177 | } 178 | 179 | @media (max-width: 700px) { 180 | .row { 181 | flex-direction: column; 182 | } 183 | } 184 | 185 | /* Campus section styling */ 186 | .campus { 187 | width: 80%; 188 | margin: auto; 189 | text-align: center; 190 | padding-top: 50px; 191 | } 192 | 193 | .campus-col { 194 | flex-basis: 32%; 195 | border-radius: 10px; 196 | margin-bottom: 30px; 197 | position: relative; 198 | overflow: hidden; 199 | } 200 | 201 | .campus-col img { 202 | width: 100%; 203 | display: block; 204 | } 205 | 206 | .layer { 207 | background: transparent; 208 | height: 100%; 209 | width: 100%; 210 | position: absolute; 211 | top: 0; 212 | left: 0; 213 | transition: 0.5s; 214 | } 215 | 216 | .layer:hover { 217 | background: rgba(226, 0, 0, 0.7); 218 | } 219 | 220 | .layer h3 { 221 | width: 100%; 222 | font-weight: 500; 223 | color: #fff; 224 | font-size: 26px; 225 | bottom: 0; 226 | left: 50%; 227 | transform: translateX(-50%); 228 | position: absolute; 229 | opacity: 0; 230 | transition: 0.5s; 231 | } 232 | 233 | .layer:hover h3 { 234 | bottom: 49%; 235 | opacity: 1; 236 | } 237 | 238 | /* Facilities section styling */ 239 | .facilities { 240 | width: 80%; 241 | margin: auto; 242 | text-align: center; 243 | padding-top: 100px; 244 | } 245 | 246 | .facilities-col { 247 | flex-basis: 31%; 248 | border-radius: 10px; 249 | margin-bottom: 5%; 250 | text-align: left; 251 | } 252 | 253 | .facilities-col img { 254 | width: 100%; 255 | border-radius: 10px; 256 | } 257 | 258 | .facilities-col p { 259 | padding: 0; 260 | } 261 | 262 | .facilities-col h3 { 263 | margin-top: 16px; 264 | margin-bottom: 15px; 265 | text-align: left; 266 | } 267 | 268 | /* Testimonials section styling */ 269 | .testimonials { 270 | width: 80%; 271 | margin: auto; 272 | padding-top: 100px; 273 | text-align: center; 274 | } 275 | 276 | .testimonial-col { 277 | flex-basis: 44%; 278 | border-radius: 10px; 279 | margin-bottom: 5%; 280 | text-align: left; 281 | background: #fff3f3; 282 | padding: 25px; 283 | cursor: pointer; 284 | display: flex; 285 | } 286 | 287 | .testimonial-col img { 288 | height: 40px; 289 | margin-left: 5px; 290 | margin-right: 30px; 291 | border-radius: 50%; 292 | } 293 | 294 | .testimonial-col p { 295 | padding: 0; 296 | } 297 | 298 | .testimonial-col h3 { 299 | margin-top: 15px; 300 | text-align: left; 301 | } 302 | 303 | .testimonial-col .fa { 304 | color: #f44336; 305 | } 306 | 307 | /*--------- Testimonial Styles ---------*/ 308 | 309 | @media (max-width: 700px) { 310 | .testimonial-col img { 311 | margin-left: 0; 312 | margin-right: 15px; 313 | } 314 | } 315 | 316 | /*--------- Call to Action Styles ---------*/ 317 | 318 | .cta { 319 | margin: 100px auto; 320 | width: 80%; 321 | background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 322 | url(img/banner.png) center/cover; 323 | border-radius: 10px; 324 | text-align: center; 325 | padding: 100px 0; 326 | } 327 | 328 | .cta h1 { 329 | color: #fff; 330 | margin-bottom: 40px; 331 | padding: 0; 332 | } 333 | 334 | @media (max-width: 700px) { 335 | .cta h1 { 336 | font-size: 24px; 337 | } 338 | } 339 | 340 | /*--------- Footer Styles ---------*/ 341 | 342 | .footer { 343 | width: 100%; 344 | text-align: center; 345 | padding: 30px 0; 346 | } 347 | 348 | .footer h4 { 349 | margin-top: 20px; 350 | margin-bottom: 25px; 351 | font-weight: 600; 352 | } 353 | 354 | .icons .fa { 355 | color: #f44336; 356 | margin: 0 13px; 357 | cursor: pointer; 358 | padding: 18px 0; 359 | } 360 | 361 | .fa-heart-o { 362 | color: #f44336; 363 | } 364 | 365 | 366 | /*--------- About Us page ---------*/ 367 | 368 | .sub-header{ 369 | height: 50vh; 370 | width: 100%; 371 | background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/background.jpg); 372 | background-position: center; 373 | background-size: cover; 374 | color: #fff; 375 | } 376 | 377 | .sub-header h1{ 378 | margin-top: 100px; 379 | } 380 | 381 | .about-us{ 382 | width: 80%; 383 | margin: auto; 384 | padding-top: 80px; 385 | padding-bottom: 50px; 386 | } 387 | 388 | .about-col{ 389 | flex-basis: 48%; 390 | padding: 30px 2px; 391 | } 392 | 393 | .about-col img{ 394 | width: 100%; 395 | } 396 | 397 | .about-col h1{ 398 | padding: 0; 399 | } 400 | 401 | .about-col p{ 402 | padding: 15px 0 25px; 403 | } 404 | 405 | .red-btn{ 406 | border: 1px solid #f44336; 407 | background: transparent; 408 | color: #f44336; 409 | } 410 | 411 | .red-btn:hover{ 412 | background: #f44336; 413 | color: #fff; 414 | transition: 1s; 415 | } 416 | 417 | /*--------- Blog-Content ---------*/ 418 | 419 | .blog-content{ 420 | width: 80%; 421 | margin: auto; 422 | padding: 60px 0; 423 | } 424 | 425 | .blog-content{ 426 | flex-basis: 65%; 427 | } 428 | 429 | .blog-content img{ 430 | width: 100%; 431 | } 432 | 433 | .blog-left h2{ 434 | color: #222; 435 | font-weight: 600; 436 | margin: 30px 0; 437 | } 438 | 439 | .blog-left p{ 440 | color: #999; 441 | padding: 0; 442 | } 443 | 444 | .blog-right{ 445 | flex-basis: 32%; 446 | } 447 | 448 | .blog-right h3{ 449 | background: #f44336; 450 | color: #fff; 451 | padding: 7px 0; 452 | font-size: 16px; 453 | margin-bottom: 20px; 454 | } 455 | 456 | .blog-right div{ 457 | display: flex; 458 | align-items: center; 459 | justify-content: space-between; 460 | color: #555; 461 | padding: 8px; 462 | box-sizing: border-box; 463 | } 464 | 465 | .comment-box{ 466 | border: 1px solid #ccc; 467 | margin: 50px 0; 468 | padding: 10px 20px; 469 | } 470 | 471 | .comment-box h3{ 472 | text-align: left; 473 | } 474 | 475 | .comment-form input, .comment-form textarea{ 476 | width: 100%; 477 | padding: 10px; 478 | margin: 15px 0; 479 | box-sizing: border-box; 480 | border: none; 481 | outline: none; 482 | background: #f0f0f0; 483 | } 484 | 485 | .comment-form button{ 486 | margin: 10px 0; 487 | } 488 | 489 | @media(max-width:700px){ 490 | .sub-header h1{ 491 | font-size: 24px; 492 | } 493 | } 494 | 495 | /*--------- Contact Us page ---------*/ 496 | 497 | .location{ 498 | width: 80%; 499 | margin: auto; 500 | padding: 80px 0; 501 | } 502 | 503 | .location iframe{ 504 | width: 100%; 505 | } 506 | 507 | .contact-us{ 508 | width: 80%; 509 | margin: auto; 510 | } 511 | 512 | .contact-col{ 513 | flex-basis: 48%; 514 | margin-bottom: 30px; 515 | } 516 | 517 | .contact-col div{ 518 | display: flex; 519 | align-items: center; 520 | margin: 40px; 521 | } 522 | 523 | .contact-col div .fa{ 524 | font-size: 28px; 525 | color: #f44336; 526 | margin: 10px; 527 | margin-right: 30px; 528 | } 529 | 530 | .contact-col div p{ 531 | padding: 0; 532 | } 533 | 534 | .contact-col div h5{ 535 | font-size: 20px; 536 | margin-bottom: 5px; 537 | color: #555; 538 | font-weight: 400; 539 | } 540 | 541 | .contact-col input, .contact-col textarea{ 542 | width: 100%; 543 | padding: 15px; 544 | margin-bottom: 17px; 545 | outline: none; 546 | border: 1px solid #ccc; 547 | box-sizing: border-box; 548 | } --------------------------------------------------------------------------------