diff --git a/README.md b/README.md index a94592b..089bf84 100644 --- a/README.md +++ b/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) diff --git a/comun.css b/comun.css new file mode 100644 index 0000000..d322155 --- /dev/null +++ b/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; + } +} diff --git a/contact.css b/contact.css new file mode 100644 index 0000000..4aabe45 --- /dev/null +++ b/contact.css @@ -0,0 +1,270 @@ +body { + margin: 0; + padding: 0; + font-family: "Inter", sans-serif; + background: black; +} + +header { + background-image: url("img/background-3.jpg"); + background-size: cover; + background-position: center; + text-align: center; + color: white; + text-transform: uppercase; +} + +.nav a { + text-decoration: none; + color: white; + text-shadow: 0 0.2rem 0.3rem black; +} + +.nav { + display: flex; + list-style-type: none; + align-items: center; + justify-content: center; + gap: 1rem; + font-size: 0.8rem; + color: white; + padding-inline: 0; + padding-block-start: 0.7rem; + margin: 0; +} + +.menu-item { + position: relative; +} + +.menu-item::after { + content: ""; + position: absolute; + background-color: rgba(165, 87, 19, 0.438); + height: 0.15rem; + width: 0; + inset-inline-start: 0; + inset-block-end: -0.62rem; + transition: 0.3s; +} + +.menu-item:hover::after { + width: 100%; +} + +.logo { + height: 4rem; + font-weight: bold; +} + +@keyframes text_reveal_box { + 50% { + width: 100%; + inset-inline-start: 0; + } + 100% { + width: 0; + inset-inline-start: 100%; + } +} + +@keyframes text_reveal { + 100% { + color: white; + } +} + +.page-title { + display: block; + font-size: 2rem; + width: fit-content; + margin-inline: auto; + margin-block-start: 5rem; + position: relative; + color: transparent; + animation: text_reveal 1s ease forwards; + animation-delay: 1.5s; +} + +.page-title::after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + height: 100%; + width: 0; + background-color: rgb(147, 77, 16); + animation: text_reveal_box 1s ease; + animation-delay: 1s; +} + +.page-subtitle { + visibility: hidden; + padding-block-end: 3rem; +} + +.section-form { + display: flex; + flex-direction: column-reverse; + justify-content: center; + align-items: center; +} +.text-contact { + color: white; + text-align: center; +} + +#form-ul { + list-style: none; + margin: 0; + margin-block-end: 1rem; + padding: 0; +} + +#form-ul li { + margin-block-end: 1rem; +} + +form { + padding: 1rem; + border-radius: 0.4rem; +} + +input, +textarea, +select { + font: inherit; + display: block; + width: 100%; + padding: 0.5rem; + border-radius: 0.25rem; + box-sizing: border-box; + background-color: rgb(225, 222, 222); + border: transparent; + margin-inline: auto; +} + +textarea { + resize: none; + width: 100%; +} + +input:focus, +textarea:focus { + background-color: rgb(208, 208, 208); + border-style: none; +} + +.btn-form { + text-align: center; +} + +.btn-form button { + text-decoration: none; + border: 0.1rem solid rgb(62, 184, 184); + padding: 0.5rem 4rem; + border-radius: 2rem 0; + margin-inline: auto; +} + +.btn-filled-form { + background-color: rgb(62, 184, 184); + color: white; +} + +.btn-form button:hover { + box-shadow: -0.5rem 0.2rem 0.4rem rgba(133, 187, 187, 0.39); + background-color: rgba(0, 0, 0, 0.134); + cursor: pointer; +} + +#map img { + margin-inline: auto; + height: 10rem; +} + +.pictures { + display: grid; + grid-template-rows: repeat(3, 10vw); + grid-auto-flow: column dense; + grid-gap: 0.3rem; + margin-block-start: 1rem; +} + +.pictures img { + width: 100%; + height: 100%; + object-fit: cover; +} + +footer { + background-color: rgba(88, 88, 88, 0.433); + display: flex; + flex-direction: row; + justify-content: center; + gap: 2rem; + padding-block: 0.3rem; + margin-block-start: 3rem; +} + +.icon { + height: 2rem; +} + +@media screen and (min-width: 620px) { + header { + background-image: url("img/background-3.jpg"); + background-size: cover; + } + + .page-title { + margin-block-start: 10rem; + } + + .page-subtitle { + padding-block-end: 21rem; + } + + .section-form { + margin-block-end: 5rem; + } +} + +@media screen and (min-width: 800px) { + .section-form { + flex-direction: row; + margin-inline-start: 4rem; + } + + #map { + margin-inline: auto; + } + + #map img { + height: 30vh; + } +} + +@media screen and (min-width: 960px) { + .page-title { + font-size: 3rem; + margin-block-start: 15rem; + } + + #map img { + height: 45vh; + } +} + +@media screen and (min-width: 1200px) { + .nav { + font-size: 1rem; + justify-content: space-around; + margin-inline: 25rem; + padding-block-start: 1.5rem; + } + + .pictures { + grid-gap: 1rem; + } +} diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..cadee6c --- /dev/null +++ b/contact.html @@ -0,0 +1,108 @@ + + + + + + + THYNK TRAVEL + + + + + + +
+ +

Contact

+

Subtitlu

+
+ + +
+
+
+
+

Contactează-ne pentru mai multe detalii

