diff --git a/css/style.css b/css/style.css
index e69de29..7c7d2d5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,911 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+    text-decoration: none;
+    /* border: 2px solid black; */
+}
+
+
+html {
+    scroll-behavior: smooth;
+}
+
+a {
+    color: black;
+}
+
+
+a:hover {
+    text-decoration: none;
+}
+
+
+body {
+    background-color: #fffafb;
+    position: relative;
+    overflow-x: hidden;
+}
+
+
+h1 {
+    font-family: 'Cormorant', serif;
+    font-size: 4rem;
+    color: #283244;
+}
+
+
+.text-content {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1.125rem;
+}
+
+
+nav {
+    height: 60px;
+    background-color: #fffafb;
+    position: fixed;
+    width: 100%;
+    z-index: 11;
+}
+
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+    width: 100%;
+    max-width: 1280px;
+    margin: auto;
+}
+
+
+.left {
+    display: flex;
+    justify-content: space-between;
+    font-family: sans-serif;
+    font-size: 18px;
+}
+
+
+.hamburger {
+    width: 2rem;
+    margin-top: 5px;
+    margin-right: 5px;
+    display: none;
+    /* align-self: center; */
+}
+
+
+.firstbar {
+    width: 100%;
+    height: 0.18rem;
+    background-color: #707070;
+}
+
+
+.secondbar {
+    width: 50%;
+    margin-left: 1rem;
+    margin-top: 0.18rem;
+    height: 0.18rem;
+    background-color: #707070;
+}
+
+
+.logo {
+    font-size: 22px;
+}
+
+
+.right ul {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 0;
+}
+
+
+.links {
+    margin: 10px;
+    font-family: sans-serif;
+    font-size: 18px;
+}
+
+
+.links a {
+    color: #707070;
+    position: relative;
+}
+
+
+.links a::before {
+    content: "";
+    position: absolute;
+    width: 0%;
+    top: 100%;
+    left: 0;
+    background-color: #707070;
+    height: 2px;
+}
+
+
+.links a:hover::before {
+    width: 100%;
+    transition: all 0.5s;
+}
+
+
+.container {
+    width: 100%;
+    max-width: 1280px;
+    margin: auto;
+    position: relative;
+    padding-top: 60px;
+}
+
+
+.border-image {
+    width: 60%;
+    position: absolute;
+    top: 100px;
+    right: 0;
+    border-radius: 43% 54% 27% 73% / 36% 31% 56% 50%;
+    /* border-radius: 75% 43% 60% 51% / 39% 40% 51% 46%; */
+    overflow: hidden;
+    transform: translatey(0px);
+    animation: float 6s ease-in-out infinite;
+    z-index: -1;
+}
+
+
+.border-image img {
+    width: 100%;
+}
+
+
+@keyframes float {
+    0% {
+        transform: translatey(0px);
+    }
+
+    50% {
+        transform: translatey(-5px);
+    }
+
+    100% {
+        transform: translatey(0px);
+    }
+}
+
+
+.intro {
+    margin-top: 60px;
+}
+
+
+.intro-subtext-container {
+    padding-top: 3rem;
+}
+
+
+.quote {
+    font-family: 'Cormorant', serif;
+    font-style: italic;
+    font-size: 1.5rem;
+    line-height: 1.5;
+}
+
+
+.quote-container {
+    padding-top: 5rem;
+}
+
+
+.author {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1rem;
+    width: 15%;
+    line-height: 1.5;
+    background-image: linear-gradient(to right, #f39fbb, transparent );
+    /* background-color: #da8fa81f;
+    border-radius: 5px; */
+}
+
+
+.leave1 {
+    position: absolute;
+    right: 15%;
+    top: 50vh;
+    animation: leave 5s ease-in-out infinite;
+    transform: rotate(-45deg);
+    z-index: -1;
+    display: none;
+}
+
+
+.leave2 {
+    position: absolute;
+    top: 0;
+    animation: leave 8s ease-in-out infinite;
+    z-index: -1;
+}
+
+
+@keyframes leave {
+    0% {
+        transform: translatey(0px);
+    }
+
+    50% {
+        transform: translatey(-10px);
+    }
+
+    100% {
+        transform: translatey(0px);
+    }
+}
+
+
+.gallery {
+    padding-top: 6rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit , minmax(300px , 1fr));
+    align-items: center;
+    grid-gap: 10px;
+}
+
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 1.2rem;
+    width: 100%;
+    /* grid-auto-flow: dense; */
+}
+
+
+.column1,
+.column2 {
+    height: 100%;
+}
+
+
+.item1,
+.item2,
+.item3 {
+    width: 100%;
+    object-fit: fill;
+}
+
+
+.item2 {
+    margin-bottom: 1.2rem;
+}
+
+.item1 {
+    height: 99.2%;
+    object-fit: fill;
+}
+
+
+.gallery a {
+    display: block;
+    margin-top: 80px;
+    width: 15%;
+    line-height: 1.5;
+    background-image: linear-gradient(to right, #f39fbb, transparent );
+}
+
+
+.gallery a span {
+    color: black;
+    font-size: 1rem;
+    font-family: 'Montserrat', sans-serif;
+    border-bottom: 2px solid black;
+}
+
+
+.services-container {
+    padding-top: 6rem;
+    display: grid;
+    /* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); */
+}
+
+
+.services-content p {
+    margin-top: 40px;
+}
+
+
+.services-grid-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+
+.services-photo {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    opacity: 1;
+    object-fit: fill;
+}
+
+
+.services-image-ceremony {
+    position: relative;
+}
+
+
+.services-image-container {
+    width: 212px;
+    height: 400px;
+    margin: 10px;
+    position: relative;
+}
+
+
+.service-title-ceremony {
+    position: absolute;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: bold;
+    font-family: 'Montserrat', sans-serif;
+    background-image: linear-gradient(to right, #dd5e89, #f7bb97);
+    z-index: 1;
+    width: 100%;
+    padding: 1rem 25%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+
+.service-title-catering {
+    position: absolute;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: bold;
+    font-family: 'Montserrat', sans-serif;
+    background-image: linear-gradient(to right, #dd5e89, #f7bb97);
+    z-index: 1;
+    width: 100%;
+    padding: 1rem;
+    padding: 1rem 25%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+
+.services-image-photo {
+    position: relative;
+}
+
+
+.service-title-photo {
+    position: absolute;
+    text-align: center;
+    font-size: 1rem;
+    font-weight: bold;
+    font-family: 'Montserrat', sans-serif;
+    background-image: linear-gradient(to right, #dd5e89, #f7bb97);
+    z-index: 1;
+    width: 100%;
+    padding: 1rem 25%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+
+.services-image-container:hover {
+    transform: translatey(-10px);
+    box-shadow: 0px 5px 8px 2px #888888;
+    transition: all 0.5s;
+
+}
+
+
+.about-container {
+    padding-top: 6rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+    grid-gap: 20px;
+}
+
+
+.about-column2 {
+    overflow: hidden;
+}
+
+.about-column1 {
+position: relative;
+}
+
+
+.column1-intro-img {
+    width: 28%;
+}
+
+
+.about-text {
+    margin-top: 40px;
+}
+
+
+.about-column2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+
+.about-column2 img {
+    margin-top: 40px;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+}
+
+
+.carousel-container {
+    padding-top: 6rem;
+    font-family: 'Montserrat', sans-serif;
+}
+
+
+ol.carousel-indicators li {
+    background-color: #f7bb97;
+    color: #283244;
+}
+
+
+ol.carousel-indicators li.active {
+    background-color: #dd5e89;
+}
+
+
+.carousel-image-container {
+    width: 30%;
+}
+
+
+.profile-name {
+    font-size: 1.125rem;
+    font-weight: bold;
+    padding: 0;
+    margin: 0;
+}
+
+
+.caption {
+    margin-top: 10px;
+    font-weight: normal;
+    font-size: 1rem;
+}
+
+
+.carousel-images {
+    width: 70%;
+    border: 5px solid #dd5e89;
+}
+
+
+.carousel-image-container {
+    font-size: 1.125rem;
+    font-weight: bold;
+}
+
+
+.carousel {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+
+.carousel-item .profile-brief {
+    width: 60%;
+    margin-left: 0px;
+}
+
+
+.carousel-control-prev , .carousel-control-next {
+    width: 5%;
+}
+
+
+.carousel-control-prev-icon {
+    background-image: url("/images/arrow-left.png");
+}
+
+
+.carousel-control-next-icon {
+    background-image: url("/images/arrow-right.png");
+}
+
+
+.contact-container {
+    padding-top: 4rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+    grid-column-gap: 10px;
+    width: 100%;
+}
+
+
+.contact-no {
+    margin: 20px 0;
+}
+
+
+.contact-container a {
+    display: block;
+    width: 15%;
+    border-radius: 5px;
+    background-color: #da8fa81f;
+}
+
+
+.contact-container a span {
+    color: black;
+    font-size: 1rem;
+    font-family: 'Montserrat', sans-serif;
+    border-bottom: 2px solid black;
+}
+
+
+.contact-container p:nth-child(4) {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 20px;
+    margin-top: 20px;
+}
+
+
+.contact {
+    border-radius: 5px;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+    /* width: 50%; */
+    align-self: center;
+}
+
+
+.contact-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+.form {
+    margin: 10px 0px;
+    padding-bottom: 12px;
+}
+
+.form label {
+    display: block;
+    text-align: left;
+}
+
+.form input,
+textarea {
+    width: 98%;
+    background-color: #ffffff00;
+    border: none;
+    margin-top: 5px;
+    border-bottom: 0.5px solid gray;
+    outline: none;
+    font-size: 16px;
+}
+
+
+.send {
+    text-align: left;
+}
+
+.send-btn {
+    /* width: 100%; */
+    padding: 10px 40px 10px 5px;
+    background-image: linear-gradient(to right, #dd5e89, #f7bb97);
+    cursor: pointer;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    font-size: 16px;
+    border-width: 0px;
+    outline: none;
+}
+
+
+footer {
+    width: 100%;
+    height: 20vh;
+    font-size: 0.8rem;
+    margin-top: 1rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #fffafb;
+}
+
+
+footer ul li a:hover {
+    color: black;
+    text-decoration: underline;
+}
+
+
+.leaves-group {
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    top: 0%;
+    width: 45%;
+    animation: leave 5s ease-in-out infinite;
+}
+
+
+.bubble {
+    position: absolute;
+    z-index: -1;
+    bottom: 20vh;
+    left: -10%;
+    animation: leave 5s ease-in-out infinite;
+    width: 40%;
+}
+
+
+
+
+
+
+
+
+
+
+
+.nav-mobile {
+    display: flex;
+    position: fixed;
+    /* top: 60px; */
+    left: -100vw;
+    width: 100vw;
+    height: 100%;
+    cursor: not-allowed;
+    z-index: 100;
+    transition: all ease-in-out 0.5s;
+    top: 0;
+    bottom: 0;
+    overflow-y: scroll;
+    display: none;
+}
+
+
+.toggleNav {
+    left: 0;
+}
+
+
+.nav-mobile-links {
+    width: 70vw;
+    background-color: #fffafb;
+}
+
+
+.close-btn {
+    width: 30vw;
+    cursor: pointer;
+    margin-top: 0.2rem;
+}
+
+
+.close-btn img {
+    width: 2rem;
+}
+
+
+
+
+.nav-mobile-links ul {
+    /* position: absolute; */
+    /* left: -60vh; */
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-mobile ul li {
+    margin: 20px 0px 20px 20px; 
+}
+
+.mobile-links {
+    margin: 10px;
+    font-family: sans-serif;
+    font-size: 18px;
+}
+
+
+.mobile-links a {
+    color: #707070;
+    position: relative;
+}
+
+
+.mobile-links a::before {
+    content: "";
+    position: absolute;
+    width: 0%;
+    top: 100%;
+    left: 0;
+    background-color: #707070;
+    height: 2px;
+}
+
+
+.mobile-links a.active::before {
+    width: 100%;
+}
+
+
+.mobile-links a:hover::before {
+    width: 100%;
+    transition: all 0.5s;
+}
+
+@media only screen and (max-width: 480px) {
+
+    body {
+        position: relative;
+    }
+    .hamburger {
+        display: block;
+    }
+
+
+    .right {
+        display: none;
+    }
+
+
+    h1 {
+        font-size: 3rem;
+    }
+
+
+    /* p {
+        margin: 0.6rem 0 0 0;
+    } */
+
+
+    .text-content {
+        font-size: 1rem;
+    }
+
+
+    .border-image {
+        width: 60%;
+        top: 22vh;
+        right: 0;
+    }
+
+
+    .intro-subtext-container {
+        padding-top: 1.8rem;
+    }
+
+
+    .quote {
+        font-size: 1.125rem;
+        line-height: 1.2;
+    }
+    
+    
+    .quote-container {
+        padding-top: 4rem;
+    }
+
+
+    .author {
+        font-family: 'Montserrat', sans-serif;
+        font-size: 0.8rem;
+        width: 25%;
+        line-height: 1.2;
+    }
+
+
+    .leave1 {
+        position: absolute;
+        width: 55%;
+        right: -25%;
+        top: 50vh;
+        animation: leave 5s ease-in-out infinite;
+        transform: rotate(-45deg);
+        z-index: -1;
+    }
+
+
+    .leave2 {
+        position: absolute;
+        width: 55%;
+        top: 0;
+        left: -20%;
+        animation: leave 8s ease-in-out infinite;
+        z-index: -1;
+    }
+
+
+    .gallery {
+        padding-top: 4rem;
+        grid-gap: 1.2rem;
+    }
+
+    .item2 {
+        margin-bottom: 1.2rem;
+    }
+
+
+    .gallery a {
+        margin-top: 3rem;
+    }
+    
+    
+    .gallery a span {
+        font-size: 0.8rem;
+    }
+
+
+    .services-container {
+        padding-top: 4rem;
+    }
+
+
+    
+    
+}
+
+
+
+@media only screen and (max-width: 660px) {
+    
+    .navbar {
+        align-items: unset;
+        justify-content: unset;
+    }
+    
+
+    
+}
+
+@media only screen and (max-width: 740px) {
+        .hamburger {
+            display: block;
+        }
+
+        .nav-mobile {
+            display: flex;
+        }
+        
+        .contact-img {
+            display: none;
+        }
+        
+        .bubble {
+            width: 95%;
+            bottom: 20vh;
+        }
+        .right {
+            display: none;
+        }
+
+        .author {
+            width: 25%;
+        }
+        
+    }
\ No newline at end of file
diff --git a/images/209-2095958_mind-wallpaper.jpg b/images/209-2095958_mind-wallpaper.jpg
new file mode 100644
index 0000000..9294e74
Binary files /dev/null and b/images/209-2095958_mind-wallpaper.jpg differ
diff --git a/images/209-2096066_vk478-mind-wallpapers-px-4usky.jpg b/images/209-2096066_vk478-mind-wallpapers-px-4usky.jpg
new file mode 100644
index 0000000..74be58e
Binary files /dev/null and b/images/209-2096066_vk478-mind-wallpapers-px-4usky.jpg differ
diff --git a/images/60a4f85884017b001f225702.jpg b/images/60a4f85884017b001f225702.jpg
new file mode 100644
index 0000000..6abfc0d
Binary files /dev/null and b/images/60a4f85884017b001f225702.jpg differ
diff --git a/images/993340ead5f9e949e4cdc9fe355d3637.jpg b/images/993340ead5f9e949e4cdc9fe355d3637.jpg
new file mode 100644
index 0000000..630d22e
Binary files /dev/null and b/images/993340ead5f9e949e4cdc9fe355d3637.jpg differ
diff --git a/images/9ebc5ec9-brain.jpg b/images/9ebc5ec9-brain.jpg
new file mode 100644
index 0000000..cb42493
Binary files /dev/null and b/images/9ebc5ec9-brain.jpg differ
diff --git a/images/High_resolution_wallpaper_background_ID_77701448146.jpg b/images/High_resolution_wallpaper_background_ID_77701448146.jpg
new file mode 100644
index 0000000..85abf22
Binary files /dev/null and b/images/High_resolution_wallpaper_background_ID_77701448146.jpg differ
diff --git a/images/Path 2.png b/images/Path 2.png
new file mode 100644
index 0000000..962468f
Binary files /dev/null and b/images/Path 2.png differ
diff --git a/images/Path 2.svg b/images/Path 2.svg
new file mode 100644
index 0000000..628685b
--- /dev/null
+++ b/images/Path 2.svg	
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="327.622" height="258.25" viewBox="0 0 327.622 258.25">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#dd5e89" stop-opacity="0.988"/>
+      <stop offset="1" stop-color="#f7bb97"/>
+    </linearGradient>
+  </defs>
+  <path id="Path_2" data-name="Path 2" class="cls-1" d="M1846.182,133.282c7.7,20.227,35.629,29.859-4.815,79.944-25.037,33.711-24.33,50.229-85.7,61.643-1.531.285-13.594-.345-15.407,0-67.166,12.762-146.369-26.006-146.369-26.006s-40.444-35.638,0-85.723,105.925-24.079,132.888-55.864,109.777,8.669,109.777,8.669l-13.481-8.669Z" transform="matrix(0.956, -0.292, 0.292, 0.956, -1534.855, 453.678)"/>
+</svg>
diff --git a/images/arrow-left.png b/images/arrow-left.png
new file mode 100644
index 0000000..d62e9ab
Binary files /dev/null and b/images/arrow-left.png differ
diff --git a/images/arrow-right.png b/images/arrow-right.png
new file mode 100644
index 0000000..169933f
Binary files /dev/null and b/images/arrow-right.png differ
diff --git a/images/avatar.jpg b/images/avatar.jpg
new file mode 100644
index 0000000..e74bc70
Binary files /dev/null and b/images/avatar.jpg differ
diff --git a/images/bubble.png b/images/bubble.png
new file mode 100644
index 0000000..c96db3c
Binary files /dev/null and b/images/bubble.png differ
diff --git a/images/close.png b/images/close.png
new file mode 100644
index 0000000..839711e
Binary files /dev/null and b/images/close.png differ
diff --git a/images/leave1.png b/images/leave1.png
new file mode 100644
index 0000000..f4f6a4c
Binary files /dev/null and b/images/leave1.png differ
diff --git a/images/leave2.png b/images/leave2.png
new file mode 100644
index 0000000..e53cfc2
Binary files /dev/null and b/images/leave2.png differ
diff --git a/images/leaves-group.png b/images/leaves-group.png
new file mode 100644
index 0000000..59a4b66
Binary files /dev/null and b/images/leaves-group.png differ
diff --git a/images/link-solid.svg b/images/link-solid.svg
new file mode 100644
index 0000000..586901d
--- /dev/null
+++ b/images/link-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link" class="svg-inline--fa fa-link fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
\ No newline at end of file
diff --git a/images/unnamed.jpg b/images/unnamed.jpg
new file mode 100644
index 0000000..0d47b32
Binary files /dev/null and b/images/unnamed.jpg differ
diff --git a/images/wp5193725.jpg b/images/wp5193725.jpg
new file mode 100644
index 0000000..dfb2669
Binary files /dev/null and b/images/wp5193725.jpg differ
diff --git a/index.html b/index.html
index 950622c..c560558 100644
--- a/index.html
+++ b/index.html
@@ -2,24 +2,322 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Minds & Souls</title>
-  <link rel="stylesheet" href="css/style.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant&family=Montserrat&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Mind & Souls</title>
 </head>
 
 <body>
-  <header class="header">
-    <h1>Welcome to our website</h1>
-  </header>
-  <main class="main">
+    <nav>
+        <div class="navbar">
+            <div class="left">
+                <div class="hamburger">
+                    <div class="firstbar"></div>
+                    <div class="secondbar"></div>
+                </div>
+                <div class="logo">Navbar</div>
+            </div>
+            <div class="right">
+                <ul>
+                    <li class="links"><a href="#home">Home</a></li>
+                    <li class="links"><a href="#gallery">Gallery</a></li>
+                    <li class="links"><a href="#services">Services</a></li>
+                    <li class="links"><a href="#about">About</a></li>
+                    <li class="links"><a href="#contact">Contact</a></li>
+                </ul>
+            </div>
+    </nav>
+    <div class="nav-mobile">
+        <div class="nav-mobile-links">
+            <ul>
+                <li class="mobile-links"><a href="#">Home</a></li>
+                <li class="mobile-links"><a href="#gallery">Gallery</a></li>
+                <li class="mobile-links"><a href="#services">Services</a></li>
+                <li class="mobile-links"><a href="#about">About</a></li>
+                <li class="mobile-links"><a href="#contact">Contact</a></li>
+            </ul>
+        </div>
+        <div class="close-btn">
+            <img src="images/close.png" alt="">
+        </div>
+    </div>
+    </div>
+    <div class="container">
+        <div class="intro">
 
-  </main>
-  <footer class="footer">
+            <h1>Two words</h1>
+            <h1>two words</h1>
+            <h1>lorem</h1>
+            <div class="intro-subtext-container">
+                <p class="text-content">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
+                <p class="text-content">Ex vitae incidunt alias consequatur dolorum,</p>
+                <p class="text-content"> Autem consectetur nisi magnam,  quae ad.</p>
+            </div>
+            <div class="quote-container">
+                <p class="quote">“Productivity is never an accident. It is always the result of a commitment to
+                    excellence, intelligent</p>
+                <p class="quote">planning, and focused effort.”</p>
+                <p class="author">Paul J. Meyer</p>
+            </div>
 
-  </footer>
-  <script src="js/index.js"></script>
+        </div>
+        <div class="border-image">
+            <img src="images/209-2095958_mind-wallpaper.jpg" alt="">
+        </div>
+
+
+        <div class="gallery" id="gallery">
+            <div class="gallery-text">
+                <h1>Gallery</h1>
+                <div class="intro-subtext-container">
+                    <p class="text-content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime modi facilis a molestias ipsum, perferendis dolor dicta dolorem voluptates. Nesciunt eveniet accusantium repellendus quis ullam itaque aperiam voluptatem harum illum.
+                    </p>
+
+                </div>
+            </div>
+            <div class="grid">
+                <div class="column1">
+                    <img src="images/209-2095958_mind-wallpaper.jpg" alt="" class="item1">
+                </div>
+                <div class="column2">
+                    <img src="images/wp5193725.jpg" alt="" class="item2">
+                    <img src="images/9ebc5ec9-brain.jpg" alt="" class="item3">
+                </div>
+            </div>
+        </div>
+
+
+        <div class="services-container" id="services">
+            <div class="services-content">
+                <h1>Our services</h1>
+                <p class="text-content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam harum provident perferendis dolore voluptates, praesentium quam ni</p>
+            </div>
+            <div class="services-grid-container">
+                <div id="service-ceremony-container" class="services-image-container">
+                    <span class="service-title-ceremony"><img width="16px" src="images/icon.png" alt="">
+                        Service</span>
+                    <img src="images/993340ead5f9e949e4cdc9fe355d3637.jpg" alt="" class="services-photo services-image-ceremony">
+                </div>
+
+                <div id="service-catering-container" class="services-image-container">
+                    <span class="service-title-catering"><img width="16px" src="images/icon.png" alt="">Service</span>
+                    <img src="images/993340ead5f9e949e4cdc9fe355d3637.jpg" alt="" class="services-photo services-image-catering">
+                </div>
+
+                <div id="service-photo-container" class="services-image-container">
+                    <span class="service-title-photo"><img width="16px" src="images/icon.png" alt="">Service</span>
+                    <img src="images/993340ead5f9e949e4cdc9fe355d3637.jpg" alt="" class="services-photo services-image-photo">
+                </div>
+
+
+            </div>
+        </div>
+
+        <div class="about-container" id="about">
+            <div class="about-column1">
+                <img class="column1-intro-img" src="images/209-2096066_vk478-mind-wallpapers-px-4usky.jpg" alt="">
+                <h1>We are</h1>
+                <p class="about-text text-content">
+                    We are so experienced in this field that we give our best in every event and make it unique. We try
+                    not to repeat ourselves in each and every event.
+                </p>
+                <p class="about-text text-content">It is the result of our work that we have a good name in this field.
+                    We do what we can do to make your event special and unique either it is a big function like marriage
+                    or small one like someone's anniversary.</p>
+                <p class="about-text text-content">
+                    We offer different kinds of ideas for your event. We are always honest with you. We know the worth
+                    of every penny.
+                </p>
+
+                <img src="images/leaves-group.png" alt="" class="leaves-group">
+
+            </div>
+            <div class="about-column2">
+                <p class="text-content">We strongly believe that your event should be great, and we go above and beyond
+                    to make your dream day more than you could ever umagined.</p>
+                <img src="images/60a4f85884017b001f225702.jpg" alt="">
+            </div>
+
+        </div>
+
+
+        <div class="carousel-container">
+            <h1>Testimonials</h1>
+
+            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+                <ol class="carousel-indicators">
+                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+                </ol>
+                <div class="carousel-inner">
+                    <div class="carousel-item active">
+
+                        <div class="carousel">
+                            <div class="carousel-image-container">
+                                <img class="carousel-images" src="images/avatar.jpg" alt="">
+                                <p class="profile-name">First Last</p>
+                                <p class="caption">Position</p>
+
+                            </div>
+                            <p class="profile-brief">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam
+                                blanditiis expedita incidunt
+                                quam corrupti ipsum at sit culpa</p>
+                        </div>
+
+                    </div>
+                    <div class="carousel-item">
+
+                        <div class="carousel">
+                            <div class="carousel-image-container">
+                                <img class="carousel-images" src="images/avatar.jpg" alt="">
+                                <p class="profile-name">First Last</p>
+                                <p class="caption">Position</p>
+
+                            </div>
+                            <p class="profile-brief">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam
+                                blanditiis expedita incidunt
+                                quam corrupti ipsum at sit culpa</p>
+                        </div>
+
+
+                    </div>
+                    <div class="carousel-item">
+                        <div class="carousel">
+                            <div class="carousel-image-container">
+                                <img class="carousel-images" src="images/avatar.jpg" alt="">
+                                <p class="profile-name">First Last</p>
+                                <p class="caption">Position</p>
+
+                            </div>
+                            <p class="profile-brief">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam
+                                blanditiis expedita incidunt
+                                quam corrupti ipsum at sit culpa</p>
+                        </div>
+                    </div>
+                </div>
+                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                    <span class="sr-only">Previous</span>
+                </a>
+                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                    <span class="sr-only">Next</span>
+                </a>
+            </div>
+
+
+        </div>
+
+
+
+
+        <div class="contact-container" id="contact">
+            <div class="contact">
+                <h1>Contact-us</h1>
+                <p class="contact-no text-content">123-456-7830</p>
+                <a href="tel:+11234567890"><span>Call us</span></a>
+                <p>Or fill out this form</p>
+                <form id="form">
+                    <div class="form">
+                        <label for="from_name">Your Name</label>
+                        <input autocomplete="off" type="text" name="from_name" id="from_name"
+                            placeholder="Enter Your Name">
+                    </div>
+                    <div class="form">
+                        <label for="reply_to">Email</label>
+                        <input autocomplete="off" type="text" name="reply_to" id="reply_to"
+                            placeholder="Enter Your Name">
+                    </div>
+                    <div class="form">
+                        <label for="to_name">Phone No.</label>
+                        <input autocomplete="off" type="text" name="to_name" id="to_name" placeholder="Enter Your Name">
+                    </div>
+                    <div class="form">
+                        <label for="from_name">Message</label>
+                        <textarea name="message" id="message" placeholder="Your Message Here"></textarea>
+                    </div>
+                    <div class="send">
+                        <input class="send-btn" type="submit" id="button" value="Send Email">
+                    </div>
+                </form>
+            </div>
+            <div class="contact-img">
+                <img src="images/unnamed.jpg" alt="">
+            </div>
+
+        </div>
+
+
+
+
+
+    </div>
+
+
+    <footer>
+
+        ©Anybody
+        <ul class="social">
+            <li><a href="#">Twitter</a></li>
+            <li><a href="#">Facebook</a></li>
+            <li><a href="#">Instagram</a></li>
+        </ul>
+
+
+        <ul class="navigation">
+            <li><a href="#home">Home</a></li>
+            <li><a href="#gallery">Gallery</a></li>
+            <li><a href="#services">Services</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+        </ul>
+
+
+        <ul class="formalities">
+            <li><a href="#">Disclaimer</a></li>
+            <li><a href="#">Privacy</a></li>
+            <li><a href="#">Terms</a></li>
+        </ul>
+
+    </footer>
+
+
+    <img class="leave1" src="images/leave1.png" alt="">
+    <img src="images/leave2.png" alt="" class="leave2">
+    <img src="images/bubble.png" alt="" class="bubble">
+
+
+
+
+
+
+
+
+
+
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
+    </script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
+    </script>
+    <script src="js/main.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
+    <script src="/js/userId.js"></script>
+    <script src="/js/email.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/email.js b/js/email.js
new file mode 100644
index 0000000..75fb129
--- /dev/null
+++ b/js/email.js
@@ -0,0 +1,18 @@
+const btn = document.getElementById('button');
+
+document.getElementById('form').addEventListener('submit', function (event) {
+    event.preventDefault();
+
+    btn.value = 'Sending...';
+
+    const serviceID = 'default_service';
+    const templateID = 'template_h24lzzr';
+
+    emailjs.sendForm(serviceID, templateID, this).then(() => {
+        btn.value = 'Send Email';
+        alert('Sent!');
+    }, (err) => {
+        btn.value = 'Send Email';
+        alert(JSON.stringify(err));
+    });
+});
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..7d4ef93
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,26 @@
+let x = document.querySelector(".hamburger");
+var y = document.querySelector(".nav-mobile");
+var z = document.querySelector(".close-btn");
+let mobileLinks = document.querySelectorAll(".mobile-links");
+
+x.addEventListener("click", () => {
+    y.classList.toggle("toggleNav");
+    console.log(y);
+});
+
+// document.addEventListener("scroll" , () => {
+//     y.classList.remove("toggleNav");
+// });
+
+z.addEventListener("click" , () => {
+    y.classList.remove("toggleNav");
+});
+
+
+
+for (let index = 0; index < mobileLinks.length; index++) {
+    mobileLinks[index].addEventListener( "click" , (e) => {
+        y.classList.remove("toggleNav");    
+    });
+    
+}
diff --git a/js/userId.js b/js/userId.js
new file mode 100644
index 0000000..897d36c
--- /dev/null
+++ b/js/userId.js
@@ -0,0 +1 @@
+emailjs.init("");
\ No newline at end of file