From 91bf9e3183c73463b4e0feec504e4e227b1f3a58 Mon Sep 17 00:00:00 2001 From: Dm1tr1y147 Date: Sat, 6 Oct 2018 19:50:45 +0500 Subject: [PATCH] Initial commit --- arrow.svg | 24 ++++++ circle.svg | 25 ++++++ house.ico | Bin 0 -> 4843 bytes house.svg | 30 +++++++ index.html | 92 +++++++++++++++++++++ main.css | 225 +++++++++++++++++++++++++++++++++++++++++++++++++++ main.js | 15 ++++ square.svg | 40 +++++++++ triangle.svg | 40 +++++++++ 9 files changed, 491 insertions(+) create mode 100644 arrow.svg create mode 100644 circle.svg create mode 100644 house.ico create mode 100644 house.svg create mode 100644 index.html create mode 100644 main.css create mode 100644 main.js create mode 100644 square.svg create mode 100644 triangle.svg diff --git a/arrow.svg b/arrow.svg new file mode 100644 index 0000000..79c6a24 --- /dev/null +++ b/arrow.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/circle.svg b/circle.svg new file mode 100644 index 0000000..5320c63 --- /dev/null +++ b/circle.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/house.ico b/house.ico new file mode 100644 index 0000000000000000000000000000000000000000..d2c6493d149eeecc3cd32e17986d6cacf17cbbf1 GIT binary patch literal 4843 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..58a883d --- /dev/null +++ b/index.html @@ -0,0 +1,92 @@ + + + + + Not free houses, be ready to buy! + + + + + +

+
+

Hello, do you wanna have your own flat?

+

We know, you do. You're lucky, because here we can sell you the house of your dreams

+ scroll down to see more +
+
+
+

Are you ready?

+

Hello. Nice to see you here. Most likely, you live with your parents or rent a small flat in underbelly. It's time to change it. Have you ever dreamed to have your own large, spacious apartment in the center of your city? We can help you to realize your dream. Just look at our catalog and find your best place for living. We have the best price-quality ratio for every budget. After you chose, just call one of our operators and we will we will start processing of all documents.

+
+
+

New Year — New Discounts

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

We have been opened

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
    +
  • + +

    Lite

    +

    $30000

    +
      +
    • Little flat
      • +
    • Necessary amenities
      • +
    +
    • +
  • + +

    Medium

    +

    $500000

    +
      +
    • Nice houce
      • +
    • Garage
      • +
    • Little garden
      • +
    +
    • +
  • + +

    Prime

    +

    $1000000

    +
      +
    • Big cottage
      • +
    • Two grounds
      • +
    • Jacuzzi
      • +
    • Two garages
      • +
    +
    • +
