Belei Bianca-Antonia

README.md

@@ -1,14 +1,14 @@
-# Proiect HTML+CSS
-Acesta este un repo la care vreau să faceți Pull Request cu proiectul vostru în HTML și CSS.
-
-**Cum faci**
-1. Faci fork 
-2. Adaugi fișierele în proiect
-3. Faci commit-uri atât cât ai nevoie
-4. Faci push pe Repo-ul tău
-5. Intri la Pull Requests, apeși [`New Pull Request`](https://github.com/ITSchool-Web-Heroines/Proiect-HTML-CSS/compare)
-6. în dreapta, alegi repo-ul tău și branch-ul tău
-7. în stânga, alegi `ITSchool-Web-Heroines/Proiect-HTML-CSS` și branch-ul `master`
-8. Apeși `Create pull request`
-9. Pui în titlu numele tău, și dacă e nevoie de ceva detalii la comentarii.
-10. Apeși `Create pull request`
+This website is a platform created to showcase a wide variety of tourist destinations. It was bulit using HTML and CSS and it has been designed to be fully responsive, ensuring that it can be easily accessed and navigated on any device.
+
+I have attached some pictures below to give you a glimpse of the content and design of my website.
+( If you want to see more, you can access the website on https://bie24.github.io/Proiect-HTML-CSS/ )
+
+![s1](https://user-images.githubusercontent.com/32037529/212144048-556a4781-c522-4290-ad06-92d85872860f.jpg)
+![s2](https://user-images.githubusercontent.com/32037529/212144054-e9cea101-6257-455b-b850-24ef914103a9.jpg)
+![s3](https://user-images.githubusercontent.com/32037529/212144060-891a5eab-7a45-436e-98b9-37e3a35b62fb.jpg)
+![s4](https://user-images.githubusercontent.com/32037529/212144069-253f16f8-29a9-4d7b-9534-ed10fb973615.jpg)
+Mobile dimensions:
+
+
+![s5](https://user-images.githubusercontent.com/32037529/212144073-a9cff265-0b6d-442b-aafe-58ddc21d2c25.jpg)
+![s6](https://user-images.githubusercontent.com/32037529/212144077-f3ed3758-90c9-4e23-9c05-d0d6b484bffa.jpg)

comun.css

@@ -0,0 +1,305 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Inter", sans-serif;
+  background: var(--main-bg-color);
+}
+
+.nav a {
+  text-decoration: none;
+  color: white;
+}
+
+.nav {
+  display: flex;
+  list-style-type: none;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  font-size: 0.8rem;
+  color: white;
+  padding-block-start: 0.7rem;
+  padding-inline: 0;
+  margin: 0;
+}
+
+.menu-item {
+  position: relative;
+  text-transform: uppercase;
+}
+
+.menu-item:after {
+  content: "";
+  position: absolute;
+  background-color: var(--color3);
+  height: 0.15rem;
+  width: 0;
+  inset-inline-start: 0;
+  inset-block-end: -10px;
+  transition: 0.3s;
+}
+
+.menu-item:hover:after {
+  width: 100%;
+}
+
+.logo {
+  height: 4rem;
+  font-weight: bold;
+}
+
+.pictures {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(5, 5vw);
+  grid-gap: 0.5rem;
+  margin-block-start: 1rem;
+}
+
+.pictures img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.title {
+  color: white;
+  text-align: center;
+  margin-block: 3rem 0;
+  text-transform: uppercase;
+  font-size: var(--title);
+}
+
+.subtitle {
+  color: var(--color3);
+  text-align: center;
+  margin-block: 0 6rem;
+  font-size: 1rem;
+}
+
+.text p {
+  color: white;
+  font-size: 1rem;
+  text-align: justify;
+  margin-inline: 10%;
+}
+
+.explore {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-inline: 5%;
+  border-radius: 2rem;
+  background-color: rgba(239, 239, 239, 0.153);
+  margin-block-end: 2rem;
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.356);
+}
+
+.box-text h3 {
+  color: var(--color3);
+  text-align: center;
+}
+
+.box img {
+  max-height: 19rem;
+  transition: transform 2s ease;
+}
+
+.box img:hover {
+  transform: scale(1.4);
+}
+
+.cazari {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.text h2 {
+  color: white;
+  text-align: center;
+}
+
+.section-title {
+  margin-block: 7rem 4rem;
+}
+
+.cazare {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color1);
+  align-items: center;
+  width: 18rem;
+  margin: 1rem;
+  border-radius: 3rem;
+}
+
+.cazare img {
+  width: 100%;
+  height: 12rem;
+  object-fit: cover;
+}
+
+.cazare h3 {
+  color: var(--color2);
+  text-transform: uppercase;
+  margin-block: 1rem 0;
+}
+
+.cazare p {
+  font-size: 0.8rem;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.429);
+}
+
+.cazare-btn {
+  text-decoration: none;
+  color: white;
+  background-color: var(--color2);
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  margin-block: 2rem;
+}
+
+.cazare-btn:hover {
+  background-color: var(--color4);
+  box-shadow: 0 0 1rem white;
+}
+
+.icon {
+  height: 2rem;
+}
+
+.iframe-container {
+  position: relative;
+  max-width: 70rem;
+  height: 0;
+  padding-bottom: 40%;
+  margin-inline: auto;
+  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.334);
+  margin-block-end: 5rem;
+}
+
+.iframe-container iframe {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.others-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.others-container h3 {
+  color: white;
+  text-decoration: none;
+}
+
+.others img {
+  height: 10rem;
+  width: 10rem;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.others img:hover {
+  box-shadow: 0 0 1rem white;
+  transform: scale(1.1);
+}
+
+.others-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.others-box a {
+  text-decoration: none;
+}
+
+footer {
+  background-color: rgba(0, 0, 0, 0.433);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 2rem;
+  padding-block: 0.3rem;
+}
+
+@media screen and (min-width: 620px) {
+  .title {
+    font-size: 5rem;
+  }
+
+  .others-container {
+    flex-direction: row;
+    justify-content: center;
+    gap: 3rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .pictures {
+    grid-gap: 1rem;
+  }
+
+  .intro {
+    margin-block-start: 12rem;
+  }
+
+  .box {
+    flex-direction: row;
+    margin-block-start: 4rem;
+    padding: 0;
+  }
+
+  .box-text {
+    max-width: 60%;
+  }
+
+  .plaja-kelingking h3 {
+    margin-block: 0 2rem;
+  }
+
+  .box1 img {
+    max-height: 25rem;
+    margin-inline-start: 5rem;
+  }
+
+  .box2 {
+    flex-direction: row-reverse;
+  }
+
+  .box2 h3 {
+    margin-block: 0 2rem;
+  }
+
+  .box2 img {
+    max-height: 25rem;
+    margin-inline-end: 7rem;
+  }
+
+  .cazari {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .nav {
+    font-size: 1rem;
+    justify-content: space-around;
+    margin-inline: 25rem;
+    padding-block-start: 1.5rem;
+  }
+}