commit 6ca84acb659fcbf80ad52375f98b266e3f839124 Author: Loi Phan Date: Sat Jun 24 19:10:16 2023 +0700 Init code diff --git a/assets/destination-1.jpg b/assets/destination-1.jpg new file mode 100644 index 0000000..3aa6dd6 Binary files /dev/null and b/assets/destination-1.jpg differ diff --git a/assets/destination-2.jpg b/assets/destination-2.jpg new file mode 100644 index 0000000..322d08e Binary files /dev/null and b/assets/destination-2.jpg differ diff --git a/assets/destination-3.jpg b/assets/destination-3.jpg new file mode 100644 index 0000000..9b0bcc2 Binary files /dev/null and b/assets/destination-3.jpg differ diff --git a/assets/destination-4.jpg b/assets/destination-4.jpg new file mode 100644 index 0000000..4a6e5c0 Binary files /dev/null and b/assets/destination-4.jpg differ diff --git a/assets/gallery-1.jpg b/assets/gallery-1.jpg new file mode 100644 index 0000000..ec1b576 Binary files /dev/null and b/assets/gallery-1.jpg differ diff --git a/assets/gallery-2.jpg b/assets/gallery-2.jpg new file mode 100644 index 0000000..21c1f95 Binary files /dev/null and b/assets/gallery-2.jpg differ diff --git a/assets/gallery-3.jpg b/assets/gallery-3.jpg new file mode 100644 index 0000000..4b48c9b Binary files /dev/null and b/assets/gallery-3.jpg differ diff --git a/assets/header-1.jpg b/assets/header-1.jpg new file mode 100644 index 0000000..0da7d7f Binary files /dev/null and b/assets/header-1.jpg differ diff --git a/assets/header-2.jpg b/assets/header-2.jpg new file mode 100644 index 0000000..285a5df Binary files /dev/null and b/assets/header-2.jpg differ diff --git a/assets/story.jpg b/assets/story.jpg new file mode 100644 index 0000000..5878a5e Binary files /dev/null and b/assets/story.jpg differ diff --git a/assets/trip-1.jpg b/assets/trip-1.jpg new file mode 100644 index 0000000..61c3534 Binary files /dev/null and b/assets/trip-1.jpg differ diff --git a/assets/trip-2.jpg b/assets/trip-2.jpg new file mode 100644 index 0000000..e5a9af3 Binary files /dev/null and b/assets/trip-2.jpg differ diff --git a/assets/trip-3.jpg b/assets/trip-3.jpg new file mode 100644 index 0000000..bf254c7 Binary files /dev/null and b/assets/trip-3.jpg differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..193daa2 --- /dev/null +++ b/css/style.css @@ -0,0 +1,276 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap'); + +:root{ + --primary-color: #3685fb; + --primary-color-dark: #2f73d9; + --secondary-color: #fafcff; + --text-dark: #0d213f; + --text-light: #767268; + --extra-light: #ffffff; + --max-width: 1200px; +} + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.section__container { + max-width: var(--max-width); + margin: auto; + padding: 5rem 1rem; +} + +.section__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + flex-wrap: wrap; + margin-bottom: 4rem; +} + +.section__title { + font-size: 2rem; + font-weight: 600; + color: var(--text-dark); + margin-bottom: 1rem; +} + +.section__subtitle { + font-size: 1rem; + color: var(--text-dark); + max-width: calc(var(--max-width) / 2); +} + +.btn { + padding: .75rem 2rem; + outline: none; + border: none; + font-size: 1rem; + color: var(--extra-light); + background-color: var(--primary-color); + border-radius: 5rem; + cursor: pointer; + transition: .3s; +} + +.btn:hover { + background-color: var(--primary-color-dark); +} + +a { + text-decoration: none; +} + +img{ + width: 100%; + display: block; +} + +body { + font-family: 'Poppins', sans-serif; +} + +nav { + padding: 1rem; + position: absolute; + top: 0px; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: var(--max-width); + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav__logo { + font-size: 1.2rem; + font-weight: 600; + color: var(--text-dark); + cursor: pointer; +} + +.nav__logo span { + color: var(--primary-color); +} + +.nav__links { + list-style: none; + display: flex; + align-items: center; + gap: 1rem; +} + +.link a { + padding: 0 1rem; + color: var(--text-dark); + transition: 0.3s; +} + +.link a:hover{ + color: var(--primary-color); +} + +header{ + background-color: var(--secondary-color); +} + +.header__container { + min-height: 100vh; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.header__image { + position: relative; +} + +.header__image img { + position: absolute; + top: 50%; + left: 50%; + border: 0.5rem solid var(--extra-light); + border-radius: 2rem; + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); +} + +.header__image img:nth-child(1) { + max-width: 350px; + transform: translate(-75%, -50%); +} + +.header__image img:nth-child(2) { + max-width: 250px; + transform: translate(0%, -25%); +} + +.header__content { + display: flex; + align-items: center; + justify-content: center; +} + +.header__container > div { + max-width: 400px; + display: grid; + gap: 1rem; +} + +.header__content .sub__header { + font-size: 1rem; + font-weight: 600; + color: var(--primary-color); +} + +.header__content h1 { + font-size: 3rem; + line-height: 4rem; + font-weight: 800; + color: var(--text-dark); +} + +.header__content .action__btns { + display: flex; + align-items: center; + gap: 2rem; + margin-top: 1rem; +} + +.story { + display: flex; + align-items: center; + gap: 2rem; + margin-top: 1rem; + cursor: pointer; +} + +.video__image { + position: relative; +} + +.video__image img { + width: 60px; + height: 60px; + border-radius: 100%; + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); +} + +.video__image span { + position: absolute; + top: 50%; + left: 100%; + transform: translate(-50%, -50%); +} + +.video__image span i { + padding: 0.5rem; + font-size: 1rem; + color: red; + background-color: var(--extra-light); + border-radius: 100%; + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); +} + +.story > span { + font-size: 1rem; + font-weight: 600; + color: var(--text-dark); +} + +.destination__nav { + display: flex; + gap: 1rem; +} + +.destination__nav span { + width: 30px; + height: 30px; + display: grid; + place-content: center; +} + +.destination__nav span:hover { + color: var(--extra-light); + background-color: var(--primary-color); +} + +.destination__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.destination__card { + overflow: hidden; + position: relative; + isolation: isolate; /* Note */ + cursor: pointer; +} + +.destination__card img { + border-radius: 1rem; +} + +.destination__details { + position: absolute; + width: calc(100% - 2rem); + padding: 1rem; + bottom: -6rem; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: var(--extra-light); + background-color: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(4px); + border-radius: 10px; + z-index: 1; + transition: 0.3s; +} + +.destination__card:hover .destination__details{ + bottom: 1rem; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f00ff34 --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + + Practice + + + + + +
+
+
+ header + header +
+
+
+

Book Now

+

The Smiling 😊
agent for travel

+

+ Make your travel more enjoyable with us. We are the best travel + agency and we are providing the best travel services for our + clients. +

+
+ +
+
+ story + +
+ Watch our story +
+
+
+
+
+
+ +
+
+
+

Explore top destinations

+

+ Explore your suitable and dreams places around the world. Here you + can find your right destination. +

+
+
+ + +
+
+
+
+ destination +
+

Banff

+

Canada

+
+
+
+ destination +
+

Machu Picchu

+

Peru

+
+
+
+ destination +
+

Lauterbrunnen

+

Switzerland

+
+
+
+ destination +
+

Zhangjiajie

+

China

+
+
+
+
+ + \ No newline at end of file