Skip to content

Commit 780a8e3

Browse files
Mayank77marutiMayank77maruti
authored
Merge pull request #103 from Anushka-200617/Anushka-200617-patch-1
Added footer section to contact page
2 parents 6d715a0 + 37b6e74 commit 780a8e3

File tree

1 file changed

+267
-0
lines changed

1 file changed

+267
-0
lines changed

‎contact.html‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,274 @@ <h2>Get in Touch</h2>
333333
}
334334
}
335335

336+
/*-----------------------------------*\
337+
#FOOTER
338+
\*-----------------------------------*/
339+
340+
.footer-top {
341+
margin-block-end: 70px;
342+
}
343+
344+
.footer-brand {
345+
position: relative;
346+
padding: 50px 40px;
347+
background: var(--black) url("../images/footer-form-bg.png");
348+
background-position: center top;
349+
background-repeat: repeat;
350+
}
351+
352+
.footer-brand::before,
353+
.footer-brand::after {
354+
top: 0;
355+
height: 100%;
356+
background-image: url("../images/footer-form-pattern.svg");
357+
}
358+
359+
.footer-brand::before {
360+
left: 0;
361+
}
362+
363+
.footer-brand::after {
364+
right: 0;
365+
}
366+
367+
.footer-brand .logo {
368+
max-width: max-content;
369+
margin-inline: auto;
370+
margin-block-end: 40px;
371+
}
372+
373+
.footer-brand :is(.body-4, .label-1) {
374+
color: var(--quick-silver);
375+
line-height: var(--lineHeight-3);
376+
}
377+
378+
.footer-brand .contact-link {
379+
margin-block: 6px;
380+
transition: var(--transition-1);
381+
}
382+
383+
.footer-brand .contact-link:is(:hover, :focus-visible) {
384+
color: var(--gold-crayola);
385+
}
386+
387+
.footer-brand .wrapper {
388+
display: flex;
389+
justify-content: center;
390+
gap: 2px;
391+
margin-block: 40px 25px;
392+
}
393+
394+
.footer-brand .separator {
395+
animation: rotate360 15s linear infinite;
396+
}
397+
398+
.footer-brand .label-1 {
399+
margin-block-end: 30px;
400+
}
401+
402+
.footer-brand .label-1 .span {
403+
display: inline;
404+
color: var(--white);
405+
}
406+
407+
.footer-brand .icon-wrapper .input-field {
408+
cursor: text;
409+
}
410+
411+
.footer-brand .btn {
412+
min-width: 100%;
413+
}
414+
415+
.footer-list {
416+
display: grid;
417+
gap: 20px;
418+
background-color: var(--black-alpha-80);
419+
}
420+
421+
.footer-list-left{
422+
padding: 15px;
423+
margin-left: 2rem;
424+
}
425+
426+
.footer-list-right{
427+
margin-right: 2rem;
428+
padding: 20px 10px;
429+
}
430+
431+
.footer-link {
432+
color: #fff;
433+
font-weight: var(--weight-bold);
434+
text-transform: uppercase;
435+
letter-spacing: var(--letterSpacing-4);
436+
margin-inline: auto;
437+
transition: var(--transition-1);
438+
display: flex;
439+
align-items: center;
440+
}
441+
.footer-link ion-icon {
442+
margin-right: 8px;
443+
font-size: 16px
444+
}
445+
.footer-link i {
446+
margin-right: 8px;
447+
font-size: 14px
448+
}
449+
.footer-link:is(:hover, :focus-visible) {
450+
color: var(--gold-crayola);
451+
}
452+
453+
.footer-bottom{
454+
margin-bottom: -10rem;
455+
}
456+
457+
.copyright {
458+
color: var(--quick-silver);
459+
background-color: var(--black-alpha-80);
460+
text-align: center;
461+
justify-content: center;
462+
height: 50px;
463+
padding-top: 10px;
464+
line-height: var(--lineHeight-3);
465+
margin: 0;
466+
}
467+
468+
.copyright .link {
469+
display: inline;
470+
color: var(--gold-crayola);
471+
text-decoration: underline;
472+
}
473+
474+
475+
476+
477+
478+
336479
</style>
480+
<footer class="footer section has-bg-image text-center fade-in"
481+
style="background-image: url('./assets/images/fae955e3-de29-4d6b-a41a-85563f86a931.avif')">
482+
<div class="container">
483+
<div class="footer-top grid-list">
484+
<div class="footer-brand has-before has-after">
485+
<a href="#" class="logo">
486+
<!-- <img src="./assets/images/603logo (1).avif" width="160" height="50" loading="lazy" alt="grilli home"> -->
487+
<img src="https://abhiram.sirv.com/609%20Workved/assets/603logo%20(1).avif?format=webp" width="160" height="50" loading="lazy" alt="grilli home">
488+
</a>
489+
490+
<address class="body-4">
491+
Makhija Arcade, 35th Rd, Khar, Khar West, Mumbai, Maharashtra 400052
492+
</address>
493+
494+
<a href="mailto:booking@grilli.com" class="body-4 contact-link">booking@grilli.com</a>
495+
496+
<a href="tel:+88123123456" class="body-4 contact-link">Booking Request : +88-123-123456</a>
497+
498+
<p class="body-4">
499+
Open : 09:00 am - 01:00 pm
500+
</p>
501+
502+
<div class="wrapper">
503+
<div class="separator"></div>
504+
<div class="separator"></div>
505+
<div class="separator"></div>
506+
</div>
507+
508+
<p class="title-1">Get News & Offers</p>
509+
510+
<p class="label-1">
511+
Subscribe us & Get <span class="span">25% Off.</span>
512+
</p>
513+
514+
<form action="" class="input-wrapper">
515+
<div class="icon-wrapper">
516+
<ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
517+
518+
<input type="email" name="email_address" placeholder="Your email" autocomplete="off" class="input-field">
519+
</div>
520+
521+
<button type="submit" class="btn btn-secondary scale-up">
522+
<span class="text text-1">Subscribe</span>
523+
524+
<span class="text text-2" aria-hidden="true">Subscribe</span>
525+
</button>
526+
</form>
527+
528+
</div>
529+
530+
<head>
531+
<!-- Include Ionic Icons CDN -->
532+
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@6.0.0/dist/ionicons/ionicons.esm.js"></script>
533+
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@6.0.0/dist/ionicons/ionicons.js"></script>
534+
</head>
535+
536+
<ul class="footer-list">
537+
<!-- Home Link with Icon -->
538+
<li>
539+
<a href="#" class="label-2 footer-link hover-underline">
540+
<ion-icon name="home-outline"></ion-icon> Home
541+
</a>
542+
</li>
543+
544+
<!-- Contact Link with Icon -->
545+
<li>
546+
<a href="#" class="label-2 footer-link hover-underline">
547+
<ion-icon name="call-outline"></ion-icon> Contact
548+
</a>
549+
</li>
550+
</ul>
551+
552+
<ul class="footer-list">
553+
<!-- Facebook Link with Icon -->
554+
<li>
555+
<a href="#" class="label-2 footer-link hover-underline">
556+
<ion-icon name="logo-facebook"></ion-icon> Facebook
557+
</a>
558+
</li>
559+
560+
<!-- Instagram Link with Icon -->
561+
<li>
562+
<a href="#" class="label-2 footer-link hover-underline">
563+
<ion-icon name="logo-instagram"></ion-icon> Instagram
564+
</a>
565+
</li>
566+
567+
<!-- Twitter Link with Icon -->
568+
<li>
569+
<a href="#" class="label-2 footer-link hover-underline">
570+
<i class="fa-brands fa-twitter"></i>
571+
Twitter
572+
</a>
573+
</li>
574+
575+
<!-- Youtube Link with Icon -->
576+
<li>
577+
<a href="#" class="label-2 footer-link hover-underline">
578+
<ion-icon name="logo-youtube"></ion-icon>Youtube
579+
</a>
580+
</li>
581+
582+
<!-- Google Map Link with Icon -->
583+
<li>
584+
<a href="#" class="label-2 footer-link hover-underline">
585+
<ion-icon name="location-outline"></ion-icon> Google Map
586+
</a>
587+
</li>
588+
</ul>
589+
590+
</div>
591+
592+
<div class="footer-bottom">
593+
594+
<p class="copyright">
595+
&copy; 2024 . All Rights Reserved | Crafted by <a href="603thecoworkingspace.com" target="_blank"
596+
class="link">603 The Coworking Space</a>
597+
</p>
598+
599+
</div>
600+
601+
</div>
602+
</footer>
603+
337604

338605
<style>
339606
.space-section {

0 commit comments

Comments
 (0)