+
+
+ + + + + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..d6d8431 --- /dev/null +++ b/main.css @@ -0,0 +1,225 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + color: #415a6b; + font-family: 'Lato', sans-serif; + font-size: 3vmin; + transition: all .5s ease; +} +*::-webkit-scrollbar { + display: none; +} +nav ul { + display: flex; + align-items: center; + padding: 0 4vh; + position: fixed; + top: 2vh; + left: 2vh; + height: 8vh; + background-color: #8ad7f8; + z-index: 1000; + border-radius: 200em; + max-width: calc(100vw - 4vh); +} +li { + list-style-type: none; +} +nav li { + padding: 2vh; +} +a { + text-decoration: none; +} +button { + background-color: transparent; + border: none; +} +#logo img { + height: 6vh; +} +header { + background-color: #8ad7f8; + height: 100vh; + padding-top: 10vh; + display: flex; + align-items: center; + background-size: auto 80vh; + background-position: right 7.5vh bottom; + background-repeat: no-repeat; + background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8cmVjdCB4PSIzODIuOTMzIiB5PSI3My42IiBzdHlsZT0iZmlsbDojRjA1NTQwOyIgd2lkdGg9IjU4LjY2NyIgaGVpZ2h0PSIxMDIuNCIvPgo8cmVjdCB4PSIzNjAuNTMzIiB5PSIyMS4zMzMiIHN0eWxlPSJmaWxsOiNGMzcwNUE7IiB3aWR0aD0iMTAzLjQ2NyIgaGVpZ2h0PSI1NS40NjciLz4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGRDE1QzsiIGQ9Ik00NC44LDI3Ni4yNjdWNTEyaDQxOC4xMzNWMjc2LjI2N2MtODIuMTMzLTgyLjEzMy0xMjgtMTI4LTIwOS4wNjctMjA5LjA2N2wwLDAgIEMxNzIuOCwxNDkuMzMzLDEyNi45MzMsMTk1LjIsNDQuOCwyNzYuMjY3eiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojRjdCNjRDOyIgZD0iTTQ2NCwyNzYuMjY3Yy04Mi4xMzMtODIuMTMzLTEyOC0xMjgtMjA5LjA2Ny0yMDkuMDY3Yy00MS42LDQwLjUzMy03My42LDcyLjUzMy0xMDUuNiwxMDQuNTMzICBzLTY0LDY0LTEwNC41MzMsMTA0LjUzM3Y0OGM4Mi4xMzMtODIuMTMzLDEyOC0xMjgsMjA5LjA2Ny0yMDkuMDY3YzgyLjEzMyw4Mi4xMzMsMTI4LDEyOCwyMDkuMDY3LDIwOS4wNjd2Ni40bDAsMHYtNTQuNEg0NjR6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiM0MTVBNkI7IiBkPSJNMjE2LjUzMyw1MTJIOTAuNjY3VjM4OC4yNjdjMC0zNS4yLDI4LjgtNjIuOTMzLDYyLjkzMy02Mi45MzNsMCwwYzM1LjIsMCw2Mi45MzMsMjguOCw2Mi45MzMsNjIuOTMzICBWNTEyeiIvPgo8cmVjdCB4PSIyNTMuODY3IiB5PSIzMjUuMzMzIiBzdHlsZT0iZmlsbDojMzQ0QTVFOyIgd2lkdGg9IjE2NC4yNjciIGhlaWdodD0iMTQ0Ii8+CjxnPgoJPHJlY3QgeD0iMjcwLjkzMyIgeT0iMzQyLjQiIHN0eWxlPSJmaWxsOiM4QUQ3Rjg7IiB3aWR0aD0iNTYuNTMzIiBoZWlnaHQ9IjEwOS44NjciLz4KCTxyZWN0IHg9IjM0NC41MzMiIHk9IjM0Mi40IiBzdHlsZT0iZmlsbDojOEFEN0Y4OyIgd2lkdGg9IjU2LjUzMyIgaGVpZ2h0PSIxMDkuODY3Ii8+CjwvZz4KPHBhdGggc3R5bGU9ImZpbGw6I0YzNzA1QTsiIGQ9Ik01MDIuNCwyMzIuNTMzTDI3OS40NjcsOS42Yy0xMi44LTEyLjgtMzUuMi0xMi44LTQ4LDBMOS42LDIzMi41MzNjLTEyLjgsMTIuOC0xMi44LDM1LjIsMCw0OCAgYzEyLjgsMTIuOCwzNS4yLDEyLjgsNDgsMEwyNTYsODIuMTMzbDE5OC40LDE5OC40YzEyLjgsMTIuOCwzNS4yLDEyLjgsNDgsMEM1MTUuMiwyNjYuNjY3LDUxNS4yLDI0NS4zMzMsNTAyLjQsMjMyLjUzM3oiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==) +} +header div { + width: 75vw; + padding: calc(13vw - 10vh) 18vw 13vw 6vw; +} +h1,h2 { + font-family: 'Concert One', cursive; +} +header h1 { + font-size: 10vmin; +} +header h2 { + font-size: 6vmin; + max-width: 40vw; +} +header img { + position: absolute; + top: 87.5vh; + left: 46.25vw; + height: 7.5vh; + width: 7.5vw; +} + +main { + background-color: #ffd15c; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 10vh; + padding: 10vh; + min-height: 100vh; + align-items: end; +} +article h1 { + font-size: 8vmin; + margin-bottom: 5vh; +} + +#pricing { + grid-column: 1 / span 3; + margin-top: -10vh; + padding-top: 10vh; + min-height: 90vh; +} +#pricing > ul { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 10vh; +} +#pricing > ul > li { + border-radius: 5vh; + background-color: #f7b64c; + min-height: 75vh; + display: grid; + justify-content: center; + align-content: center; + max-width: 50vw; +} +#pricing h2, #pricing img, #pricing h3 { + text-align: center; + padding: 1vh; +} +#pricing h2 { + font-size: 8vmin; +} +#pricing img { + height: 10vh; + margin: 0 auto; +} +#pricing h3 { + font-size: 5vmin; +} +#pricing ul ul { + margin: 1vh; +} +#pricing ul ul li { + list-style-type: circle; + list-style-position: inside; +} + +footer { + background-color: #f3705a; + padding: 10vh; + display: grid; + grid-gap: 1vh; + grid-template-columns: auto auto auto; +} +footer * { + color: #344a5e; +} +@media screen and (max-device-aspect-ratio: 8/5) { + header img { + left: 6vw; + width: auto; + } + footer { + grid-template-columns: 1fr; + } + #pricing > ul { + grid-template-columns: 1fr; + justify-items: center; + } + #pricing > ul > li { + width: 50vw; + } +} +@media screen and (max-device-aspect-ratio: 4/3) { + header div { + width: 100vw; + padding-left: 5vh; + padding-right: 5vh; + } + header h2 { + max-width: 100%; + } + header img { + left: 13vw; + } + main { + grid-template-columns: 1fr; + } + #pricing { + grid-column: 1 / span 1; + } +} +@media screen and (orientation: portrait) { + header img { + left: auto; + right: 13vw; + } + #pricing > ul > li { + width: calc(100vw - 10vh); + max-width: calc(100vw - 10vh); + } + nav ul { + width: calc(100vw - 4vh); + justify-content: space-between; + } + main { + padding: 5vh; + } + footer * { + text-align: center; + } +} +@media screen and (max-device-aspect-ratio: 2/3) { + * { + font-size: 3vmax; + } + nav ul { + flex-direction: column; + } + .opened ul { + height: auto; + border-radius: 5vh; + } + nav li { + padding: 3.5vh; + } + #logo { + padding: 1vh; + height: 8vh !important; + } + nav .link { + display: block; + height: 0; + overflow: hidden; + } + .opened .link { + height: auto; + } + nav a { + font-size: 3vmax; + } +} \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..25626ac --- /dev/null +++ b/main.js @@ -0,0 +1,15 @@ +$(function() { + $('#logo').click(function() { + $('nav').toggleClass('opened') + }); + $(".link").click(function (event) { + event.preventDefault(); + var id = $(this).attr('href'), + top = $(id).offset().top, + time = Math.abs(window.pageYOffset - top) * 2; + if(window.innerHeight > window.innerWidth){ + time = 1500; + } + $('body,html').animate({scrollTop: top}, time); + }); +}); \ No newline at end of file diff --git a/square.svg b/square.svg new file mode 100644 index 0000000..d829132 --- /dev/null +++ b/square.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/triangle.svg b/triangle.svg new file mode 100644 index 0000000..d86cf45 --- /dev/null +++ b/triangle.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +