diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 0000000..a40a6c4
--- /dev/null
+++ b/css/responsive.css
@@ -0,0 +1,169 @@
+/* mobile responsiveness design */
+@media screen and (max-width: 990px) {
+  .contact_us {
+    flex-direction: column;
+    width: 100%;
+  }
+  form,
+  .cbox {
+    margin: auto;
+    margin-bottom: 30px;
+  }
+}
+@media screen and (max-width: 1130px) {
+  .menu-btn {
+    display: block;
+  }
+
+  .navbar {
+    padding: 45px;
+  }
+
+  .logo {
+    position: absolute;
+    top: 30px;
+    left: 15px;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+    background: #484872;
+    margin-top: -900px;
+    transition: all 0.5s ease;
+  }
+
+  .mobile-menu {
+    margin-top: 602px;
+    border-bottom-right-radius: 30%;
+  }
+
+  .nav-links li {
+    margin: 30px auto;
+  }
+}
+
+@media screen and (max-width: 1440px) {
+	 .containerx {
+	  top: 40%;
+	  bottom: 40%;
+	  transform-style: preserve-3d;
+	}
+	
+	#about_us div {
+		padding: 10px;
+		display: block;
+		align-items: normal;
+	}
+	
+	.cards {
+		position: relative;
+		width: 90vw;
+		height: 100%;
+	}
+	
+	#about-quad {
+		display: none;
+	}
+}
+
+@media only screen and (max-width: 850px) {
+  /*events*/
+  .row {
+    flex-direction: column;
+  }
+
+  .row .col {
+    margin: 20px auto;
+  }
+
+  .col img {
+    max-width: 90%;
+  }
+
+  /*explore*/
+  .explore-content {
+    width: 100%;
+  }
+
+  /*tours*/
+  .tours {
+    width: 100%;
+  }
+
+  /*footer*/
+  .footer {
+    padding: 10px;
+  }
+  .content-col {
+    width: 100%;
+  }
+  #about_us p {
+    width: 70%;
+  }
+}
+
+@media screen and (max-width: 770px) {
+  #about_us p {
+    width: 85%;
+    padding-top: 7em;
+    margin: auto;
+  }
+  form,
+  .cbox {
+    width: 90%;
+  }
+  .ctn {
+    margin: auto;
+  }
+
+  .explore-content {
+    margin: 0 auto;
+    text-align: center;
+    width: 80%;
+  }
+
+  .explore-content .ctn {
+    margin: 40px auto;
+  }
+}
+@media screen and (max-width: 600px) {
+  #about_us p {
+    margin: auto;
+  }
+}
+@media screen and (max-width: 470px) {
+  .ctn {
+    padding: 13px 25px;
+  }
+  .c_boxx a p {
+    font-size: 17.5px;
+  }
+}
+@media screen and (max-width: 400px) {
+  .ctn {
+    padding: 13px 25px;
+  }
+  .c_boxx a p {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 850px) {
+  .content-col {
+    text-align: center;
+  }
+  .content-col .line {
+    margin: 0.5rem auto;
+  }
+  .content-col .ctn {
+    margin: 0 auto;
+    position: inherit;
+  }
+  .content-col p {
+    max-width: 75%;
+    text-align: justify;
+  }
+}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..218a6a6
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,862 @@
+/* Google fonts */
+
+@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Montserrat:wght@400;800&family=Parisienne&family=Roboto&family=Teko:wght@300&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap");
+
+@im
+
+
+
+
+/* Root element (aka html) */
+:root {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+
+  /* CSS Variables */
+  /* Fonts */
+  --ff-parisienne: "Parisienne", cursive;
+  --ff-montserrat: "Montserrat", sans-serif;
+  --ff-lora: "Lora", serif;
+  --ff-roboto: "Roboto", sans-serif;
+  --ff-rubik-dirt: "Rubik Dirt", cursive;
+  --fs-paragraphs: calc(0.8rem + 0.35vw);
+  --fs-links-btns: calc(0.65rem + 0.5vw);
+}
+
+/* Global */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+a {
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+}
+
+span {
+  color: #7c7c7c;
+  padding: 0px 40px;
+}
+
+/* .active {
+  color: #fc036b;
+  border-radius: 20px;
+  background: whitesmoke;
+  font-weight: bold;
+} */
+
+body,
+html {
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+.container {
+  width: 98%;
+  max-width: 91rem;
+  margin: 0 auto;
+}
+
+#main{
+  color: black;
+}
+
+/*scrollbar*/
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: gray;
+  border-radius: 10px;
+}
+
+/* Navbar */
+
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: saturate(180%) blur(10px);
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 5px;
+  z-index: 10;
+  color: whitesmoke;
+}
+
+.logo {
+  font-family: 'New Century Schoolbook', 'TeX Gyre Schola', serif;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.4rem;
+  padding: 0 1.2rem;
+  font-weight: 300;
+  color: rgb(254, 252, 252); 
+}
+
+.nav-links {
+  display: flex;
+  align-items: center;
+}
+
+.nav-links li {
+  font-family: var(--ff-montserrat);
+  margin: 0px 15px;
+}
+
+.nav-links li a {
+  color: white;
+  cursor: pointer;
+}
+
+.cir_border {
+  padding: 6px 20px;
+  font-weight: bold;
+  border: 2px hidden whitesmoke;
+  border-radius: 20px;
+  margin: 0px -10px;
+}
+
+header {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../img/front.jpg");
+  background-position: bottom;
+  background-attachment: fixed;
+  background-size: cover;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+}
+
+.header-content {
+  font-family: var(--ff-lora);
+  letter-spacing: 0.5rem;
+  color: whitesmoke;
+  text-align: center;
+  z-index: 1;
+  padding: 4rem;
+  margin-bottom: 150px;
+}
+
+.header-content a {
+  letter-spacing: 0.1rem;
+}
+
+.header-content h2 {
+  font-size: 4vmin;
+}
+
+.line {
+  width: 150px;
+  height: 4px;
+  background: #fc036b;
+  margin: 10px auto;
+  border-radius: 5px;
+}
+
+.header-content h1 {
+  font-size: 7vmin;
+  margin-top: 50px;
+  margin-bottom: 30px;
+}
+
+.ctn {
+  font-family: var(--ff-montserrat);
+  font-size: var(--fs-links-btns);
+  font-weight: 700;
+  padding: 13px 50px;
+  background: #fc036b;
+  border-radius: 30px;
+  color: whitesmoke;
+}
+
+.menu-btn {
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  width: 40px;
+  cursor: pointer;
+  display: none;
+}
+
+/* Events */
+section {
+  width: 80%;
+  margin: 80px auto;
+}
+
+.title {
+  text-align: center;
+  font-family: var(--ff-montserrat);
+  font-size: 4vmin;
+}
+
+.row {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card {
+  cursor: pointer;
+  height :400px
+}
+
+.row .col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 10px;
+  height: 450px;
+}
+
+.row .col img {
+  width: 90%;
+}
+
+.events .row {
+  margin-top: 50px;
+}
+
+.col > h4 {
+  font-size: calc(1rem + 0.5vw);
+  margin: 20px auto;
+  font-family: var(--ff-lora);
+}
+
+.col p {
+  color: #7c7c7c;
+  padding: 0px 40px;
+  font-size: var(--fs-paragraphs);
+  font-family: var(--ff-roboto);
+}
+
+.col > p {
+  color: #7c7c7c;
+  padding: 0;
+  line-height: 1.5;
+  text-align: center;
+  max-width: 35ch;
+}
+
+.events .ctn {
+  margin-top: 30px;
+}
+
+/* explore */
+.explore {
+  width: 100%;
+  height: 100vh;
+  background-image: url(../img/video.gif);
+  background-attachment: fixed;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+}
+
+.explore-content , .main{
+  font-family: var(--ff-lora);
+  color: whitesmoke;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin-left: 8rem;
+  position: relative;
+  z-index: 1;
+  padding: 2rem 30px;
+  margin: auto;
+}
+
+.explore-content::after, .main::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  display: block;
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(2.5px);
+  border-radius: 0.5rem;
+}
+
+.explore-content h1 {
+  /* width: 100%; */
+  font-size: calc(2.2rem + 1vw);
+  letter-spacing: 0.3rem;
+  margin: auto;
+}
+
+.explore-content .line {
+  margin-bottom: 50px;
+}
+
+.explore-content p {
+  color: rgb(221, 221, 221);
+  max-width: 65ch;
+  line-height: 1.5;
+  text-align: left;
+  padding: 0px 35px;
+}
+
+.explore-content .ctn {
+  margin: 17px auto;
+  padding: 12px 27px;
+}
+
+/* tours */
+.image-gallery {
+  display: grid;
+  gap: 1.8rem 1rem;
+  grid-template-columns: repeat(3, 2fr);
+  justify-content: center;
+  padding: 1rem;
+}
+
+/* tours */
+.image-col .image-gallery{
+  display: flex;
+  flex-wrap:wrap ;
+  gap: 1rem;
+  justify-content: center;
+  
+  padding: 0.5rem;
+  margin: 0;
+}
+.image-col .image-gallery .top, .image-col .image-gallery .bottom{
+  display: flex;
+  flex-wrap:wrap ;
+  gap: 1rem 1rem;
+  justify-content: center;
+  
+  padding: 1rem;
+  margin: 1rem auto;
+}
+
+.caption h3{
+  font-size: calc(1.5rem);
+  font-family: var(--ff-lora);
+  text-align: center;
+  padding-top:10px;
+}
+
+.tours .row {
+  gap: 4rem;
+}
+
+.content-col {
+  position: relative;
+}
+
+.content-col h1 {
+  font-size: calc(2.2rem + 1vw);
+  font-family: var(--ff-lora);
+  max-width: 15.5ch;
+  
+}
+
+.content-col .line {
+  margin-left: 0;
+}
+
+.content-col p {
+  padding: 0;
+  margin: 30px 0;
+  width: 100%;
+  text-align: left;
+  max-width: 40ch;
+}
+
+.content-col .ctn {
+  position: absolute;
+  left: 0;
+  bottom: -14%;
+}
+
+/* about */
+#about {
+  width: 100%;
+  padding: 100px 1rem 175px ;
+}
+
+#about_us .about {
+
+  font-size: 1.5rem;
+  width:100%;
+  text-align: justify;
+  margin:100px;
+  align-items:center;
+}
+
+
+#about_us div {
+  padding: 10px;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 2fr 1fr 1fr;
+  column-gap: 5px;
+  position: relative;
+}
+
+#about_us .about{
+  display:flex;
+}
+
+#about_us div span {
+  margin: 0;
+  position: absolute;
+  top: 60%;
+  opacity: 0;
+  left: 80%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  transition: 1s;
+}
+
+#about_us p {
+  width: 43em;
+  color: white;
+  text-align: justify;
+  padding-top: 14em;
+  font-family: "Work Sans", sans-serif;
+  margin-left: 6em;
+}
+
+#about_us p::first-letter {
+  padding-left: 47px;
+  font-size: 55px;
+  color: #fc036b;
+}
+
+/* contact */
+#contact {
+  width: 90%;
+}
+
+.contact_us {
+  margin-top: 3rem;
+  display: flex;
+  font-family: var(--ff-roboto);
+}
+
+form {
+  width: 50%;
+}
+
+.cbox {
+  width: 45%;
+  margin-left: 70px;
+  padding: 10px 30px;
+}
+
+.cbox-message {
+  font-size: 1.2em;
+  margin: 0;
+}
+
+.cbox-line {
+  width: 20%;
+  height: 0.2em;
+  background-color: #fb036b;
+  margin-bottom: 3em;
+  margin-top: 1em;
+}
+
+.c_boxx a p {
+  color: white;
+  font-size: 1em;
+  font-weight: 100;
+  padding: 1rem;
+  padding: 0px 40px;
+}
+
+.c_boxx a {
+  padding: 1em;
+  margin-bottom: 2em;
+  padding-left: 2em;
+  border: 0.1em solid #fc036b;
+  background-color: #fc036b;
+  color: white;
+  display: flex;
+  border-radius: 2em;
+  align-items: center;
+  border: #fc036b 0.1em solid;
+  font-size: 1em;
+}
+
+.c_boxx a:hover {
+  background-color: white;
+  color: #fc036b;
+  transition: all 0.5s ease;
+}
+
+.c_boxx i {
+  font-size: 38px;
+  margin-right: 10px;
+  /* margin-left: 0.5em; */
+}
+
+input[type="text"],
+select,
+textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  resize: vertical;
+}
+
+label {
+  padding: 0px 0px 7px 6px;
+  display: inline-block;
+}
+
+input[type="submit"] {
+  background-color: #fc036b;
+  color: whitesmoke;
+  padding: 12px 50px;
+  border: 2px solid #fc036b;
+  border-radius: 100vmax;
+  cursor: pointer;
+  font-family: var(--ff-montserrat);
+  font-size: var(--fs-links-btns);
+}
+
+input[type="submit"]:hover {
+  background-color: whitesmoke;
+  color: #fc036b;
+}
+
+.cform {
+  background-color: #222;
+  padding: 1em;
+  border-radius: 0.5rem;
+}
+
+.ccol {
+  float: left;
+  width: 25%;
+  margin-top: 6px;
+}
+
+.crow-in {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.crow-message {
+  margin: 1rem;
+}
+
+.crow-message div {
+  width: 20%;
+  display: block;
+  height: 1em;
+  border-bottom: 3px solid #fc036b;
+}
+
+.ccol-left {
+  margin: 1em;
+}
+
+.ccol {
+  float: left;
+  width: 100%;
+  margin-top: 6px;
+}
+
+#name {
+  width: 90%;
+  margin: 1em;
+}
+
+#email {
+  width: 90%;
+  margin: 1em;
+}
+
+.crow:after,
+.crow-s::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.crow-s {
+  margin: 1em;
+  color: #fc036b;
+}
+
+/* footer */
+.footer {
+  width: 100%;
+  min-height: 100px;
+  padding: 20px 80px;
+  margin: 0;
+  background: #222;
+  text-align: center;
+}
+
+.footer p {
+  color: whitesmoke;
+  margin: 20px auto;
+  padding: 20px auto;
+}
+
+.footer span {
+  display: block;
+  color: whitesmoke;
+  padding: 20px auto;
+}
+
+.social {
+  width: 360px;
+  margin: 30px auto;
+}
+
+.social li {
+  list-style: none;
+}
+
+.social a {
+  margin-right: 10px;
+  font-size: 18px;
+  background-color: transparent;
+  border-radius: 50%;
+  padding: 5px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.social a:hover {
+  background-color: #fc036b;
+}
+
+.social i {
+  display: inline;
+  text-align: center;
+  color: whitesmoke;
+}
+
+/* animations */
+img {
+  transition: transform 0.3s ease;
+}
+
+img:hover {
+  transform: scale(1.1);
+}
+
+.cir_border:hover{
+    color: #fc036b
+}
+.active {
+  border: 2px solid whitesmoke;
+  border-radius: 20px;
+  color: #fc036b;
+  cursor: pointer;
+}
+
+.ctn:hover {
+  background: whitesmoke;
+  color: #fc036b;
+  box-shadow: 2px 2px 5px #00000056;
+  cursor: pointer;
+}
+
+.nav-links .ctn:hover a {
+  color: #fc036b;
+}
+
+body {
+ background-color: black;
+  color: white;
+}
+
+body.dark{
+  background-color: white;
+  color: black;
+}
+
+.checkbox {
+  opacity: 0;
+  position: absolute;
+}
+
+.label {
+  width: 48px;
+  height: 22px;
+  background-color:#111;
+  display: flex;
+  border-radius:50px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  position: relative;
+  transform: scale(1.5);
+}
+
+.ball {
+  width: 20px;
+  height: 18px;
+  background-color: white;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  transition: transform 0.2s linear;
+}
+
+/*  target the elemenent after the label*/
+.checkbox:checked + .label .ball{
+  transform: translateX(24px);
+}
+
+.fa-moon-o {
+  color: white;
+}
+
+.fa-sun-o {
+  color: yellow;
+}
+
+.color{
+  color:white;
+}
+/* scroll button */
+#upbtn {
+  display: none;
+  position: fixed; 
+  bottom: 20px; 
+  right: 30px;
+  z-index: 99;
+  border: none; 
+  outline: none;
+  cursor: pointer;
+  padding: 15px;
+  font-size: 40px;
+}
+#upbtn:hover {
+  background-color: #fc036b;
+}
+
+#quote {
+  position: relative;
+  font-family: sans-serif;
+  text-transform: uppercase;
+  font-size: 2em;
+  letter-spacing: 4px;
+  overflow: hidden;
+  background: linear-gradient(45deg,#fa4a47, #43d5d3, #f2cb71);
+  background-repeat: no-repeat;
+  background-size: 80%;
+  animation: animate 8s linear infinite;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: rgba(255, 255, 255, 0);
+}
+
+@keyframes animate {
+  0% {
+    background-position: -500%;
+  }
+  100% {
+    background-position: 500%;
+  }
+}
+
+
+/* carousel */
+
+@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
+
+
+input[type=radio] {
+  display: none;
+}
+
+.cardt {
+  position: absolute;
+  width: 60%;
+  height: 100%;
+  left: 5vw;
+  right: 0;
+  top: 14%;
+  margin: auto;
+  transition: transform .4s ease;
+  cursor: pointer;
+}
+
+.containerx {
+  width: 100%;
+  height: 50vh;
+  transform-style: preserve-3d;
+}
+
+.cards {
+  position: relative;
+  width: 100vh;
+  height: 100%;
+}
+
+.cards label img {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+#item-1:checked ~ .cards #col-img-3, #item-2:checked ~ .cards #col-img-1, #item-3:checked ~ .cards #col-img-2 {
+  transform: translatex(-40%) scale(.8);
+  opacity: .4;
+  z-index: 0;
+}
+
+#item-1:checked ~ .cards #col-img-2, #item-2:checked ~ .cards #col-img-3, #item-3:checked ~ .cards #col-img-1 {
+  transform: translatex(40%) scale(.8);
+  opacity: .4;
+  z-index: 0;
+}
+
+#item-1:checked ~ .cards #col-img-1, #item-2:checked ~ .cards #col-img-2, #item-3:checked ~ .cards #col-img-3 {
+  transform: translatex(0) scale(1);
+  opacity: 1;
+  z-index: 1;
+  
+  img {
+    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
+  }
+}
+
+#item-2:checked ~ .player #test {
+  transform: translateY(0);
+}
+
+#item-2:checked ~ .player #test  {
+  transform: translateY(-40px);
+}
+
+#item-3:checked ~ .player #test  {
+  transform: translateY(-80px);
+}
+
+/* end */
diff --git a/img/GitHub120px.png b/img/GitHub120px.png
new file mode 100644
index 0000000..ea6ff54
Binary files /dev/null and b/img/GitHub120px.png differ
diff --git a/img/android-chrome-192x192.png b/img/android-chrome-192x192.png
new file mode 100644
index 0000000..de04323
Binary files /dev/null and b/img/android-chrome-192x192.png differ
diff --git a/img/android-chrome-512x512.png b/img/android-chrome-512x512.png
new file mode 100644
index 0000000..b625f61
Binary files /dev/null and b/img/android-chrome-512x512.png differ
diff --git a/img/apple-touch-icon.png b/img/apple-touch-icon.png
new file mode 100644
index 0000000..8119ea9
Binary files /dev/null and b/img/apple-touch-icon.png differ
diff --git a/img/c1.jpg b/img/c1.jpg
new file mode 100644
index 0000000..e3cfd80
Binary files /dev/null and b/img/c1.jpg differ
diff --git a/img/c2.jpg b/img/c2.jpg
new file mode 100644
index 0000000..3d7e644
Binary files /dev/null and b/img/c2.jpg differ
diff --git a/img/c3.jpg b/img/c3.jpg
new file mode 100644
index 0000000..94cfafa
Binary files /dev/null and b/img/c3.jpg differ
diff --git a/img/favicon-16x16.png b/img/favicon-16x16.png
new file mode 100644
index 0000000..8dd19a3
Binary files /dev/null and b/img/favicon-16x16.png differ
diff --git a/img/favicon-32x32.png b/img/favicon-32x32.png
new file mode 100644
index 0000000..29e7b8e
Binary files /dev/null and b/img/favicon-32x32.png differ
diff --git a/img/favicon.ico b/img/favicon.ico
new file mode 100644
index 0000000..6cb9ada
Binary files /dev/null and b/img/favicon.ico differ
diff --git a/img/front.jpg b/img/front.jpg
new file mode 100644
index 0000000..9157929
Binary files /dev/null and b/img/front.jpg differ
diff --git a/img/header-bg.jfif b/img/header-bg.jfif
new file mode 100644
index 0000000..8c35f35
Binary files /dev/null and b/img/header-bg.jfif differ
diff --git a/img/i1.png b/img/i1.png
new file mode 100644
index 0000000..d742822
Binary files /dev/null and b/img/i1.png differ
diff --git a/img/i2.png.jpg b/img/i2.png.jpg
new file mode 100644
index 0000000..2fb4a9a
Binary files /dev/null and b/img/i2.png.jpg differ
diff --git a/img/i3.jpg b/img/i3.jpg
new file mode 100644
index 0000000..c1785b4
Binary files /dev/null and b/img/i3.jpg differ
diff --git a/img/i6.jpg b/img/i6.jpg
new file mode 100644
index 0000000..9fd631d
Binary files /dev/null and b/img/i6.jpg differ
diff --git a/img/i8.jpg b/img/i8.jpg
new file mode 100644
index 0000000..6398585
Binary files /dev/null and b/img/i8.jpg differ
diff --git a/img/logo_smaller.png b/img/logo_smaller.png
new file mode 100644
index 0000000..4c04f92
Binary files /dev/null and b/img/logo_smaller.png differ
diff --git a/img/menu-btn.png b/img/menu-btn.png
new file mode 100644
index 0000000..07b328a
Binary files /dev/null and b/img/menu-btn.png differ
diff --git a/img/scp.jpg b/img/scp.jpg
new file mode 100644
index 0000000..01a674f
Binary files /dev/null and b/img/scp.jpg differ
diff --git a/img/video.gif b/img/video.gif
new file mode 100644
index 0000000..b3078e3
Binary files /dev/null and b/img/video.gif differ
diff --git a/img/video.mp4 b/img/video.mp4
new file mode 100644
index 0000000..39518b6
Binary files /dev/null and b/img/video.mp4 differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ae86677
--- /dev/null
+++ b/index.html
@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>off the beaten path</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/responsive.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
+    <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Poppins:wght@600&display=swap');
+    .correct {
+      color: green;
+      
+    }
+
+    .incorrect {
+      color: red;
+    }
+
+    .error {
+      color: red;
+    }
+
+    .feedback {
+      margin-top: 20px;
+      padding: 10px;
+      background-color: #f2f2f2;
+    }
+</style>
+</head>
+<body onload='if (window.location.href.substr(window.location.href.length - 6) == "#about") { introAboutLogoTransition(); }'>
+    <!--navbar-->
+    <nav class="navbar glass" style="height: 70px;">
+        <span><a href="#home" style="display:flex; align-items: center;"><img class="img2" src="./img/logo_smaller.png" width="50"
+            style=" color: #000;" ><h1 class="logo" style="font-family: Poppins;text-transform: lowercase">&nbsp;off the beaten பாதை</h1></a></span>
+        <ul class="nav-links">
+            <li><a href="#home" id="pri" class="active cir_border" style="font-family: Poppins;>Home</a></li>
+            <li><a href="C:\UID\UI\zigzag\zigzag\Food.html" id="sec" class="cir_border" target="_blank" style="font-family: Poppins;"">Food</a></li>
+            <li><a href="C:\UID\UI\Culture\Culture.html" id="tri" class="cir_border" style="font-family: Poppins;"">Culture</a></li>
+            <li><a href="C:\UID\UI\history\History.html" id="quad" class="cir_border" target="_blank" style="font-family: Poppins;">History</a></li>
+            <li><a href="C:\UID\UI\Spiritual\Spiritual.html" id="quint" class="cir_border" style="font-family: Poppins;">Spiritual</a></li>
+            <li><a href="#contact" id="hex" class="cir_border" style="font-family: Poppins;">Contact</a></li>
+            <li><div>
+                <input type="checkbox" class="checkbox dark" id="checkbox">
+            <label for="checkbox" class="label">
+                <i class="fa fa-moon-o"></i>
+                <i class='fa fa-sun-o'></i>
+                <div class='ball'>
+            </label>
+            </div></li>
+        </ul>
+        <img src="./img/menu-btn.png" alt="" class="menu-btn">
+    </nav>
+    <!--navbar-->
+    <header id="home">
+        <div class="header-content">
+            <div class="main">
+            <h2  id="quote" style="font:Poppins;">Explore the colourful Tamil Nadu</h2>
+            <div class="line"></div>
+                <h1>வணக்கம் to Tamil Nadu</h1>
+        </div>
+        </div></div>
+    </header>
+    <!--Events-->
+    <section class="events" id="events">
+        <div class="container">
+        <div class="title">
+            <h1 class="dark">HIGHLIGHTS</h1>
+            <div class="line"></div>
+        </div>
+        <div class="row">
+            <article class="card col">
+                <img class="card-img" src="./img/i1.png">
+                <h4 class="dark">FOOD</h4>
+                <p class="font-color">A fun road trip for your tastebuds!</p>
+                <a href="C:\UID\UI\zigzag\zigzag\Food.html" class="ctn">All Details</a>
+            </article>
+            <article class="card col">
+                <img src="./img/i3.jpg">
+                <h4 class="dark">HISTORY</h4>
+                <p class="font-color">A quick glance into our past.</p>
+                <a href="C:\UID\UI\history\History.html" class="ctn">All Details</a>
+            </article>
+            <article class="card col">
+                <img src="./img/i8.jpg">
+                <h4 class="dark">CULTURE</h4>
+                <p class="font-color">A quick glance into our present.</p>
+                <a href="C:\UID\UI\Culture\Culture.html" class="ctn">All Details</a>
+            </article>
+            <article class="card col">
+                <img src="./img/i6.jpg">
+                <h4 class="dark">SPIRITUAL</h4>
+                <p class="font-color">A short glimpse into the Land of temples.</p>
+                <a href="C:\Users\sudha\OneDrive\Documents\UID ENDSEM\Spiritual\Spiritual.html" class="ctn">All Details</a>
+            </article>
+        </div>
+    </div>
+    </section>
+    <!--Events-->
+    <!-- About -->
+    <section id="about">
+        <div class="title">
+            <h1 class="font-color">travel tamil nadu</h1>
+            <div class="line">
+            </div>
+        </div>
+        <br>
+        <div id="about_us">
+            <div class="boxx">
+                <div class="containerx">
+					<input type="radio" name="slider" id="item-1" checked>
+					<input type="radio" name="slider" id="item-2">
+					<input type="radio" name="slider" id="item-3">
+				<div class="cards">
+					<label class="cardt" for="item-1" id="col-img-1">
+					<img src="./img/c1.jpg">
+					</label>
+					<label class="cardt" for="item-2" id="col-img-2">
+					<img src="./img/c2.jpg">
+					</label>
+					<label class="cardt" for="item-3" id="col-img-3">
+					<img src="./img/c3.jpg">
+					</label>
+				</div>
+				</div>
+                <div class="about">
+                    </div>
+            </div>
+            </div>
+        </div>
+    </section>
+    <!-- About -->
+        <!--Explore-->
+        <section class="explore" id="explore" >
+            <div class="explore-content">
+                <h1 style="font:Poppins;text-transform:italic">explore tamil nadu</h1>
+                <div class="line"></div>
+                  <form name="Quiz" onsubmit="return score()">
+    <label for="q1" style="font-family: Poppins;">This is the district that is almost synonymous with halwa!  </label>
+    <input type="text" name="q1" id="q1" class="input-box"><br>
+
+    <label for="q2" style="font-family: Poppins;">India's first sea-bridge is located near this ghost town.  </label>
+    <input type="text" name="q2" id="q2" class="input-box"><br>
+
+    <label for="q4" style="font-family: Poppins;">The world's fourth oldest dam structure that is still in use today.  </label>
+    <input type="text" name="q4" id="q4" class="input-box"><br>
+
+    <label for="q5" style="font-family: Poppins;">This fort was ranked as the most impregnable fortress by Shivaji, and the "Troy of the East" by the British.  </label>
+    <input type="text" name="q5" id="q5" class="input-box"><br>
+
+    <label for="q6" style="font-family: Poppins;">This city is believed to be the birthplace of the prolific poet and philosopher Thiruvalluvar.   </label>
+    <input type="text" name="q6" id="q6" class="input-box"><br><br>
+
+    <input type="submit" value="Let's go">
+  </form>
+
+  <div id="feedbackContainer"></div>
+
+  <script>
+    function score() {
+      const form = document.forms['Quiz'];
+
+      // Reset error styles
+      const errorFields = form.getElementsByClassName('error');
+      for (let i = 0; i < errorFields.length; i++) {
+        errorFields[i].classList.remove('error');
+      }
+
+      
+      const inputFields = form.getElementsByClassName('input-box');
+      for (let i = 0; i < inputFields.length; i++) {
+        inputFields[i].classList.remove('correct', 'incorrect');
+      }
+
+      let isValid = true;
+
+    
+      const q1Input = form.elements['q1'];
+      const q1Value = q1Input.value.trim().toLowerCase();
+      if (q1Value !== 'tirunelveli') {
+        isValid = false;
+        q1Input.classList.add('incorrect');
+        q1Input.value = `Tirunelveli (Correct answer: tirunelveli)`;
+      } else {
+        q1Input.classList.add('correct');
+      }
+
+      const q2Input = form.elements['q2'];
+      const q2Value = q2Input.value.trim().toLowerCase();
+      if (q2Value !== 'dhanushkodi') {
+        isValid = false;
+        q2Input.classList.add('incorrect');
+        q2Input.value = `Dhanushkodi (Correct answer: dhanushkodi)`;
+      } else {
+        q2Input.classList.add('correct');
+      }
+
+      
+      const q3Input = form.elements['q4'];
+      const q3Value = q3Input.value.trim().toLowerCase();
+      if (q3Value !== 'kallanai') {
+        isValid = false;
+        q3Input.classList.add('incorrect');
+        q3Input.value = `Kallanai (Correct answer: kallanai)`;
+      } else {
+        q3Input.classList.add('correct');
+      }
+
+      
+      const q4Input = form.elements['q5'];
+      const q4Value = q4Input.value.trim().toLowerCase();
+      if (q4Value !== 'gingee fort' && q4Value !== 'senji fort') {
+        isValid = false;
+        q4Input.classList.add('incorrect');
+        q4Input.value = `Gingee Fort or Senji Fort (Correct answers: gingee fort or senji fort)`;
+      } else {
+        q4Input.classList.add('correct');
+      }
+
+      
+      const q5Input = form.elements['q6'];
+      const q5Value = q5Input.value.trim().toLowerCase();
+      if (q5Value !== 'chennai' && q5Value !== 'mylapore') {
+        isValid = false;
+        q5Input.classList.add('incorrect');
+        q5Input.value = `Chennai or Mylapore (Correct answers: chennai or mylapore)`;
+      } else {
+        q5Input.classList.add('correct');
+      }
+
+      const feedbackContainer = document.getElementById('feedbackContainer');
+
+      if (isValid) {
+        const successMessage = document.createElement('p');
+        successMessage.textContent = 'Congratulations! You answered all the questions correctly.';
+        feedbackContainer.appendChild(successMessage);
+        form.reset(); // Reset the form
+      } else {
+        const errorMessage = document.createElement('p');
+        errorMessage.textContent = 'You have so much to discover about Tamil Nadu';
+        feedbackContainer.appendChild(errorMessage);
+      }
+
+      return false; // Prevent form submission
+    }
+  </script>
+                
+            </div>
+        </section>
+    <!--Explore-->
+    <!-- contact -->
+    <section id="contact">
+        <div class="title">
+            <h1 class="font-color">Contact Us</h1>
+            <div class="line"></div>
+        </div>
+        <div class="contact_us">
+            <form class="cform" action="" method="post">
+                <div class="crow-message">
+                    <h1 class="color">Send us a message</h1>
+                    <div></div>
+                </div>
+                <div class="crow-in">
+                        <input type="text" id="name" name="name" placeholder="Your name">
+                        <input type="text" id="email" name="email" placeholder="Your Email id">
+                </div>
+                <div class="crow">
+                    <div class="ccol-left">
+                        <select name="country" id="country">
+                            <option value="India">India</option>
+                            <option value="Russia">Russia</option>
+                            <option value="usa">USA</option>
+                            <option value="Japan">Japan</option>
+                            <option value="France">France</option>
+                            <option value="Brazil">Brazil</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="crow">
+                    <div class="ccol-left">
+                        <textarea type="text" id="remarks" name="remarks" placeholder="Your Remarks....." style="height: 150px;"></textarea>
+                    </div>
+                </div>
+                <input class="crow-s" type="submit" value="Submit">
+            </form>
+            <div class="cbox">
+                <div>
+                    <p class="cbox-message">Prefer some other way ?<br>Reach us by using the details given below</p>
+                <div class="cbox-line"></div>
+                </div>
+                <div class="c_boxx">
+                    <a href="mailto:abc@gmail.com"><i class="fa fa-envelope"></i>
+                        Mail: shinisoba@gmail.com , sarandharshan7090@gmail.com
+                    </a>
+                </div>
+                <div class="c_boxx">
+                    <a href="tel:+91-12345-67890"><i class="fa fa-phone"></i>
+                        Phone: (+91) 12345-67890
+                    </a>
+                </div>
+                <div class="c_boxx">
+                    <a href="#"><i class="fa fa-map-marker"></i>
+                        Location: Coimbatore & Cuddalore , TamilNadu, India
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- contact  -->
+    <!-- up scroll -->
+    <i class="fa fa-chevron-up" onclick="topFunction()" id="upbtn"></i>
+    <!-- end -->
+    <!--footer-->
+    <section class="footer">
+        <span>Made by Saran and Subhashini.</span>
+        <div class="social">
+            <li>
+                <a href="https://github.com/SaranDharshanSP" target="_blank" rel="noreferrer"><i class="fa fa-github"></i></a>
+                <a href="https://www.linkedin.com/in/saran-dharshan-687392267/" target="_blank" rel="noreferrer"><i class="fa fa-linkedin-square"></i></a>
+                <a href="https://github.com/shinisoba" target="_blank" rel="noreferrer"><i class="fa fa-github"></i></a>
+                <a href="https://www.linkedin.com/in/subhashini-sudhakar-48aa21256/" target="_blank" rel="noreferrer"><i class="fa fa-linkedin-square"></i></a>
+            </li>
+        </div>
+    </section>
+    <!--footer-->
+
+    <script>
+        const menuBtn = document.querySelector('.menu-btn')
+        const navlinks = document.querySelector('.nav-links')
+
+        menuBtn.addEventListener('click',()=>{
+            navlinks.classList.toggle('mobile-menu')
+        })
+    </script>
+    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..dfd056c
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,84 @@
+function removeall() {
+  $(".cir_border").css("border", "none");
+}
+$("#sec").on("click", function () {
+  removeall();
+  $("#sec").css("border", "2px solid whitesmoke");
+  $("#sec").css("border-radius", "20px");
+});
+$("#pri").on("click", function () {
+  removeall();
+  $("#pri").css("border", "2px solid whitesmoke");
+  $("#pri").css("border-radius", "20px");
+});
+$("#tri").on("click", function () {
+  removeall();
+  $("#tri").css("border", "2px solid whitesmoke");
+  $("#tri").css("border-radius", "20px");
+});
+$("#quad").on("click", function () {
+  removeall();
+  $("#quad").css("border", "2px solid whitesmoke");
+  $("#quad").css("border-radius", "20px");
+});
+$("#quint").on("click", function () {
+  removeall();
+  $("#quint").css("border", "2px solid whitesmoke");
+  $("#quint").css("border-radius", "20px");
+});
+$("#hex").on("click", function () {
+  removeall();
+  $("#hex").css("border", "2px solid whitesmoke");
+  $("#hex").css("border-radius", "20px");
+});
+
+$("#about").on("mouseover", function () {
+  introAboutLogoTransition();
+});
+
+$('input').on('change', function() {
+  $('body').toggleClass('blue');
+});
+
+
+
+// Light/Dark toggle
+const checkbox = document.getElementById('checkbox');
+
+function introAboutLogoTransition() {
+  $("#about-quad").css("top", "70%");
+  $("#about-quad").css("opacity", "1");
+}
+
+function checkDarkMode(){
+  if (localStorage.getItem("tourism_website_darkmode") !== null && localStorage.getItem("tourism_website_darkmode") === "true") {
+    document.body.classList.add('dark');
+    checkbox.checked = true;
+  }
+};
+checkDarkMode();
+
+checkbox.addEventListener('change', () => {
+  document.body.classList.toggle('dark');
+  document.body.classList.contains('dark') ? 
+    localStorage.setItem("tourism_website_darkmode", true) :
+    localStorage.setItem("tourism_website_darkmode", false); 
+});
+
+// scroll button
+
+let mybutton = document.getElementById("upbtn");
+
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+function topFunction() {
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0; 
+}