Skip to content

Commit b35d164

Browse files
MainaGeorgeMainaGeorge
committed
added the event section
1 parent a799e9b commit b35d164

File tree

2 files changed

+171
-8
lines changed

2 files changed

+171
-8
lines changed

‎index.html‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -185,16 +185,47 @@ <h2 class="villas__villa-6--title">Cosmic</h2>
185185
</section>
186186

187187
<!--******* Motto Section ******* -->
188-
<section id="motto">Motto</section>
188+
<section id="motto">
189+
<div class="motto__content">
190+
<h2 class="motto__content--title">We reimagined luxury</h2>
191+
<p class="motto__content--para">
192+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure molestias exercitationem beatae rerum ea! Hic!
193+
</p>
194+
</div>
195+
</section>
189196

190197
<!--******* Events content ******* -->
191-
<section id="events-content">Event Content</section>
198+
<section id="events-content">
199+
<div class="events-content__events-1">
200+
<h2 class="events-content__events--title">Beach Party</h2>
201+
<p class="events-content__events--para">
202+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt, molestiae incidunt. Illum explicabo quae dolores nostrum nihil
203+
commodi exercitationem et!
204+
</p>
205+
</div>
206+
207+
<div class="events-content__events-2">
208+
<h2 class="events-content__events--title">Beach Party</h2>
209+
<p class="events-content__events--para">
210+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt, molestiae incidunt. Illum explicabo quae dolores nostrum nihil
211+
commodi exercitationem et!
212+
</p>
213+
</div>
214+
</section>
192215

193216
<!--******* Event Text ******* -->
194-
<section id="events-date">Events Text</section>
217+
<section id="events-text">
218+
<div class="events-text__content">
219+
<h2 class="events-text__content--title">Events</h2>
220+
</div>
221+
</section>
195222

196223
<!--******* Garallery Text ******* -->
197-
<section id="gallery-text">Gallery Text</section>
224+
<section id="gallery-text">
225+
<div class="gallery-text__content">
226+
<h2 class="gallery-text__content--title">Gallery</h2>
227+
</div>
228+
</section>
198229

199230
<!--******* Gallery Corousel ******* -->
200231
<section id="corousel">Corousel</section>

‎style.css‎

Lines changed: 136 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ body {
7373
font-family: "Titillium Web", sans-serif;
7474
line-height: 1.7;
7575
background-color: var(--color-quartenary);
76+
/* max-width: 1500px; */
77+
/* margin: 0 auto; */
7678
}
7779

7880
/* header section */
@@ -554,27 +556,131 @@ div[class^="villas"] a[class^="villas"]:active::before {
554556
background: linear-gradient(var(--color-primary-m-light), var(--color-tertiary-m-dark)), url("img/Villas/villa-6.jpg");
555557
}
556558

559+
section#motto {
560+
background-color: var(--color-primary);
561+
grid-column: container-start / container-end;
562+
563+
padding: 10vh 3vw;
564+
}
565+
557566
section#events-content {
558567
background-color: var(--color-tertiary-m-light);
559568
grid-column: container-start / col-end 9;
560569
}
561570

571+
.motto__content {
572+
width: 80%;
573+
margin: 0 auto;
574+
text-align: center;
575+
}
576+
577+
.motto__content--title {
578+
font-size: var(--font-size-title);
579+
padding: 0 2rem 1rem;
580+
font-weight: 400;
581+
margin-bottom: 2rem;
582+
color: white;
583+
text-transform: uppercase;
584+
position: relative;
585+
}
586+
587+
.motto__content--title::after {
588+
content: "";
589+
position: absolute;
590+
left: 45%;
591+
bottom: 0;
592+
width: 10%;
593+
height: 0.2rem;
594+
background-color: white;
595+
}
596+
597+
section#events-content {
598+
grid-column: container-start / col-end 9;
599+
600+
display: grid;
601+
grid-template-columns: repeat(2, 1fr);
602+
}
603+
604+
section#events-content > div {
605+
padding: var(--padding-section);
606+
display: grid;
607+
608+
grid-template-areas:
609+
"title"
610+
"para";
611+
612+
row-gap: 4vh;
613+
align-items: center;
614+
justify-items: start;
615+
}
616+
617+
section#events-content > div:first-child {
618+
background: linear-gradient(var(--color-tertiary-m-light), var(--color-tertiary-m-light)), url("img/Events/beach-party.jpg");
619+
border-right: solid 0.2rem var(--color-tertiary);
620+
}
621+
622+
section#events-content > div:last-child {
623+
background: linear-gradient(var(--color-tertiary-m-light), var(--color-tertiary-m-light)), url("img/Events/culture-discovery.jpg");
624+
border-left: solid 0.2rem var(--color-tertiary);
625+
}
626+
627+
section#events-content > div:first-child,
628+
section#events-content > div:last-child {
629+
background-position: center;
630+
background-size: cover;
631+
}
632+
section#events-content > div h2[class*="title"] {
633+
grid-area: title;
634+
font-size: var(--font-size-title);
635+
font-weight: 400;
636+
color: white;
637+
}
638+
639+
section#events-content > div p[class*="para"] {
640+
grid-area: para;
641+
}
642+
562643
section#events-text {
563-
background-color: var(--color-quartenary);
564644
grid-column: col-start 10 / center-end;
645+
background-color: var(--color-tertiary);
646+
display: grid;
647+
grid-template-columns: 1fr;
648+
grid-template-rows: 1fr;
649+
place-items: center;
650+
}
651+
652+
.events-text__content {
653+
transform: rotate(90deg);
654+
}
655+
656+
.events-text__content--title,
657+
.gallery-text__content--title {
658+
color: white;
659+
font-weight: 500;
660+
font-size: var(--font-size-title);
661+
letter-spacing: 0.2rem;
565662
}
566663

567664
section#gallery-text {
568-
background-color: var(--color-secondary);
665+
background-color: var(--color-primary);
569666
grid-column: center-start / col-end 1;
667+
668+
display: grid;
669+
grid-template-columns: 1fr;
670+
grid-template-rows: 1fr;
671+
place-items: center;
672+
}
673+
674+
.gallery-text__content {
675+
transform: rotate(-90deg);
570676
}
571677

572678
section#corousel {
573-
background-color: var(--color-primary);
679+
background-color: var(--color-secondary);
574680
grid-column: col-start 2 / container-end;
575681
}
576682

577-
section#features-text {
683+
section#features-content {
578684
background-color: var(--color-tertiary);
579685
grid-column: center-start / col-end 9;
580686
}
@@ -662,9 +768,35 @@ footer#footer {
662768
}
663769

664770
div[class^="villas"] p[class^="villas"],
771+
section#events-content > div p[class*="para"],
772+
section#features-content > div p[class*="para"],
773+
.motto__content--para,
665774
.booking-content__para {
666775
font-size: 1.5rem;
667776
}
777+
778+
section#events-content > div:first-child,
779+
section#events-content > div:last-child,
780+
section#features-content > div:first-child,
781+
section#features-content > div:last-child{
782+
border: none;
783+
}
784+
785+
section#gallery-text,
786+
section#events-text,
787+
section#features-text {
788+
display: none;
789+
}
790+
791+
section#events-content {
792+
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
793+
}
794+
795+
section#events-content,
796+
section#corousel,
797+
section#features-content {
798+
grid-column: center-start / center-end;
799+
}
668800
}
669801

670802
/************************** 400 px screen and below ***************************/

0 commit comments

Comments
 (0)