diff --git a/assets/actions-config-step-1.png b/assets/actions-config-step-1.png deleted file mode 100755 index 9847cc7d824..00000000000 Binary files a/assets/actions-config-step-1.png and /dev/null differ diff --git a/assets/actions-config-step-2.png b/assets/actions-config-step-2.png deleted file mode 100755 index 9578cf1d225..00000000000 Binary files a/assets/actions-config-step-2.png and /dev/null differ diff --git a/assets/how-it-works.png b/assets/how-it-works.png deleted file mode 100755 index ab9c0802cc5..00000000000 Binary files a/assets/how-it-works.png and /dev/null differ diff --git a/assets/repo-settings.png b/assets/repo-settings.png deleted file mode 100755 index 8951c8a7fb8..00000000000 Binary files a/assets/repo-settings.png and /dev/null differ diff --git a/assets/status.png b/assets/status.png deleted file mode 100755 index 67ec99915c8..00000000000 Binary files a/assets/status.png and /dev/null differ diff --git a/src/css/about-us.css b/src/css/about-us.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/css/advantages.css b/src/css/advantages.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/css/footer.css b/src/css/footer.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/css/header.css b/src/css/header.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/css/hero.css b/src/css/hero.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/css/our-yachts.css b/src/css/our-yachts.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/css/rent-a-yacht.css b/src/css/rent-a-yacht.css new file mode 100644 index 00000000000..29b66c91cf3 --- /dev/null +++ b/src/css/rent-a-yacht.css @@ -0,0 +1,143 @@ +.rent-a-yacht-sect { + background-color: #0E1823; +} +.yacht-renting-container { + min-width: 375px; + padding-left:20px; + padding-right: 20px; +} +.form-title { + color:#FBFBFB; + width: 222px; +height: 28px; +left: 20px; +font-size: 28px; +font-weight: 500; +line-height: 28px; +letter-spacing: -0.02em; +margin-bottom: 40px; +text-align: left; +} +.rent-form { +display:flex; +flex-direction: column; +gap:18px; +min-width:335px; +min-height:288px; +} +.input-form { + padding-left: 18px; + border: 1px solid #FBFBFB33; + background-color: #0E1823; + width:335px; + height:45px; + border-radius: 12px; + font-size: 12px; + font-weight: 400; + line-height: 14px; + +} +.form-comment { +width: 335px; + height: 108px; + padding-top: 14px; + padding-left:18px; + border-radius: 12px ; + border: 1px solid #FBFBFB33; + background-color: #0E1823; + resize: none; + font-size: 12px; + font-weight: 400; + line-height: 14px; + text-align: left; + margin-bottom: 20px; + +} +.form-btn { + + color: #FBFBFB; + background-color: #1B414B; + font-size: 14px; + font-weight: 500; + line-height: 18px; + letter-spacing: -0.02em; + text-align: center; + width: 122px; + height: 46px; + border-radius: 15px; + border:none; + padding: 15px; +} +.yacht-pic { + margin-top: 80px; + border-radius: 24px; + +} + +/* --tablet-- */ +@media (min-width:768px) { +.yacht-renting-container { + min-width: 768px; + padding-left: 148px; + padding-right: 147px; +} +.form-title { + width: 381px; + height: 48px; + font-size: 48px; + font-weight: 500; + line-height: 48px; + letter-spacing: -0.02em; + text-align: left; + + +} +.input-form { +width:472px; +height:54px; + font-size: 14px; + font-weight: 400; + line-height: 18px; + +} +.form-comment { + width:472px; + height: 116px; + font-size: 14px; + font-weight: 400; + line-height: 18px; + +} +.form-btn { + width:194px; + height: 56px; +} +.form-container { + display: flex; + flex-direction: column; + margin-left:40px; + +} +.yacht-pic { + width: 768px; +} + +} + +/* --desktop-- */ +@media (min-width:1280px) { +.yacht-renting-container { + min-width:1280px; + padding-left:50px; + margin-left:auto; + display: flex; + gap:50px; + flex-direction: row-reverse; +} +.yacht-pic { + width: 658px; + height: 536px; + margin-top: auto; + +} +} \ No newline at end of file diff --git a/src/css/reviews.css b/src/css/reviews.css new file mode 100644 index 00000000000..84e28cd2aaf --- /dev/null +++ b/src/css/reviews.css @@ -0,0 +1,146 @@ +.reviews-container { + min-width: 375px; + padding-left: 20px; + padding-right: 20px; +} +.reviews_section { + padding-top: 80px; + padding-bottom: 100px; +} +.reviews-section-title { + max-width: 300px; + text-align: center; + margin-bottom: 25px; + font-size: 28px; + font-weight: 500; + line-height: 28px; + letter-spacing: -0.02em; + color:#FBFBFB; + + +} +.reviews-sect-description { + width:335px; + font-size: 12px; + font-weight: 400; + line-height: 14px; + letter-spacing: -0.02em; + text-align: center; + margin-bottom: 40px; + color:#FBFBFB; + +} +.review-list-item { + background-color: #FBFBFB; + border-radius: 24px; + width: 335px; + height: 282px; + padding:20px 16px; +} + +.reviewer-name { + color:#040306; + font-size: 18px; + font-weight: 500; + line-height: 19.8px; + letter-spacing: -0.02em; + text-align: center; + margin-top:20px; + margin-bottom: 10px; +} +.the-review { + width: 303px; + height: 110px; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + letter-spacing: -0.02em; + text-align: center; + color:#04030666; +} +.reviewer-pic { + margin:auto ; + + +} +@media (min-width:300px) and (max-width:767px) { +.review-type-second, .review-type-last { + display: none; +} +} + +/* --tablet-- */ +@media (min-width:768px) { + .reviews_section { + padding-left: 50px; + } + .reviews-container { + min-width: 768px; + padding-left: 50px; + padding-right: 32px; + } + .reviews-section-title { + max-width:704px; + margin: auto; + font-size: 48px; + font-weight: 500; + line-height: 48px; + letter-spacing: -0.02em; + + } + .reviews-sect-description { + width: 571px; + height: 36px; + font-size: 14px; + line-height: 18px; + letter-spacing: -0.02em; + margin: auto; + margin-top: 25px; + } + + .reviews-list { + display: flex; + gap:26px; + margin-top: 75px; + margin-left: 50px; + + } + .review-list-item { + padding:30px 16px; + + } + + + +} + +@media (min-width:768px) and (max-width:1279px){ +.review-type-last { + display: none; + } + } + +/* --desktop-- */ +@media (min-width:1280px) { + .reviews_section { + padding-left: 70px; + } + .reviews-container { + min-width: 1280px; + padding-left: 50px; + padding-right: 50px; + } + .reviews-section-title { + max-width: 854px; + } + .the-review { + width: 320px; + } + .reviews-list { + gap: 32px; + margin-left: 50px; + } + .review-list-item { + width: 376px; + } +} \ No newline at end of file diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100755 index 00000000000..e977169664f --- /dev/null +++ b/src/css/styles.css @@ -0,0 +1,61 @@ +@import url('./header.css'); +@import url('./hero.css'); +@import url('./about-us.css'); +@import url('./our-yachts.css'); +@import url('./advantages.css'); +@import url('./rent-a-yacht.css'); +@import url('./reviews.css'); +@import url('./footer.css'); + + + + +body { + font-family: 'Inter', sans-serif; + color: #fbfbfb; + background-color: #0e1823; + } + + a { + color: currentColor; + text-decoration: none; + } + + ul, + ol { + list-style-type: none; + } + + h1, + h2, + h3, + h4, + h5, + h6, + p { + margin: 0; + } + + img { + display: block; + max-width: 100%; + height: auto; + } + + p:last-child { + margin-bottom: 0; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + } + + + + button { + cursor: pointer; + } + + diff --git a/src/images/ihor-pic.jpg b/src/images/ihor-pic.jpg new file mode 100644 index 00000000000..a34b87ea5f3 Binary files /dev/null and b/src/images/ihor-pic.jpg differ diff --git a/src/images/john-wax.jpg b/src/images/john-wax.jpg new file mode 100644 index 00000000000..49865a3907e Binary files /dev/null and b/src/images/john-wax.jpg differ diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100755 index a6ce6517853..00000000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/images/symbol-defs.svg b/src/images/symbol-defs.svg new file mode 100644 index 00000000000..249dc0e5f59 --- /dev/null +++ b/src/images/symbol-defs.svg @@ -0,0 +1,10 @@ + diff --git a/src/images/victoria-pic.jpg b/src/images/victoria-pic.jpg new file mode 100644 index 00000000000..24ed89fecca Binary files /dev/null and b/src/images/victoria-pic.jpg differ diff --git a/src/images/yacht-image.jpg b/src/images/yacht-image.jpg new file mode 100644 index 00000000000..a97ed1de3fe Binary files /dev/null and b/src/images/yacht-image.jpg differ diff --git a/src/images/yacht-img.jpg b/src/images/yacht-img.jpg new file mode 100644 index 00000000000..1bdcea9b5f2 Binary files /dev/null and b/src/images/yacht-img.jpg differ diff --git a/src/index.html b/src/index.html index 92da07de4e6..dd5d6b1d179 100755 --- a/src/index.html +++ b/src/index.html @@ -1,15 +1,40 @@ - + - Page title - - + Luxury Yachts + + + + + + + + + -

Example title

- - + + + + + + + + + + + + diff --git a/src/partials/about-us.html b/src/partials/about-us.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/partials/advantages.html b/src/partials/advantages.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/partials/example.html b/src/partials/example.html deleted file mode 100755 index f7f444c97e2..00000000000 --- a/src/partials/example.html +++ /dev/null @@ -1,37 +0,0 @@ -
-

HTML-partials

- - - - -

- The - - posthtml-include - - plugin allows you to add code from other HTML files (fragments) to HTML page - files. Fragments are stored in the src/partials folder. The - addition occurs when compiling page files, such as index.html. -

- -

- This example.html file is an example of such a snippet, with - the markup of a certain part of the main page. This is very convenient for - team development on student projects, when several people write in one HTML - file at once. -

- -

- The syntax for adding a fragment to the main file is: - <include src="./partials/filename.html"></include> -

- -
-
diff --git a/src/partials/footer.html b/src/partials/footer.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/partials/header.html b/src/partials/header.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/partials/hero.html b/src/partials/hero.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/partials/our-yachts.html b/src/partials/our-yachts.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/partials/rent-a-yacht.html b/src/partials/rent-a-yacht.html new file mode 100644 index 00000000000..7b11ac89aef --- /dev/null +++ b/src/partials/rent-a-yacht.html @@ -0,0 +1,39 @@ + + +
+
+
+

Rent a yacht now

+
+ + + + + +
+
+ Yacht image +
+
diff --git a/src/partials/reviews.html b/src/partials/reviews.html new file mode 100644 index 00000000000..7c1b55e3786 --- /dev/null +++ b/src/partials/reviews.html @@ -0,0 +1,66 @@ + + +
+
+

+ YachtJet take pride in providing the best possible service and experience + to our customers +

+

+ Our customers have enjoyed unforgettable moments on our yachts. Don't just + take our word for it - read on to find out what they have to say about + their journey with us. +

+ +
+
diff --git a/src/sass/_common.scss b/src/sass/_common.scss deleted file mode 100755 index dd493e4bc7f..00000000000 --- a/src/sass/_common.scss +++ /dev/null @@ -1 +0,0 @@ -@import '~node_modules/modern-normalize/modern-normalize.css'; diff --git a/src/sass/_example.scss b/src/sass/_example.scss deleted file mode 100755 index 05c89b464f5..00000000000 --- a/src/sass/_example.scss +++ /dev/null @@ -1,28 +0,0 @@ -.example { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - line-height: 1.5; - background-color: #fff; - color: #2f2f37; - max-width: 960px; - padding: 16px; -} - -.example code { - font-family: monospace; - font-size: 16px; - font-weight: 700; - background-color: #ff6b0a; - color: #fff; - padding: 2px 6px; - border-radius: 2px; -} - -.example .background { - height: 240px; - // ❗️❗️❗️ The path to images from a SASS file - // is always the same as from the css folder. - background-image: url('../images/logo.png'); - background-size: cover; - background-position: center; -} diff --git a/src/sass/index.scss b/src/sass/index.scss deleted file mode 100755 index 8d1a014a6b5..00000000000 --- a/src/sass/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './common'; -@import './example';