+
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ +
+ +
+ +
+
+ map +
+
+ +
+ + + + + + + + + + + + +
+ + + + + diff --git a/destinatii.css b/destinatii.css new file mode 100644 index 0000000..df5068b --- /dev/null +++ b/destinatii.css @@ -0,0 +1,241 @@ +* { + margin: 0; + padding: 0; + font-family: "Inter", sans-serif; +} + +header { + background-image: url("img/background2.jpg"); + background-size: cover; + background-position: center; + text-align: center; + color: white; + text-transform: uppercase; +} + +.nav a { + text-decoration: none; + color: white; + text-shadow: 0 0.2rem 0.3rem black; +} + +.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; +} + +.menu-item { + position: relative; +} + +.menu-item::after { + content: ""; + position: absolute; + background-color: #bdad22; + 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; +} + +@keyframes text_reveal_box { + 50% { + width: 100%; + inset-inline-start: 0; + } + + 100% { + width: 0; + inset-inline-start: 100%; + } +} + +@keyframes text_reveal { + 100% { + color: white; + } +} +.page-title { + display: block; + font-size: 2rem; + width: fit-content; + margin-inline: auto; + margin-block-start: 5rem; + position: relative; + color: transparent; + animation: text_reveal 1s ease forwards; + animation-delay: 1.5s; +} + +.page-title::after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + height: 100%; + width: 0; + background-color: #bdad22; + animation: text_reveal_box 1s ease; + animation-delay: 1s; +} + +.page-subtitle { + visibility: hidden; + padding-block-end: 3rem; +} + +.explore { + background: linear-gradient(180.23deg, #000000 37.11%, #c9d1a5 99.8%); + color: white; + text-align: center; + padding-block-start: 4rem; +} + +.cards { + display: flex; + flex-direction: column; + align-items: center; + margin-block-start: 0.5rem; +} + +.card { + display: flex; + flex-direction: column; + background-color: rgba(255, 255, 255, 0.726); + align-items: center; + width: 18rem; + height: 20rem; + margin: 2rem; +} +.card:hover { + box-shadow: 0 0 2rem rgba(255, 255, 255, 0.405); +} + +.card img { + width: 100%; + height: 15rem; + object-fit: cover; +} + +.info { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.card-name { + text-decoration: none; + color: black; + text-transform: uppercase; + font-weight: bold; + font-size: 1.5rem; + margin-block-start: 0.5rem; +} + +.card-name:hover { + transform: scale(1.2); +} + +.card-name:hover { + color: #7b8e15; +} + +.card-location { + color: #004b5c; + font-weight: bold; + margin-block-start: 0.3rem; +} + +footer { + background-color: rgba(73, 92, 22, 0.433); + display: flex; + flex-direction: row; + justify-content: center; + gap: 2rem; + padding-block: 0.3rem; +} + +.icon { + height: 2rem; +} + +@media screen and (min-width: 620px) { + .page-title { + margin-block-start: 10rem; + } + + .page-subtitle { + padding-block-end: 15rem; + } + + .explore { + padding-block-start: 7rem; + } + + .details { + margin-inline: 4rem; + } +} + +@media screen and (min-width: 800px) { + .cards { + display: grid; + grid-template-columns: 1fr 1fr; + justify-items: center; + } +} + +@media screen and (min-width: 960px) { + .page-title { + font-size: 3rem; + margin-block-start: 15rem; + } + + .cards { + grid-template-columns: 1fr 1fr 1fr; + } + + .card { + margin-block-start: 3rem; + } +} + +@media screen and (min-width: 1200px) { + .nav { + font-size: 1rem; + justify-content: space-around; + margin-inline: 25rem; + padding-block-start: 1.5rem; + } + + .cards { + justify-content: space-around; + margin-inline: 8%; + } + + .card { + height: 26rem; + width: 22rem; + object-fit: cover; + } + + .card img { + height: 22rem; + } +} diff --git a/destinatii.html b/destinatii.html new file mode 100644 index 0000000..aad16fc --- /dev/null +++ b/destinatii.html @@ -0,0 +1,72 @@ + + + + + + + Destinatii + + + + + + +
+ +

Destinații extravagante

+

Subtitlu

+
+
+
+
+ nusa-penida + Nusa Penida + Bali, indonesia +
+
+ mattehorn + Mattehorn + Italia +
+
+ insula-siargao + Insula Siargao + Filipine +
+
+ santorini + Santorini + Grecia +
+
+ lacul-sorapiss + Lacul Sorapiss + Italia +
+
+ petra + Petra + Iordania +
+
+
+ + + diff --git a/icons/facebook.png b/icons/facebook.png new file mode 100644 index 0000000..92772b2 Binary files /dev/null and b/icons/facebook.png differ diff --git a/icons/instagram.png b/icons/instagram.png new file mode 100644 index 0000000..b0340a8 Binary files /dev/null and b/icons/instagram.png differ diff --git a/icons/titkok.png b/icons/titkok.png new file mode 100644 index 0000000..1e8154e Binary files /dev/null and b/icons/titkok.png differ diff --git a/img/background-3.jpg b/img/background-3.jpg new file mode 100644 index 0000000..e9f3af3 Binary files /dev/null and b/img/background-3.jpg differ diff --git a/img/background-darker.jpg b/img/background-darker.jpg new file mode 100644 index 0000000..94aa2c1 Binary files /dev/null and b/img/background-darker.jpg differ diff --git a/img/background2.jpg b/img/background2.jpg new file mode 100644 index 0000000..a9fbe2f Binary files /dev/null and b/img/background2.jpg differ diff --git a/img/broken-beach.jpg b/img/broken-beach.jpg new file mode 100644 index 0000000..a97499a Binary files /dev/null and b/img/broken-beach.jpg differ diff --git a/img/cazare_mattehorn1.webp b/img/cazare_mattehorn1.webp new file mode 100644 index 0000000..3fc8977 Binary files /dev/null and b/img/cazare_mattehorn1.webp differ diff --git a/img/cazare_mattehorn2.webp b/img/cazare_mattehorn2.webp new file mode 100644 index 0000000..8ff689b Binary files /dev/null and b/img/cazare_mattehorn2.webp differ diff --git a/img/cazare_mattehorn3.webp b/img/cazare_mattehorn3.webp new file mode 100644 index 0000000..6dc01f2 Binary files /dev/null and b/img/cazare_mattehorn3.webp differ diff --git a/img/cazare_nusapenida1.jpg b/img/cazare_nusapenida1.jpg new file mode 100644 index 0000000..698779f Binary files /dev/null and b/img/cazare_nusapenida1.jpg differ diff --git a/img/cazare_nusapenida2.jpg b/img/cazare_nusapenida2.jpg new file mode 100644 index 0000000..9cba9bc Binary files /dev/null and b/img/cazare_nusapenida2.jpg differ diff --git a/img/cazare_nusapenida3.jpg b/img/cazare_nusapenida3.jpg new file mode 100644 index 0000000..bf125f1 Binary files /dev/null and b/img/cazare_nusapenida3.jpg differ diff --git a/img/cazare_petra1.jpg b/img/cazare_petra1.jpg new file mode 100644 index 0000000..3c51257 Binary files /dev/null and b/img/cazare_petra1.jpg differ diff --git a/img/cazare_petra2.jpg b/img/cazare_petra2.jpg new file mode 100644 index 0000000..6638c4a Binary files /dev/null and b/img/cazare_petra2.jpg differ diff --git a/img/cazare_petra3.jpg b/img/cazare_petra3.jpg new file mode 100644 index 0000000..31c053a Binary files /dev/null and b/img/cazare_petra3.jpg differ diff --git a/img/cazare_santorini1.jpg b/img/cazare_santorini1.jpg new file mode 100644 index 0000000..0c8a3a6 Binary files /dev/null and b/img/cazare_santorini1.jpg differ diff --git a/img/cazare_santorini2.jpg b/img/cazare_santorini2.jpg new file mode 100644 index 0000000..4d56820 Binary files /dev/null and b/img/cazare_santorini2.jpg differ diff --git a/img/cazare_santorini3.jpg b/img/cazare_santorini3.jpg new file mode 100644 index 0000000..5992255 Binary files /dev/null and b/img/cazare_santorini3.jpg differ diff --git a/img/cazare_siargao1.jpg b/img/cazare_siargao1.jpg new file mode 100644 index 0000000..711a77a Binary files /dev/null and b/img/cazare_siargao1.jpg differ diff --git a/img/cazare_siargao2.jpg b/img/cazare_siargao2.jpg new file mode 100644 index 0000000..6183835 Binary files /dev/null and b/img/cazare_siargao2.jpg differ diff --git a/img/cazare_siargao3.jpg b/img/cazare_siargao3.jpg new file mode 100644 index 0000000..868107b Binary files /dev/null and b/img/cazare_siargao3.jpg differ diff --git a/img/cazare_sorapiss1.jpg b/img/cazare_sorapiss1.jpg new file mode 100644 index 0000000..4f21b31 Binary files /dev/null and b/img/cazare_sorapiss1.jpg differ diff --git a/img/cazare_sorapiss2.jpg b/img/cazare_sorapiss2.jpg new file mode 100644 index 0000000..0e76071 Binary files /dev/null and b/img/cazare_sorapiss2.jpg differ diff --git a/img/cazare_sorapiss3.jpg b/img/cazare_sorapiss3.jpg new file mode 100644 index 0000000..a7cb017 Binary files /dev/null and b/img/cazare_sorapiss3.jpg differ diff --git a/img/fira.jpg b/img/fira.jpg new file mode 100644 index 0000000..5bbdebd Binary files /dev/null and b/img/fira.jpg differ diff --git a/img/ghetarul_gorner.jpg b/img/ghetarul_gorner.jpg new file mode 100644 index 0000000..92a6327 Binary files /dev/null and b/img/ghetarul_gorner.jpg differ diff --git a/img/gornergratbahn b/img/gornergratbahn new file mode 100644 index 0000000..fbae708 Binary files /dev/null and b/img/gornergratbahn differ diff --git a/img/imag4.png b/img/imag4.png new file mode 100644 index 0000000..34fb26b Binary files /dev/null and b/img/imag4.png differ diff --git a/img/img1.png b/img/img1.png new file mode 100644 index 0000000..5580a3b Binary files /dev/null and b/img/img1.png differ diff --git a/img/img2.png b/img/img2.png new file mode 100644 index 0000000..f55f09c Binary files /dev/null and b/img/img2.png differ diff --git a/img/img3.jpg b/img/img3.jpg new file mode 100644 index 0000000..2c2bcdc Binary files /dev/null and b/img/img3.jpg differ diff --git a/img/img4.jpg b/img/img4.jpg new file mode 100644 index 0000000..c23e87d Binary files /dev/null and b/img/img4.jpg differ diff --git a/img/insula-siargao1.webp b/img/insula-siargao1.webp new file mode 100644 index 0000000..ea1bc2c Binary files /dev/null and b/img/insula-siargao1.webp differ diff --git a/img/insula_siargao.jpg b/img/insula_siargao.jpg new file mode 100644 index 0000000..5773eec Binary files /dev/null and b/img/insula_siargao.jpg differ diff --git a/img/insula_siargao1.jpg b/img/insula_siargao1.jpg new file mode 100644 index 0000000..587c512 Binary files /dev/null and b/img/insula_siargao1.jpg differ diff --git a/img/insula_siargao2.jpg b/img/insula_siargao2.jpg new file mode 100644 index 0000000..640bc87 Binary files /dev/null and b/img/insula_siargao2.jpg differ diff --git a/img/insula_siargao3.jpg b/img/insula_siargao3.jpg new file mode 100644 index 0000000..e1c21aa Binary files /dev/null and b/img/insula_siargao3.jpg differ diff --git a/img/lacul_misurina.jpg b/img/lacul_misurina.jpg new file mode 100644 index 0000000..0653377 Binary files /dev/null and b/img/lacul_misurina.jpg differ diff --git a/img/lacul_sorapiss.jpg b/img/lacul_sorapiss.jpg new file mode 100644 index 0000000..f698780 Binary files /dev/null and b/img/lacul_sorapiss.jpg differ diff --git a/img/lacul_sorapiss2.jpg b/img/lacul_sorapiss2.jpg new file mode 100644 index 0000000..f523fd6 Binary files /dev/null and b/img/lacul_sorapiss2.jpg differ diff --git a/img/lacul_sorapiss3.jpg b/img/lacul_sorapiss3.jpg new file mode 100644 index 0000000..96ac3a7 Binary files /dev/null and b/img/lacul_sorapiss3.jpg differ diff --git a/img/lacul_sorapiss4.jpg b/img/lacul_sorapiss4.jpg new file mode 100644 index 0000000..c310cba Binary files /dev/null and b/img/lacul_sorapiss4.jpg differ diff --git a/img/mattehorn.jpg b/img/mattehorn.jpg new file mode 100644 index 0000000..fd7d52d Binary files /dev/null and b/img/mattehorn.jpg differ diff --git a/img/mattehorn_1.jpg b/img/mattehorn_1.jpg new file mode 100644 index 0000000..3a601ce Binary files /dev/null and b/img/mattehorn_1.jpg differ diff --git a/img/mattehorn_2.webp b/img/mattehorn_2.webp new file mode 100644 index 0000000..e46946d Binary files /dev/null and b/img/mattehorn_2.webp differ diff --git a/img/mattehorn_3.jpg b/img/mattehorn_3.jpg new file mode 100644 index 0000000..276887e Binary files /dev/null and b/img/mattehorn_3.jpg differ diff --git a/img/mattehorn_4.jpg b/img/mattehorn_4.jpg new file mode 100644 index 0000000..243eb68 Binary files /dev/null and b/img/mattehorn_4.jpg differ diff --git a/img/mormintele_regale.png b/img/mormintele_regale.png new file mode 100644 index 0000000..b473e31 Binary files /dev/null and b/img/mormintele_regale.png differ diff --git a/img/naked_beach.avif b/img/naked_beach.avif new file mode 100644 index 0000000..0e0f67c Binary files /dev/null and b/img/naked_beach.avif differ diff --git a/img/nea_kameni.jpg b/img/nea_kameni.jpg new file mode 100644 index 0000000..832cb55 Binary files /dev/null and b/img/nea_kameni.jpg differ diff --git a/img/nusa-penida4.jpg b/img/nusa-penida4.jpg new file mode 100644 index 0000000..a4f64e6 Binary files /dev/null and b/img/nusa-penida4.jpg differ diff --git a/img/nusa_penida.jpg b/img/nusa_penida.jpg new file mode 100644 index 0000000..6ed4844 Binary files /dev/null and b/img/nusa_penida.jpg differ diff --git a/img/nusa_penida2.jpg b/img/nusa_penida2.jpg new file mode 100644 index 0000000..6542b08 Binary files /dev/null and b/img/nusa_penida2.jpg differ diff --git a/img/nusa_penida3.jpg b/img/nusa_penida3.jpg new file mode 100644 index 0000000..fd96450 Binary files /dev/null and b/img/nusa_penida3.jpg differ diff --git a/img/nusa_penida_1.jpg b/img/nusa_penida_1.jpg new file mode 100644 index 0000000..8d4d805 Binary files /dev/null and b/img/nusa_penida_1.jpg differ diff --git a/img/petra.jpg b/img/petra.jpg new file mode 100644 index 0000000..e144f68 Binary files /dev/null and b/img/petra.jpg differ diff --git a/img/petra1.jpg b/img/petra1.jpg new file mode 100644 index 0000000..ad587c7 Binary files /dev/null and b/img/petra1.jpg differ diff --git a/img/petra2.jpg b/img/petra2.jpg new file mode 100644 index 0000000..3967ab2 Binary files /dev/null and b/img/petra2.jpg differ diff --git a/img/petra3.jpg b/img/petra3.jpg new file mode 100644 index 0000000..47bad4d Binary files /dev/null and b/img/petra3.jpg differ diff --git a/img/plaja_kelingking.jpg b/img/plaja_kelingking.jpg new file mode 100644 index 0000000..21834b3 Binary files /dev/null and b/img/plaja_kelingking.jpg differ diff --git a/img/santorini.jpg b/img/santorini.jpg new file mode 100644 index 0000000..cb6f586 Binary files /dev/null and b/img/santorini.jpg differ diff --git a/img/santorini2.jpg b/img/santorini2.jpg new file mode 100644 index 0000000..f123228 Binary files /dev/null and b/img/santorini2.jpg differ diff --git a/img/santorini3.jpg b/img/santorini3.jpg new file mode 100644 index 0000000..bd3a472 Binary files /dev/null and b/img/santorini3.jpg differ diff --git a/img/santorini4.jpg b/img/santorini4.jpg new file mode 100644 index 0000000..1ad5280 Binary files /dev/null and b/img/santorini4.jpg differ diff --git a/img/sohoton_cove.jpg b/img/sohoton_cove.jpg new file mode 100644 index 0000000..dbf71f5 Binary files /dev/null and b/img/sohoton_cove.jpg differ diff --git a/img/strada_cu_coloane.png b/img/strada_cu_coloane.png new file mode 100644 index 0000000..db45be9 Binary files /dev/null and b/img/strada_cu_coloane.png differ diff --git a/img/sugba lagoon.jpg b/img/sugba lagoon.jpg new file mode 100644 index 0000000..e1c23c2 Binary files /dev/null and b/img/sugba lagoon.jpg differ diff --git a/img/tre_cime_di_laverdo.png b/img/tre_cime_di_laverdo.png new file mode 100644 index 0000000..707a3df Binary files /dev/null and b/img/tre_cime_di_laverdo.png differ diff --git a/img3.jpg b/img3.jpg new file mode 100644 index 0000000..2c2bcdc Binary files /dev/null and b/img3.jpg differ diff --git a/img4.jpg b/img4.jpg new file mode 100644 index 0000000..c23e87d Binary files /dev/null and b/img4.jpg differ diff --git a/index.html b/index.html index 17bd451..b8192d7 100644 --- a/index.html +++ b/index.html @@ -1,75 +1,141 @@ - - - - - Proiect HTML+CSS - - - -

Web Heroines

+ + + + + THYNK TRAVEL + + + + + + +
+ +

Descoperă locații unice

+

Din întreaga lume

+ Explorează +
+
+

Cele mai căutate

+
+
+ nusa-penida +
+ Nusa Penida + Bali, indonesia +
+
+
+ mattehorn +
+ Mattehorn + Italia +
+
+
+ insula-siargao +
+ Insula Siargao + Filipine +
+
+
+ Vezi mai multe +
-

Cerințele proiectului

- - +
+ + + + +
+ +
+

Motive să călătorești

+
+
+
+
+

01

+

Dobândești numeroase amintiri frumoase

+
+
+

02

+

Descoperi istoria și cultura locului

+
+ +
+

03

+

Vezi lucruri noi uimitoare

+
+
+
+
+
+
+

Recomandarea săptămânii

+
+ lacul-srapiss +
+

Lacul Sorapiss

+

+ Este un lac în lanțul muntos Sorapiss în Dolomiți, provincia + Belluno. La 12 km distanță de Cortina d'Ampezzo. Lacul are o + altitudine de 1.925 metri deasupra nivelului mării. +

+ +
+
+
+ + diff --git a/insula-siargao.css b/insula-siargao.css new file mode 100644 index 0000000..65a203d --- /dev/null +++ b/insula-siargao.css @@ -0,0 +1,11 @@ +:root { + --main-bg-color: linear-gradient(180deg, #000000 40.02%, #588a77 100%); + --color1: #d7d9d7; + --color2: #588a77; + --color3: #588a77; + --color4: #283f35; + --title: 2rem; +} +.nav { + padding-block-start: 0.1rem; +} diff --git a/insula-siargao.html b/insula-siargao.html new file mode 100644 index 0000000..ff3c160 --- /dev/null +++ b/insula-siargao.html @@ -0,0 +1,199 @@ +DOCTYPE html> + + + + + + Insula Siargao + + + + + + + +
+ +
+
+ insula siargao photo + insula siargao photo + insula siargao photo + insula siargao photo +
+
+
+

Insula Siargao

+

Cel mai frumos loc din Filipine

+

+ Insula Siargao este un paradis tropical situat în provincia Surigao + del Norte din Filipine. Această insulă în formă de lacrimă a crescut + în mod constant în popularitate în ultimii câțiva ani și este adesea + cunoscută drept capitala surfului. +

+

+ Insula Siargao este de obicei accesată prin Aeroportul Sayak, care se + află la aproximativ 10 minute cu mașina de municipalitatea Del Carmen + și la 40 de minute cu mașina de principalul oraș turistic General + Luna. +

+

+ Pe această insulă pot fi vizitate numeroase puncte turistice precum: +

+ +
+
+

Parcul Național Sohoton Cove

+

+ Situat pe insula Bucas Grande și la doar o excursie cu barca de o + oră de portul Dapa din Siargao, acest loc este cu adevărat un + paradis ascuns. +

+

+ Înconjurat de formațiuni masive și maiestuoase de calcar verde și + ape albastre strălucitoare, nu poți să nu te minunezi de + frumusețea crudă a golfului Sohoton. +

+

+ O altă atracție remarcabilă este laguna plină cu mii de meduze. + Turiștilor li s-a permis inițial să înoate cu creaturile + gelatinoase din lagună deoarece meduzele erau inofensive. +

+
+ sohoton cove +
+ +
+
+

Laguna Sugba

+

+ Sugba Lagoon este o bijuterie ascunsă în orașul liniștit Del + Carmen din Siargao. Această destinație spectaculoasă se află în + mijlocul unei păduri mistice de mangrove înconjurată de munți. +

+

+ Laguna Sugba oferă vizitatorilor un loc uimitor de înot de 4.000 + de hectare. Cel mai emblematic reper al lagunei Sugba este + trambulina construită din cherestea de cocos. Poate părea șubredă, + dar aceasta este suficient de puternică pentru a sprijini turist + după turist. +

+
+ sugba lagoon +
+
+ +
+

Cazări de vis

+
+
+ +

Dahun Villas Siargao

+ Rezervă acum + +
+ +
+ +

The Hillside Resort

+ + Rezervă acum + +
+ +
+ +

Punta Surf Retreat

+ Rezervă acum + +
+
+
+
+ +
+

Descoperă priveliștea!

+
+ +
+
+
+

Alte destinații recomandate:

+
+ + + + + +
+
+ + + + diff --git a/lacul-sorapiss.css b/lacul-sorapiss.css new file mode 100644 index 0000000..789140b --- /dev/null +++ b/lacul-sorapiss.css @@ -0,0 +1,8 @@ +:root { + --main-bg-color: linear-gradient(180deg, #000000 40.02%, #3b9fa6 100%); + --color1: #1b2f33; + --color2: #3b9fa6; + --color3: #3b9fa6; + --color4: #1b474b; + --title: 2rem; +} diff --git a/lacul-sorapiss.html b/lacul-sorapiss.html new file mode 100644 index 0000000..c083d00 --- /dev/null +++ b/lacul-sorapiss.html @@ -0,0 +1,197 @@ + + + + + + + THYNK TRAVEL + + + + + + + +
+ +
+ +
+ lacul sorapiss photo + lacul sorapiss photo + lacul sorapiss photo + lacul sorapiss photo +
+ +
+
+

Lacul Sorapiss

+

În inima munților Dolomiți

+

+ Lago di Sorapis este un lac de munte situat în inima incredibililor + Dolomiți, în provincia Belluno, nordul Italiei. Este la aproximativ 15 + minute de orașul Cortina d'Ampezzo, care a găzduit Jocurile + Olimpice de iarnă din 1956. +

+

+ Drumeția către Lacul Sorapis de la Passo Tre Croci este extrem de + populară în rândul vizitatorilor din regiune și este situată aproape + de o serie de atracții din Dolomiți, inclusiv Tre Cime di Lavaredo, + Lacul Misurina, Cortina și Lago di Braies. +

+ +
+
+

Tre Cime din Lavaredo

+

+ Acestea sunt trei vârfuri distinctive asemănătoare crenelurilor, + în Dolomiții Sexten din nord-estul Italiei. Sunt probabil unul + dintre cele mai cunoscute grupuri montane din Alpi. +

+

+ Tre Cime este tipărit pe majoritatea cărților poștale, calendare, + postere, coperți de cărți și suveniruri. Companiile locale și + diferitele proiecte situate în Dolomiți și Alpi aleg adesea + silueta munților ca logo. +

+
+ tre cime di laverdo +
+ +
+
+

Lacul Misurina

+

+ Italia este o sursă inepuizabilă de locuri minunate, iar acest + lucru este subliniat încă o dată prin prezenţa Lacului Misurina, + aflat în zona Cadore, într-un cadru natural superb, la înălţimea + de 1754 de metri. Lungimea lacului este de 2.6 kilometri, dar + apele sale nu depăşesc mai mult de 5 metri. +

+

+ Lacul Misurina este superb în orice perioadă din an, în orice + anotimp, peisaje de poveste se regăsesc la tot pasul. În timpul + sezonului cald, verdele crud care înconjoară lacul contrastează + frumos cu apele de smarald, în timp ce iarna, zăpada de un alb + imaculat evidenţiază şi mai mult luciul apelor. +

+

+ În jur există o sumedenie de poteci montane, locuri potrivite + pentru drumeţii. Traseele sunt diverse, unele sunt dedicate + începătorilor, altele celor mai experimentaţi, important este că + oricine poate practica o activitate pe gustul său. +

+
+ lacul misurina +
+
+ +
+

Cazări de vis

+
+
+ +

Villa Franchetti

+ Rezervă acum + +
+ +
+ +

Hotel Meuble Oasi

+ Rezervă acum + +
+ +
+ +

Deluxe Chalet R&R

+ Rezervă acum + +
+
+
+
+ +
+

Descoperă priveliștea!

+
+ +
+
+ +
+

Alte destinații recomandate:

+
+ + + +
+
+ + + + diff --git a/logo/Airbnb.png b/logo/Airbnb.png new file mode 100644 index 0000000..34e6d71 Binary files /dev/null and b/logo/Airbnb.png differ diff --git a/logo/Booking.png b/logo/Booking.png new file mode 100644 index 0000000..9ba6b37 Binary files /dev/null and b/logo/Booking.png differ diff --git a/logo/Trivago.png b/logo/Trivago.png new file mode 100644 index 0000000..91ab41d Binary files /dev/null and b/logo/Trivago.png differ diff --git a/logo/airbnb-color.png b/logo/airbnb-color.png new file mode 100644 index 0000000..020e201 Binary files /dev/null and b/logo/airbnb-color.png differ diff --git a/logo/booking-color.png b/logo/booking-color.png new file mode 100644 index 0000000..fe19c59 Binary files /dev/null and b/logo/booking-color.png differ diff --git a/logo/momondo-color.png b/logo/momondo-color.png new file mode 100644 index 0000000..8882d9c Binary files /dev/null and b/logo/momondo-color.png differ diff --git a/logo/momondo.png b/logo/momondo.png new file mode 100644 index 0000000..4a1b29f Binary files /dev/null and b/logo/momondo.png differ diff --git a/logo/trivago-colr+or.png b/logo/trivago-colr+or.png new file mode 100644 index 0000000..c4a50dc Binary files /dev/null and b/logo/trivago-colr+or.png differ diff --git a/mattehorn.css b/mattehorn.css new file mode 100644 index 0000000..74ac2d9 --- /dev/null +++ b/mattehorn.css @@ -0,0 +1,8 @@ +:root { + --main-bg-color: linear-gradient(180deg, #000000 40.02%, #8975b5 100%); + --color1: #d7d9d7; + --color2: #8975b5; + --color3: #8975b5; + --color4: #3f3552; + --title: 2.8rem; +} diff --git a/mattehorn.html b/mattehorn.html new file mode 100644 index 0000000..8343e24 --- /dev/null +++ b/mattehorn.html @@ -0,0 +1,191 @@ + + + + + + + Mattehorn + + + + + + + +
+ +
+ +
+ mattehorn photo + mattehorn photo + mattehorn photo + mattehorn photo +
+ +
+
+

Mattehorn

+

Muntele simbol

+

+ Situat lângă Zermatt, la granița dintre Italia și Elveția în Alpii + Pennini, este unul dintre cei mai vestiți și deosebiți munți din lume. + Are forma unei piramide abrupte și înclinate, al cărui perete estic + este aproape vertical și care se ridică la o altitudine de aproape + 1000 de metri deasupra ghețarilor. Matterhorn face concureță tuturor + vârfurilor de peste 8000 de metri din lume, fiind considerat cel mai + fotografiat munte. +

+

+ Pe lângă reunimitul munte, în Zermatt pot fi vizitate și alte puncte + turistice interesante precum: +

+ +
+
+

Calea ferată Gornergratbahn

+

+ Calea ferată Gornergrat este o linie de cale ferată cu tracțiune + electrică care leagă Zermatt de Gornergrat în regiunea Monte Rosa. +

+

+ Gestionat de compania feroviară privată elvețiană cu același nume, + este a doua cea mai înaltă cale ferată din Europa , depășită doar + de calea ferată Jungfrau care atinge o altitudine mai mare. +

+
+ gornergratbahn +
+ +
+
+

Ghetarul Gorner

+

+ Ghețarul Gorner este un ghețar de vale găsit pe partea de vest a + masivului Monte Rosa, aproape de Zermatt , în cantonul Valais, + Elveția. Are aproximativ 12,4 km lungime și până la 1,5 km lățime. +

+

+ O caracteristică interesantă a acestui ghețar este Gornersee, un + lac marginal de gheață în zona de confluență a Gorner- și + Grenzgletscher. Acest lac se umple în fiecare an și se scurge + vara, de obicei ca o viitură de lac glaciar. Acesta este unul + dintre puținele lacuri glaciare din Alpi care prezintă acest tip + de comportament. +

+
+ getarul gorner +
+
+ +
+

Cazări de vis

+
+
+ +

Cabana Bielti

+ Rezervă acum + +
+ +
+ +

Chalet Alpine Lodge

+ Rezervă acum + +
+ +
+ +

Casa Pia

+ Rezervă acum + +
+
+
+
+ +
+

Descoperă priveliștea!

+
+ +
+
+ +
+

Alte destinații recomandate:

+
+ + + + + +
+
+ + + + diff --git a/nusa-penida.css b/nusa-penida.css new file mode 100644 index 0000000..0c7e0f1 --- /dev/null +++ b/nusa-penida.css @@ -0,0 +1,12 @@ +:root { + --main-bg-color: linear-gradient( + 180deg, + #000000 40.02%, + rgba(3, 33, 54, 0.81) 100% + ); + --color1: #76949f; + --color2: rgba(3, 33, 54, 0.81); + --color3: #76949f; + --color4: #18222a; + --title: 2.8rem; +} diff --git a/nusa-penida.html b/nusa-penida.html new file mode 100644 index 0000000..ed2d305 --- /dev/null +++ b/nusa-penida.html @@ -0,0 +1,210 @@ + + + + + + + Nusa Penida + + + + + + + +
+ +
+ +
+ nusa penida photo + nusa penida photo + nusa penida photo + nusa penida photo +
+ +
+
+

Nusa Penida

+

+ Una dintre cele mai frumoase destinații din Bali +

+

+ Nusa Penida este una dintre cele mai de preț bijuterii din Bali! + Insula Penida face parte din Insulele Nusa și este cea mai mare dintre + cele trei, însă cea mai puțin dezvoltată până acum. Și tocmai pentru + că turismul pe insulă încă nu a explodat, acest loc are un farmec + aparte ce te va cuceri de la prima vedere. Vizitând Nusa Penida, vei + găsi plaje cu nisip alb, cu apă albastră, cu stânci de coastă de 200 + de metri înălțime și o natură luxuriantă. +

+

+ Luând o barcă din Bali, vei avea nevoie de doar 45 de minute pentru a + ajunge la această destinație! Și ai o mulțime de motive să o faci, + insula fiind plină de atracții și frumuseți naturale! Pe câteva dintre + ele le menționăm în rândurile de mai jos: +

+ +
+
+

Plaja Kelingking

+

+ În mod cert, plaja Kelingking este cel mai spectaculos loc din + Nusa Penida. De fapt, imaginea acestei plaje o găsim mai peste tot + când căutam pe google ceva despre Nusa Penida. +

+

+ Această bucată de pământ sub formă de dinozaur are un nisip alb ca + zăpada și o apă turcoaz ale cărei valuri se sparg vertiginos de + stâncile-i spectaculoase. +

+

+ Vederea din partea de sus a plajei este incredibilă, iar dacă vrei + să cobori până pe plajă trebuie să te pregătești de puțin efort + fizic. Plimbarea durează 45 de minute, se face pe o cale destul de + abruptă și nu este foarte sigură. +

+
+ plaja-kelingking +
+ +
+
+

Broken Beach și Angel's Bilabong

+

+ Nusa Penida este plină de locuri spectaculoase. Broken Beach este + unul dintre ele. Situată la circa 45 de minute de Kelingking, + această formațiune stâncoasă, modelată în formă de arcadă, pe sub + care oceanul trece formând o piscină naturală cu cea mai clară apă + pe care o vei găsi vreodată, te va impresiona nespus! +

+

+ Fantastica piscină naturală, denumita Angel's Bilabong, deși + pare cel mai liniștit loc de pe pământ, este deosebit de + periculoasă, mulți călători pierzându-și viața în apele ei, + curenții puternici ai oceanului fiind subestimați. +

+

+ Prin urmare, îți recomandăm să te bucuri doar vizual de această + frumusețe a naturii și să nu te avânți în largul ei! +

+
+ broken-beach +
+
+ +
+

Cazări de vis

+
+
+ nusa penida cazare +

The Catar Cottages

+

1.8km pana la plaja

+ Rezervă acum +
+ +
+ nusa penida cazare +

Crystal Bay Bungalows

+

550m pana la plaja

+ Rezervă acum +
+ +
+ nusa penida cazare +

pondok bamboo villa

+

200m pana la plaja

+ Rezervă acum +
+
+
+
+ +
+

Descoperă priveliștea!

+
+ +
+
+
+

Alte destinații recomandate:

+
+ + + + + +
+
+ + + + diff --git a/petra.css b/petra.css new file mode 100644 index 0000000..179629c --- /dev/null +++ b/petra.css @@ -0,0 +1,8 @@ +:root { + --main-bg-color: linear-gradient(180deg, #000000 40.02%, #a66b58 100%); + --color1: #bbada9; + --color2: #a66b58; + --color3: #a66b58; + --color4: #472e26; + --title: 5rem; +} diff --git a/petra.html b/petra.html new file mode 100644 index 0000000..40ba7af --- /dev/null +++ b/petra.html @@ -0,0 +1,176 @@ + + + + + + + Petra + + + + + + + +
+ +
+ +
+ petra photo + petra photo + petra photo + petra photo +
+ +
+
+

Petra

+

Orașul de piatră din pustiul Iordaniei

+

+ Petra este una din cele 7 minuni ale lumii moderne, un loc unic, care + te trimite înapoi în istorie, pe vremea nabateenilor (trib de arabi + nomazi) care l-au construit aproape miraculos, săpându-l în întregime + în piatră. Petra veche reprezintă o barieră dramatică în munţi cu un + colorit diferit, care merge paralel cu Wadi “Araba”. +

+

+ Dacă continui explorarea orașului antic vei putea admira și + următoarele: +

+ +
+
+

Strada cu coloane

+

+ În centrul Orașul Petra o stradă colonată conectează astăzi + amfiteatrul roman de Templul principal Qasr al-Bint. Este de + origine nabateeană și a fost strada principală în perioada de + glorie a orașului comercial Petra. +

+

+ Aceasta a fost recondiționată ulterior în perioada ocupației + romane și reconstruită în anul 106 î.Hr. cu o lățime de 6 metri. +

+
+ strada cu coloane +
+ +
+
+

Mormintele regale

+

+ Mormintele regale au fost sculptate din gresie roșie-trandafir de + către nabateeni în urmă cu mai bine de 2.300 de ani și se află în + inima orașului antic Petra. +

+

+ Primul dintre așa-numitele Morminte Regale este Mormântul Urnelor. + Acest mormânt este construit pe munte și necesită urcarea mai + multor etaje de scări. Abate Starcky a sugerat că acesta este + mormântul regelui nabatean Malchus al II-lea, care a murit în anul + 70 d.Hr. +

+
+ mormintele regale +
+
+ +
+

Cazări de vis

+
+
+ +

Infinity Lodge

+ Rezervă acum +
+ +
+ +

Guest House Hotel

+ Rezervă acum +
+ +
+ +

Peace Castle

+ Rezervă acum +
+
+
+
+ +
+

Descoperă priveliștea!

+
+ +
+
+
+

Alte destinații recomandate:

+
+ + + + + +
+
+ + + + diff --git a/santorini.css b/santorini.css new file mode 100644 index 0000000..16c542d --- /dev/null +++ b/santorini.css @@ -0,0 +1,8 @@ +:root { + --main-bg-color: linear-gradient(180deg, #000000 40.02%, #91a5aa 100%); + --color1: #1b2f33; + --color2: #91a5aa; + --color3: #91a5aa; + --color4: #414a4c; + --title: 3rem; +} diff --git a/santorini.html b/santorini.html new file mode 100644 index 0000000..ef0ab92 --- /dev/null +++ b/santorini.html @@ -0,0 +1,195 @@ + + + + + + + Santorini + + + + + + + +
+ +
+ +
+ santorini photo + santorini photo + santorini photo + santorini photo +
+ +
+
+

Santorini

+

Cea mai spectaculoasă insulă a Greciei

+

+ Cea mai sudică insulă a arhipelagului Cyclade din estul Mării + Mediterane, situată între insulele Ios si Anafi, la o distanță nordică + de 63 mile marine de Insula Creta, are o istorie de peste 3500 ani și + este recunoscută ca emblema turismului mediteranean. Imaginea + magicelor case albe cu acoperișuri albastre, pe fundalul mării și + cerul senin, au devenit culorile drapelului grecesc. +

+

+ Pe această insulă pot fi vizitate numeroase puncte turistice precum: +

+
+
+

Nea Kameni

+

+ Marea explozie a vulcanului din Santorini a avut loc acum circa + 3.700 de ani, aruncând în aer partea superioară a insulei. Apa a + umplut rapid caldera formând o lagună imensă care este atât de + adâncă încât chiar și cel mai mare vas de croazieră își poate lăsa + ancora în apele sale. +

+

+ În centrul calderei se află două insule vulcanice: Nea Kameni și + Palea Kameni (Noua și Vechea Kameni). +

+
+ nea kameni +
+ +
+
+

Fira

+

+ Capitala insulei Santorini, Fira, este una dintre cele mai + spectaculoase locații ale acesteia. Cocoțate pe marginea calderei, + clădirile albe, construite din blocuri asemănătoare zahărului + cubic, oferă priveliști incredibile asupra Mării Egee și + împrejurimilor. +

+

+ Aceste panorame sunt și mai speciale în momentul în care soarele + apune și întregul oraș este scăldat într-o lumină aurie magnifică. + Străzile din Fira sunt pline de tot felul de magazine, + restaurante, cafenele, baruri și cluburi de noapte și sunt foarte + aglomerate în sezon. Vizitatorii care vin de pe mare pot ajunge în + oraș urcând scările în zig-zag. Cei mai puțin aventuroși pot opta + pentru urcatul cu telecabina. +

+
+ fira +
+
+ +
+

Cazări de vis

+
+
+ +

Hotel Eucalyptus

+ Rezervă acum + +
+ +
+ +

Luxury Sunny Lofts

+ Rezervă acum + +
+ +
+ +

Elitoz Suites

+ Rezervă acum + +
+
+
+
+ +
+

Descoperă priveliștea!

+
+ +
+
+ +
+

Alte destinații recomandate:

+
+ + + + + +
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..3d13bc3 --- /dev/null +++ b/style.css @@ -0,0 +1,486 @@ +body { + margin: 0; + padding: 0; + font-family: "Inter", sans-serif; + background: linear-gradient( + 180deg, + #000000 40.02%, + rgba(224, 185, 157, 0.81) 100% + ); +} + +header { + background-image: url("img/background-darker.jpg"); + background-size: cover; + background-position: center; + text-align: center; + color: white; + text-transform: uppercase; +} + +.nav a { + text-decoration: none; + color: white; + text-shadow: 0 0.2rem 0.3rem black; +} + +.nav { + display: flex; + list-style-type: none; + align-items: center; + justify-content: center; + gap: 1rem; + font-size: 0.8rem; + color: white; + padding-inline: 0; + padding-block-start: 0.7rem; + margin: 0; +} + +.menu-item { + position: relative; +} + +.menu-item::after { + content: ""; + position: absolute; + background-color: rgb(72, 209, 204); + height: 0.15rem; + width: 0; + inset-inline-start: 0; + inset-block-end: -0.6rem; + transition: 0.3s; +} + +.menu-item:hover::after { + width: 100%; +} + +.logo { + height: 4rem; + font-weight: bold; +} + +@keyframes text_reveal_box { + 50% { + width: 100%; + inset-inline-start: 0; + } + 100% { + width: 0; + inset-inline-start: 100%; + } +} + +@keyframes text_reveal { + 100% { + color: white; + } +} + +.page-title { + display: block; + font-size: 2.75rem; + width: fit-content; + margin-inline: auto; + margin-block: 5rem 0; + position: relative; + color: transparent; + animation: text_reveal 1s ease forwards; + animation-delay: 1.5s; +} +.page-title::after { + content: ""; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + height: 100%; + width: 0; + background-color: #00a1c2; + animation: text_reveal_box 1s ease; + animation-delay: 1s; +} + +.page-subtitle { + color: rgba(255, 255, 255, 0.558); + font-size: 0.8rem; + padding-block-end: 3rem; +} + +.btn-explore { + text-decoration: none; + color: white; + font-size: 0.9rem; + border: 0.1rem solid white; + padding: 0.5rem 1rem; + display: inline-block; + margin-inline: auto; +} + +.btn-explore:hover { + color: #00a1c2; + border: 0.1rem solid #00a1c2; +} + +.explore { + color: white; + text-align: center; + padding-block-start: 4rem; +} + +.same-h2 { + font-size: 1.25rem; + text-transform: uppercase; + font-family: "Poppins", sans-serif; + color: white; + text-align: center; + margin-block: 4rem; +} + +.cards { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.card { + display: flex; + flex-direction: column; + background-color: rgba(255, 255, 255, 0.726); + align-items: center; + width: 18rem; + height: 24rem; + margin: 2rem; + transition: transform 2s ease; +} + +.card:hover { + box-shadow: 0 0 1rem #a58d7d; + transform: scale(1.2); +} + +.card img { + width: 100%; + height: 20rem; + object-fit: cover; + background-color: transparent; +} + +.info { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.card-name { + text-decoration: none; + color: black; + text-transform: uppercase; + font-weight: bold; + font-size: 1.5rem; + margin-block-start: 0.5rem; +} + +.card-name:hover { + color: #dd7e3f; +} + +.card-location { + color: #004b5c; + font-weight: bold; + margin-block-start: 0.3rem; +} + +.see-more { + text-decoration: none; + color: #00a1c2; + text-transform: uppercase; + font-weight: bold; +} + +.see-more:hover { + color: #90d3e1; +} + +.sponsors { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + justify-items: center; + align-items: center; + margin-inline: auto; + margin-block-start: 5rem; + padding: 1.5rem; + background-color: rgba(255, 255, 255, 0.079); + border-radius: 10rem; + margin-inline: auto; +} + +.booking { + height: 1.3rem; +} + +.airbnb { + height: 1.7rem; +} + +.momondo { + height: 1rem; +} + +.trivago { + height: 1.3rem; +} + +.sponsor { + transition: transform 1s ease; +} + +.sponsor:hover { + transform: scale(1.2); +} + +.reasons { + display: flex; + flex-direction: column; + align-items: center; +} + +.reasons img { + max-height: 25rem; + margin-inline: 2.5rem; + margin-block-end: 2rem; + object-fit: contain; +} + +.left, +.right { + transition: transform 2s; +} + +.left:hover, +.right:hover { + transform: scaleX(-1); +} + +.individual { + display: flex; + margin-inline: 1.5rem; + margin-block-end: 0.5rem; + align-items: center; +} + +.individual h2 { + padding-inline: 1rem; + font-size: 1.5rem; + margin-block: 0.5rem; + color: #00a1c2; +} + +.text-pg { + display: inline-block; + margin-inline: 1rem; + color: white; + font-size: 0.8rem; +} + +.week-card { + display: flex; + flex-direction: column; + background-color: rgba(255, 255, 255, 0.25); + align-items: center; + max-width: 40rem; + max-height: 30rem; + margin-inline: 1rem; + box-shadow: 0 0 2rem 1rem rgba(0, 0, 0, 0.259); + margin-block-end: 5rem; +} + +.week-card img { + width: 100%; + height: 20rem; + object-fit: cover; +} + +.week-text { + align-items: center; +} + +.week-text h2 { + margin: 0.5rem; + font-weight: bold; + font-size: 1.8rem; + color: white; + text-align: center; + text-transform: uppercase; +} + +.week-text span { + color: #02819b; +} + +.week-text p { + font-size: 0.9rem; + color: white; + text-align: justify; + margin-inline: 0.7rem; +} + +.week-btn { + display: flex; + margin-block-end: 1rem; +} + +footer { + background-color: rgba(0, 0, 0, 0.433); + display: flex; + flex-direction: row; + justify-content: center; + gap: 2rem; + padding-block: 0.3rem; +} + +.icon { + height: 2rem; +} + +@media screen and (min-width: 688px) { + .page-title { + margin-block-start: 15rem; + } + + .page-subtitle { + font-size: 1rem; + margin-block-start: 0.5rem; + padding-block-end: 10rem; + } + + .btn-explore { + font-size: 1.5rem; + } + + .explore { + padding-block-start: 7rem; + } + + .sponsors { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + margin-inline: 6rem; + } + + .week-card { + flex-direction: row; + align-items: center; + margin-inline: auto; + height: 27rem; + max-width: 60%; + } + + .week-card img { + max-width: 50%; + height: 27rem; + object-fit: cover; + } + + .week-btn > .btn-explore { + font-size: 1.3rem; + margin-block: 5rem 2rem; + } +} + +@media screen and (min-width: 960px) { + .page-title { + font-size: 3rem; + } + + .same-h2 { + font-size: 2rem; + } + + .cards { + flex-direction: row; + } + + .card { + margin-block-start: 12rem; + } + + .center { + margin-block-start: 2rem; + } + + .reasons { + display: grid; + grid-template-columns: 1fr 2fr 1fr; + justify-items: center; + } + + .reasons img { + margin-inline: 4rem; + max-height: 25rem; + } + + .individual { + margin: 0; + } + + .minipg { + font-size: 1rem; + } +} + +@media screen and (min-width: 1200px) { + .nav { + font-size: 1rem; + justify-content: space-around; + margin-inline: 25rem; + padding-block-start: 1.5rem; + } + + .same-h2 { + font-size: 3rem; + margin-block-start: 5rem; + } + + .explore p { + font-size: 1rem; + margin-block-end: 1rem; + } + + .details { + margin-inline: 10rem; + } + + .cards { + justify-content: space-around; + margin-inline: 8%; + } + + .card { + height: 29rem; + width: 22rem; + object-fit: cover; + } + + .card img { + height: 24.5rem; + } + + .see-more { + font-size: 1.5rem; + } + .reasons img { + margin-inline: 4rem; + max-height: 35rem; + } + .individual h2 { + font-size: 2rem; + } + .minipg { + font-size: 1.2rem; + } +}