diff --git a/Claswork b/Claswork new file mode 160000 index 0000000..a614d2d --- /dev/null +++ b/Claswork @@ -0,0 +1 @@ +Subproject commit a614d2d73a582b0ccb26302010a587e8b2d643da diff --git a/Git b/Git deleted file mode 160000 index 9f42651..0000000 --- a/Git +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 9f42651fbdb3dcbd2689613dbe768c941dfce3ca diff --git a/lesson10/css/index.css b/lesson10/css/index.css new file mode 100644 index 0000000..1cc22b5 --- /dev/null +++ b/lesson10/css/index.css @@ -0,0 +1,816 @@ +@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Poppins&family=Roboto&family=Work+Sans:wght@300;400;500;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Aleo&family=Josefin+Sans&family=Poppins&family=Roboto&family=Work+Sans:wght@300;400;500;700&display=swap"); +html { + scroll-behavior: smooth; +} + +body { + font-family: "Josefin Sans", sans-serif; + background-color: silver; +} + +.bhromaon { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + background: url(../images/image.svg); + background-size: cover; + width: 100%; + height: 100vh; +} + +.bhromaon_title { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.bhromaon_title_txt { + font-family: Josefin Sans; + width: 342px; + height: 32px; + font-weight: bold; + font-size: 48px; + line-height: 26px; + text-align: center; + color: white; + letter-spacing: 4.800000190734863px; + margin-bottom: 11px; +} + +.bhromaon_title_text { + width: 345px; + height: 26px; + font-size: 22px; + text-align: center; + color: #ffffff; + margin-bottom: 46px; +} + +.bhromaon_input { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-bottom: 107px; +} + +.bhromaon_input_content { + font-family: Josefin Sans; + font-size: 14px; + line-height: 26px; + letter-spacing: 2.799999952316284px; + text-align: center; + border: none; + width: 656px; + height: 63px; + background: #ffffff; +} + +.bhromaon_input_button { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 153px; + height: 63px; + background: #5474fd; + border: 2px solid #ffffff; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.bhromaon_input_button_btn { + width: 92px; + height: 26px; + font-family: Aleo; + font-size: 14px; + line-height: 26px; + letter-spacing: 1.399999976158142px; + color: #ffffff; +} + +.bhromaon_scroll { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-bottom: 142px; +} + +.bhromaon_scroll_text { + width: 123px; + height: 26px; + font-size: 14px; + line-height: 26px; + letter-spacing: 2.799999952316284px; + text-align: center; + color: #ffffff; +} + +.header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: distribute; + justify-content: space-around; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #5474fd; + height: 83px; +} + +.header_info_bhromaon { + font-family: Josefin Sans; + font-weight: bold; + font-size: 24px; + line-height: 26px; + color: #ffffff; +} + +.header_navigation { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.header_navigation_nav { + font-family: Aleo; + font-size: 14px; + line-height: 26px; + color: #ffffff; + margin-right: 14px; + width: 148px; + height: 26px; + text-transform: uppercase; +} + +.header_navigation_nav:hover { + -webkit-transition: 1s; + transition: 1s; + font-size: 15px; + font-weight: bold; + letter-spacing: 1.4px; + color: #dc143c; + text-shadow: 1px 1px 10px #33060f; +} + +.choose_us { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: url(../images/sect-2-backgrd.svg); + background-size: cover; + width: 100%; + height: 100vh; +} + +.choose_us_content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.choose_us_content_title { + margin-bottom: 50px; + border-radius: nullpx; + width: 288px; + height: 26px; + font-family: Aleo; + font-size: 36px; + line-height: 26px; + color: #ffffff; + text-shadow: 1px 2px 40px #7072e9; +} + +.choose_us_content_txt { + font-family: Josefin Sans; + font-size: 16px; + font-weight: 400; + line-height: 26px; + width: 560px; + letter-spacing: 1.6px; + color: #e8e8e8; + margin-bottom: 45px; +} + +.choose_us_btn { + width: 228px; + height: 63px; + background: #5474fd; +} + +.choose_us_btn:hover { + -webkit-box-shadow: -1px -1px 5px 3px #5474fd; + box-shadow: -1px -1px 5px 3px #5474fd; + -webkit-transition: 2s; + transition: 2s; + width: 228px; + height: 63px; + background: -webkit-gradient(linear, left top, right top, from(#dc143c), color-stop(20%, #ff8c00), color-stop(40%, #ffd700), color-stop(60%, #00fa9a), color-stop(80%, #1e90ff), color-stop(95%, #9370db)); + background: linear-gradient(90deg, #dc143c 0%, #ff8c00 20%, #ffd700 40%, #00fa9a 60%, #1e90ff 80%, #9370db 95%); +} + +.choose_us_btn_txt { + letter-spacing: 1.2px; + height: 26px; + font-family: Aleo; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 26px; + text-align: center; + text-transform: uppercase; + color: #ffffff; +} + +.choose_us_btn_txt:hover { + font-family: Aleo; + font-weight: bold; + font-size: 19px; + letter-spacing: 1.2px; + text-transform: uppercase; + color: black; + -webkit-transition: 2s; + transition: 2s; +} + +.choose_us_images { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 110px; +} + +.choose_us_images_lake { + height: 220px; + width: 350px; + margin-bottom: 10px; +} + +.choose_us_images_lake:hover { + -webkit-box-shadow: -1px -1px 10px 3px #5474fd; + box-shadow: -1px -1px 10px 3px #5474fd; + -webkit-transform: scale(1.07); + transform: scale(1.07); + -webkit-transition-duration: 1s; + transition-duration: 1s; +} + +.choose_us_images_mount { + height: 220px; + width: 350px; + margin-left: 90px; +} + +.choose_us_images_mount:hover { + -webkit-box-shadow: -1px -1px 12px 3px #5474fd; + box-shadow: -1px -1px 12px 3px #5474fd; + -webkit-transform: scale(1.1); + transform: scale(1.1); + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + -webkit-transition: 1s; + transition: 1s; +} + +.my_icons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 338px; + background: #333333; +} + +.my_icons_cntnt { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.my_icons_cntnt_search_img { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 60px; + margin-bottom: 20px; +} + +.my_icons_cntnt_search_img:hover { + -webkit-transform: scale(1.2); + transform: scale(1.2); + -webkit-transition-duration: 1s; + transition-duration: 1s; + -webkit-box-shadow: -1px -1px 22px 1px #5474fd; + box-shadow: -1px -1px 22px 1px #5474fd; +} + +.my_icons_cntnt_txt { + font-family: Aleo; + font-size: 36px; + line-height: 26px; + text-align: center; + width: 242px; + color: #e8e8e8; +} + +.my_icons_cntnt_txt:hover { + -webkit-transition: 1s; + transition: 1s; + text-shadow: 2px 5px 50px #7072e9; +} + +.my_icons_cntnt:nth-child(2) { + margin-right: 143px; + margin-left: 143px; +} + +.my_icons_cntnt:nth-child(2) .my_icons_cntnt_search_img:hover { + -webkit-transform: scale(1.2); + transform: scale(1.2); + -webkit-transition-duration: 1s; + transition-duration: 1s; + -webkit-box-shadow: -1px -1px 12px 3px #f55b50; + box-shadow: -1px -1px 12px 3px #f55b50; +} + +.my_icons_cntnt:nth-child(2) .my_icons_cntnt_txt:hover { + -webkit-transition: 1s; + transition: 1s; + text-shadow: 2px 2px 25px #f55b50; +} + +.villa { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + background: url(../images/rectangle.svg); + background-size: cover; + width: 100%; + height: 100vh; +} + +.villa_container { + -webkit-animation-name: jump-container; + animation-name: jump-container; + -webkit-animation-duration: 2s; + animation-duration: 2s; + width: 543px; + height: 374px; + background: #232323; + mix-blend-mode: normal; + opacity: 0.9; + margin-left: 330px; + margin-bottom: 100px; +} + +.villa_container:hover { + -webkit-box-shadow: -3px -3px 23px 3px #ec9797; + box-shadow: -3px -3px 23px 3px #ec9797; + -webkit-transition: 2s; + transition: 2s; +} + +.villa_container_title { + width: 80px; + height: 26px; + font-family: Josefin Sans; + font-size: 20px; + letter-spacing: 1.5px; + padding-top: 49px; + padding-left: 32px; + padding-bottom: 23px; + text-shadow: 2px -2px 9px #ec9797; + color: #e8e8e8; +} + +.villa_container_spain_madrid { + width: 241px; + height: 26px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 20px; + text-transform: uppercase; + padding-bottom: 14px; + padding-left: 32px; + color: #ffffff; +} + +.villa_container_txt { + width: 508px; + height: 78px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + padding-left: 32px; + padding-bottom: 46px; + color: #e8e8e8; +} + +.villa_container_btn { + margin-left: 32px; + width: 228px; + height: 63px; + background: #5474fd; +} + +.villa_container_btn:hover { + -webkit-box-shadow: -1px -1px 4px 4px white; + box-shadow: -1px -1px 4px 4px white; + -webkit-transition: 2s; + transition: 2s; + font-size: 17px; + background: linear-gradient(135deg, #0000ff 0%, #8080ff 25%, #8cf2e3 50%, #a8ff51 75%, #ffff80 100%); +} + +.villa_container_btn_txt { + font-family: Aleo; + line-height: 26px; + letter-spacing: 1.2px; + text-transform: uppercase; + color: #ffffff; +} + +.villa_container_btn_txt:hover { + font-weight: bold; + color: black; +} + +.senery { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + background: url(../images/secery.svg); + background-size: cover; + width: 100%; + height: 100vh; +} + +.senery_container { + -webkit-animation-name: jump-container; + animation-name: jump-container; + -webkit-animation-duration: 2s; + animation-duration: 2s; + width: 543px; + height: 374px; + background: #232323; + mix-blend-mode: normal; + opacity: 0.9; + margin-right: 330px; + margin-bottom: 100px; +} + +.senery_container:hover { + -webkit-box-shadow: -3px -3px 23px 3px #ec9797; + box-shadow: -3px -3px 23px 3px #ec9797; + -webkit-transition: 2s; + transition: 2s; +} + +.senery_container_title { + width: 80px; + height: 26px; + font-family: Josefin Sans; + font-size: 20px; + letter-spacing: 1.5px; + padding-top: 49px; + padding-left: 32px; + padding-bottom: 23px; + text-shadow: 2px -2px 5px #7072e9; + color: #e8e8e8; +} + +.senery_container_spain_madrid { + width: 241px; + height: 26px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 20px; + text-transform: uppercase; + padding-bottom: 14px; + padding-left: 32px; + color: #ffffff; +} + +.senery_container_txt { + width: 508px; + height: 78px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + padding-left: 32px; + padding-bottom: 46px; + color: #e8e8e8; +} + +.senery_btn { + margin-left: 32px; + width: 228px; + height: 63px; + background: #5474fd; +} + +.senery_btn:hover { + -webkit-box-shadow: -1px -1px 4px 4px white; + box-shadow: -1px -1px 4px 4px white; + -webkit-transition: 2s; + transition: 2s; + font-size: 17px; + background: linear-gradient(135deg, #0000ff 0%, #8080ff 25%, #8cf2e3 50%, #a8ff51 75%, #ffff80 100%); +} + +.senery_btn_txt { + font-family: Aleo; + line-height: 26px; + letter-spacing: 1.2px; + text-transform: uppercase; + color: #ffffff; +} + +.senery_btn_txt:hover { + font-weight: bold; + color: black; +} + +.tourist { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + background: url(../images/Rec.svg); + background-size: cover; + width: 100%; + height: 100vh; +} + +.tourist_title { + height: 26px; + font-family: Aleo; + font-size: 36px; + line-height: 26px; + text-align: center; + color: #ffffff; + text-shadow: 5px -5px 35px #ec9797; + margin-bottom: 91px; +} + +.tourist_title_main_area { + -webkit-animation-name: jump-container; + animation-name: jump-container; + -webkit-animation-duration: 2s; + animation-duration: 2s; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.tourist_title_main_area_human_img:hover { + -webkit-transform: scale(1.1); + transform: scale(1.1); + -webkit-transition-duration: 1s; + transition-duration: 1s; + -webkit-box-shadow: -1px -1px 10px 1px #ec9797; + box-shadow: -1px -1px 10px 1px #ec9797; +} + +.tourist_container { + width: 668px; + height: 287px; + background: #333333; +} + +.tourist_container:hover { + -webkit-box-shadow: -1px -1px 23px 1px #ec9797; + box-shadow: -1px -1px 23px 1px #ec9797; + -webkit-transition: 2s; + transition: 2s; +} + +.tourist_container_header_txt { + margin-top: 49px; + margin-left: 62px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 20px; + line-height: 26px; + text-transform: uppercase; + color: #fefefe; + text-shadow: 2px -1px 4px #ec9797; +} + +.tourist_container_body_txt { + margin-top: 49px; + margin-left: 62px; + width: 581px; + height: 165px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 19px; + letter-spacing: 2.52px; + color: #fefefe; +} + +.end { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + height: 271px; + background: #232323; +} + +.end_title { + width: 193px; + height: 26px; + font-family: Josefin Sans; + font-style: normal; + font-weight: bold; + font-size: 24px; + line-height: 26px; + letter-spacing: 3.36px; + text-transform: uppercase; + color: #ffffff; + text-align: center; + margin-bottom: 9px; +} + +.end_txt { + width: 196px; + height: 26px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 26px; + letter-spacing: 1.6px; + color: #ffffff; + text-align: center; + margin-bottom: 17px; +} + +.end_icons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: auto; +} + +.end_icons_icon { + margin: 0 10px; +} + +@-webkit-keyframes jump-container { + 0% { + opacity: 0; + -webkit-transform: translateY(-40%); + transform: translateY(-40%); + } + 40% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 55% { + -webkit-transform: translateY(-18px); + transform: translateY(-18px); + } + 70% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 85% { + -webkit-transform: translateY(-9px); + transform: translateY(-9px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes jump-container { + 0% { + opacity: 0; + -webkit-transform: translateY(-40%); + transform: translateY(-40%); + } + 40% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 55% { + -webkit-transform: translateY(-18px); + transform: translateY(-18px); + } + 70% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } + 85% { + -webkit-transform: translateY(-9px); + transform: translateY(-9px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/lesson10/css/index.css.map b/lesson10/css/index.css.map new file mode 100644 index 0000000..c2de88b --- /dev/null +++ b/lesson10/css/index.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,OAAO,CAAC,4IAAI;AACZ,OAAO,CAAC,wJAAI;AAEZ,AAAA,IAAI,CAAC;EACJ,eAAe,EAAE,MAAM;CACvB;;AAED,AAAA,IAAI,CAAC;EACJ,WAAW,EAAE,0BAA0B;EACvC,gBAAgB,EAAE,MAAM;CACxB;;AAED,AAAA,SAAS,CAAC;EACT,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EACzB,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,wBAAwB;EACpC,eAAe,EAAE,KAAK;EACtB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;CA6Eb;;AA5EC,AAAD,eAAO,CAAC;EACP,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;CAqBnB;;AApBC,AAAD,mBAAK,CAAC;EACL,WAAW,EAAE,YAAY;EACzB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,KAAK;EACZ,cAAc,EAAE,mBAAmB;EACnC,aAAa,EAAE,IAAI;CACnB;;AACA,AAAD,oBAAM,CAAC;EACN,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;EACd,aAAa,EAAE,IAAI;CACnB;;AAED,AAAD,eAAO,CAAC;EACP,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,aAAa,EAAE,KAAK;CA+BpB;;AA9BC,AAAD,uBAAS,CAAC;EACT,WAAW,EAAE,YAAY;EACzB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,mBAAmB;EACnC,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,OAAO;CACnB;;AACA,AAAD,sBAAQ,CAAC;EACR,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,OAAO;EACnB,MAAM,EAAE,iBAAiB;EACzB,UAAU,EAAE,UAAU;CAUtB;;AATC,AAAD,0BAAK,CAAC;EACL,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,mBAAmB;EACnC,KAAK,EAAE,OAAO;CACd;;AAGF,AAAD,gBAAQ,CAAC;EACR,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,MAAM;EACtB,aAAa,EAAE,KAAK;CAUpB;;AATC,AAAD,qBAAM,CAAC;EACN,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,mBAAmB;EACnC,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;CACd;;AAIH,AAAA,OAAO,CAAC;EACP,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,WAAW,EAAE,MAAM;EACnB,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;CA6BZ;;AA5BC,AAAD,qBAAe,CAAC;EACf,WAAW,EAAE,YAAY;EACzB,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,OAAO;CACd;;AACA,AAAD,kBAAY,CAAC;EACZ,OAAO,EAAE,IAAI;CAmBb;;AAlBC,AAAD,sBAAK,CAAC;EACL,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,OAAO;EACd,YAAY,EAAE,IAAI;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,cAAc,EAAE,SAAS;CASzB;;AAjBA,AASA,sBATI,AASH,MAAM,CAAC;EACP,UAAU,EAAE,EAAE;EACd,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,KAAK;EACrB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,oBAAoB;CACjC;;AAKJ,AAAA,UAAU,CAAC;EACV,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,iCAAiC;EAC7C,eAAe,EAAE,KAAK;EACtB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;CA6Fb;;AA5FC,AAAD,kBAAS,CAAC;EACT,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;CAsBtB;;AArBC,AAAD,wBAAO,CAAC;EACP,aAAa,EAAE,IAAI;EACnB,aAAa,EAAE,MAAM;EACrB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,OAAkB;CAC5C;;AACA,AAAD,sBAAK,CAAC;EACL,WAAW,EAAE,YAAY;EACzB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;EACZ,cAAc,EAAE,KAAK;EACrB,KAAK,EAAE,OAAO;EACd,aAAa,EAAE,IAAI;CACnB;;AAED,AAAD,cAAK,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,OAAO;CAqCnB;;AAxCA,AAIA,cAJI,AAIH,MAAM,CAAC;EACP,UAAU,EAAE,yBAAyB;EACrC,UAAU,EAAE,EAAE;EACd,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,mGAQX;CACD;;AACA,AAAD,kBAAK,CAAC;EACL,cAAc,EAAE,KAAK;EACrB,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,MAAM;EAClB,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;CAUd;;AApBA,AAWA,kBAXI,AAWH,MAAM,CAAC;EACP,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,KAAK;EACrB,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,EAAE;CACd;;AAGF,AAAD,iBAAQ,CAAC;EACR,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,KAAK;CAsBlB;;AArBC,AAAD,sBAAM,CAAC;EACN,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,IAAI;CAMnB;;AATA,AAIA,sBAJK,AAIJ,MAAM,CAAC;EACP,UAAU,EAAE,0BAA0B;EACtC,SAAS,EAAE,WAAW;EACtB,mBAAmB,EAAE,EAAE;CACvB;;AAED,AAAD,uBAAO,CAAC;EACP,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,IAAI;CAOjB;;AAVA,AAIA,uBAJM,AAIL,MAAM,CAAC;EACP,UAAU,EAAE,0BAA0B;EACtC,SAAS,EAAE,UAAU;EACrB,SAAS,EAAE,WAAW;EACtB,UAAU,EAAE,EAAE;CACd;;AAKJ,AAAA,SAAS,CAAC;EACT,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,OAAO;CA8CnB;;AA7CC,AAAD,eAAO,CAAC;EACP,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,MAAM;CAyCtB;;AAxCC,AAAD,0BAAY,CAAC;EACZ,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;CAMnB;;AATA,AAIA,0BAJW,AAIV,MAAM,CAAC;EACP,SAAS,EAAE,UAAU;EACrB,mBAAmB,EAAE,EAAE;EACvB,UAAU,EAAE,0BAA0B;CACtC;;AAED,AAAD,mBAAK,CAAC;EACL,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,OAAO;CAMd;;AAZA,AAQA,mBARI,AAQH,MAAM,CAAC;EACP,UAAU,EAAE,EAAE;EACd,WAAW,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,OAAkB;CAC5C;;AAzBF,AA2BA,eA3BM,AA2BL,UAAW,CAAA,CAAC,EAAE;EACd,YAAY,EAAE,KAAK;EACnB,WAAW,EAAE,KAAK;CAclB;;AA3CD,AA+BE,eA/BI,AA2BL,UAAW,CAAA,CAAC,EAGZ,0BAA0B,AACxB,MAAM,CAAC;EACP,SAAS,EAAE,UAAU;EACrB,mBAAmB,EAAE,EAAE;EACvB,UAAU,EAAE,0BAA0B;CACtC;;AAnCH,AAsCE,eAtCI,AA2BL,UAAW,CAAA,CAAC,EAUZ,mBAAmB,AACjB,MAAM,CAAC;EACP,UAAU,EAAE,EAAE;EACd,WAAW,EAAE,oBAAoB;CACjC;;AAML,AAAA,MAAM,CAAC;EACN,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,QAAQ;EACrB,UAAU,EAAE,4BAA4B;EACxC,eAAe,EAAE,KAAK;EACtB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;CAiFb;;AAhFC,AAAD,gBAAW,CAAC;EACX,cAAc,EAAE,cAAc;EAC9B,kBAAkB,EAAE,EAAE;EACtB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,OAAO;EACnB,cAAc,EAAE,MAAM;EACtB,OAAO,EAAE,GAAG;EACZ,WAAW,EAAE,KAAK;EAClB,aAAa,EAAE,KAAK;CAsEpB;;AA/EA,AAUA,gBAVU,AAUT,MAAM,CAAC;EACP,UAAU,EAAE,0BAA0B;EACtC,UAAU,EAAE,EAAE;CACd;;AACA,AAAD,sBAAO,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,YAAY;EACzB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,KAAK;EACrB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,cAAc,EAAE,IAAI;EACpB,WAAW,EAAE,oBAAoB;EACjC,KAAK,EAAE,OAAO;CACd;;AACA,AAAD,6BAAc,CAAC;EACd,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,YAAY;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,SAAS;EACzB,cAAc,EAAE,IAAI;EACpB,YAAY,EAAE,IAAI;EAClB,KAAK,EAAE,OAAO;CACd;;AACA,AAAD,oBAAK,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,YAAY;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,YAAY,EAAE,IAAI;EAClB,cAAc,EAAE,IAAI;EACpB,KAAK,EAAE,OAAO;CACd;;AACA,AAAD,oBAAK,CAAC;EACL,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,OAAO;CAyBnB;;AA7BA,AAKA,oBALI,AAKH,MAAM,CAAC;EACP,UAAU,EAAE,uBAAuB;EACnC,UAAU,EAAE,EAAE;EACd,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,wFAOX;CACD;;AACA,AAAD,wBAAK,CAAC;EACL,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,KAAK;EACrB,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;CAKd;;AAVA,AAMA,wBANI,AAMH,MAAM,CAAC;EACP,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;CACZ;;AAML,AAAA,OAAO,CAAC;EACP,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EACzB,WAAW,EAAE,QAAQ;EACrB,UAAU,EAAE,yBAAyB;EACrC,eAAe,EAAE,KAAK;EACtB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;CAiFb;;AAhFC,AAAD,iBAAW,CAAC;EACX,cAAc,EAAE,cAAc;EAC9B,kBAAkB,EAAE,EAAE;EACtB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,OAAO;EACnB,cAAc,EAAE,MAAM;EACtB,OAAO,EAAE,GAAG;EACZ,YAAY,EAAE,KAAK;EACnB,aAAa,EAAE,KAAK;CAwCpB;;AAjDA,AAUA,iBAVU,AAUT,MAAM,CAAC;EACP,UAAU,EAAE,0BAA0B;EACtC,UAAU,EAAE,EAAE;CACd;;AACA,AAAD,uBAAO,CAAC;EACP,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,YAAY;EACzB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,KAAK;EACrB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,cAAc,EAAE,IAAI;EACpB,WAAW,EAAE,GAAG,CAAE,IAAG,CAAC,GAAG,CAAC,OAAkB;EAC5C,KAAK,EAAE,OAAO;CACd;;AACA,AAAD,8BAAc,CAAC;EACd,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,YAAY;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,SAAS;EACzB,cAAc,EAAE,IAAI;EACpB,YAAY,EAAE,IAAI;EAClB,KAAK,EAAE,OAAO;CACd;;AACA,AAAD,qBAAK,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,YAAY;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,YAAY,EAAE,IAAI;EAClB,cAAc,EAAE,IAAI;EACpB,KAAK,EAAE,OAAO;CACd;;AAED,AAAD,WAAK,CAAC;EACL,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,OAAO;CAyBnB;;AA7BA,AAKA,WALI,AAKH,MAAM,CAAC;EACP,UAAU,EAAE,uBAAuB;EACnC,UAAU,EAAE,EAAE;EACd,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,wFAOX;CACD;;AACA,AAAD,eAAK,CAAC;EACL,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,KAAK;EACrB,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;CAKd;;AAVA,AAMA,eANI,AAMH,MAAM,CAAC;EACP,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;CACZ;;AAKJ,AAAA,QAAQ,CAAC;EACR,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,sBAAsB;EAClC,eAAe,EAAE,KAAK;EACtB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;CA0Db;;AAzDC,AAAD,cAAO,CAAC;EACP,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,qBAAqB;EAClC,aAAa,EAAE,IAAI;CAcnB;;AAbC,AAAD,wBAAW,CAAC;EACX,cAAc,EAAE,cAAc;EAC9B,kBAAkB,EAAE,EAAE;EACtB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;CAQvB;;AAPC,AACA,kCADU,AACT,MAAM,CAAC;EACP,SAAS,EAAE,UAAU;EACrB,mBAAmB,EAAE,EAAE;EACvB,UAAU,EAAE,0BAA0B;CACtC;;AAIH,AAAD,kBAAW,CAAC;EACX,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,OAAO;CA8BnB;;AAjCA,AAIA,kBAJU,AAIT,MAAM,CAAC;EACP,UAAU,EAAE,0BAA0B;EACtC,UAAU,EAAE,EAAE;CACd;;AACA,AAAD,6BAAY,CAAC;EACZ,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,YAAY;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,oBAAoB;CACjC;;AACA,AAAD,2BAAU,CAAC;EACV,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,WAAW,EAAE,YAAY;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,MAAM;EACtB,KAAK,EAAE,OAAO;CACd;;AAIH,AAAA,IAAI,CAAC;EACJ,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,MAAM;EACtB,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,OAAO;CAoCnB;;AAnCC,AAAD,UAAO,CAAC;EACP,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,YAAY;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,IAAI;EACjB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,MAAM;EACtB,cAAc,EAAE,SAAS;EACzB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,GAAG;CAClB;;AACA,AAAD,QAAK,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,YAAY;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,KAAK;EACrB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,IAAI;CACnB;;AACA,AAAD,UAAO,CAAC;EACP,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,KAAK,EAAE,IAAI;CAIX;;AAHC,AAAD,eAAM,CAAC;EACN,MAAM,EAAE,MAAM;CACd;;AAIH,UAAU,CAAV,cAAU;EACT,EAAE;IACD,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,gBAAgB;;EAG5B,GAAG;IACF,SAAS,EAAE,aAAa;;EAGzB,GAAG;IACF,SAAS,EAAE,iBAAiB;;EAG7B,GAAG;IACF,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,aAAa;;EAGzB,GAAG;IACF,SAAS,EAAE,gBAAgB;;EAG5B,IAAI;IACH,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,aAAa", + "sources": [ + "index.scss" + ], + "names": [], + "file": "index.css" +} \ No newline at end of file diff --git a/lesson10/css/index.scss b/lesson10/css/index.scss new file mode 100644 index 0000000..e8a378c --- /dev/null +++ b/lesson10/css/index.scss @@ -0,0 +1,607 @@ +@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Poppins&family=Roboto&family=Work+Sans:wght@300;400;500;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Aleo&family=Josefin+Sans&family=Poppins&family=Roboto&family=Work+Sans:wght@300;400;500;700&display=swap"); + +html { + scroll-behavior: smooth; +} + +body { + font-family: "Josefin Sans", sans-serif; + background-color: silver; +} + +.bhromaon { + display: flex; + justify-content: flex-end; + flex-direction: column; + background: url(../images/image.svg); + background-size: cover; + width: 100%; + height: 100vh; + &_title { + display: flex; + flex-direction: column; + align-items: center; + &_txt { + font-family: Josefin Sans; + width: 342px; + height: 32px; + font-weight: bold; + font-size: 48px; + line-height: 26px; + text-align: center; + color: white; + letter-spacing: 4.800000190734863px; + margin-bottom: 11px; + } + &_text { + width: 345px; + height: 26px; + font-size: 22px; + text-align: center; + color: #ffffff; + margin-bottom: 46px; + } + } + &_input { + display: flex; + justify-content: center; + margin-bottom: 107px; + &_content { + font-family: Josefin Sans; + font-size: 14px; + line-height: 26px; + letter-spacing: 2.799999952316284px; + text-align: center; + border: none; + width: 656px; + height: 63px; + background: #ffffff; + } + &_button { + display: flex; + justify-content: center; + align-items: center; + width: 153px; + height: 63px; + background: #5474fd; + border: 2px solid #ffffff; + box-sizing: border-box; + &_btn { + width: 92px; + height: 26px; + font-family: Aleo; + font-size: 14px; + line-height: 26px; + letter-spacing: 1.399999976158142px; + color: #ffffff; + } + } + } + &_scroll { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-bottom: 142px; + &_text { + width: 123px; + height: 26px; + font-size: 14px; + line-height: 26px; + letter-spacing: 2.799999952316284px; + text-align: center; + color: #ffffff; + } + } +} + +.header { + display: flex; + justify-content: space-around; + align-items: center; + background-color: #5474fd; + height: 83px; + &_info_bhromaon { + font-family: Josefin Sans; + font-weight: bold; + font-size: 24px; + line-height: 26px; + color: #ffffff; + } + &_navigation { + display: flex; + &_nav { + font-family: Aleo; + font-size: 14px; + line-height: 26px; + color: #ffffff; + margin-right: 14px; + width: 148px; + height: 26px; + text-transform: uppercase; + &:hover { + transition: 1s; + font-size: 15px; + font-weight: bold; + letter-spacing: 1.4px; + color: #dc143c; + text-shadow: 1px 1px 10px #33060f; + } + } + } +} + +.choose_us { + display: flex; + justify-content: center; + align-items: center; + background: url(../images/sect-2-backgrd.svg); + background-size: cover; + width: 100%; + height: 100vh; + &_content { + display: flex; + flex-direction: column; + &_title { + margin-bottom: 50px; + border-radius: nullpx; + width: 288px; + height: 26px; + font-family: Aleo; + font-size: 36px; + line-height: 26px; + color: #ffffff; + text-shadow: 1px 2px 40px rgb(112, 114, 233); + } + &_txt { + font-family: Josefin Sans; + font-size: 16px; + font-weight: 400; + line-height: 26px; + width: 560px; + letter-spacing: 1.6px; + color: #e8e8e8; + margin-bottom: 45px; + } + } + &_btn { + width: 228px; + height: 63px; + background: #5474fd; + &:hover { + box-shadow: -1px -1px 5px 3px #5474fd; + transition: 2s; + width: 228px; + height: 63px; + background: linear-gradient( + 90deg, + #dc143c 0%, + #ff8c00 20%, + #ffd700 40%, + #00fa9a 60%, + #1e90ff 80%, + #9370db 95% + ); + } + &_txt { + letter-spacing: 1.2px; + height: 26px; + font-family: Aleo; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 26px; + text-align: center; + text-transform: uppercase; + color: #ffffff; + &:hover { + font-family: Aleo; + font-weight: bold; + font-size: 19px; + letter-spacing: 1.2px; + text-transform: uppercase; + color: black; + transition: 2s; + } + } + } + &_images { + display: flex; + flex-direction: column; + margin-left: 110px; + &_lake { + height: 220px; + width: 350px; + margin-bottom: 10px; + &:hover { + box-shadow: -1px -1px 10px 3px #5474fd; + transform: scale(1.07); + transition-duration: 1s; + } + } + &_mount { + height: 220px; + width: 350px; + margin-left: 90px; + &:hover { + box-shadow: -1px -1px 12px 3px #5474fd; + transform: scale(1.1); + transform: skew(-2deg); + transition: 1s; + } + } + } +} + +.my_icons { + display: flex; + justify-content: center; + align-items: center; + height: 338px; + background: #333333; + &_cntnt { + display: flex; + align-items: center; + flex-direction: column; + &_search_img { + display: flex; + width: 60px; + margin-bottom: 20px; + &:hover { + transform: scale(1.2); + transition-duration: 1s; + box-shadow: -1px -1px 22px 1px #5474fd; + } + } + &_txt { + font-family: Aleo; + font-size: 36px; + line-height: 26px; + text-align: center; + width: 242px; + color: #e8e8e8; + + &:hover { + transition: 1s; + text-shadow: 2px 5px 50px rgb(112, 114, 233); + } + } + &:nth-child(2) { + margin-right: 143px; + margin-left: 143px; + .my_icons_cntnt_search_img { + &:hover { + transform: scale(1.2); + transition-duration: 1s; + box-shadow: -1px -1px 12px 3px #f55b50; + } + } + .my_icons_cntnt_txt { + &:hover { + transition: 1s; + text-shadow: 2px 2px 25px #f55b50; + } + } + } + } +} + +.villa { + display: flex; + align-items: flex-end; + background: url(../images/rectangle.svg); + background-size: cover; + width: 100%; + height: 100vh; + &_container { + animation-name: jump-container; + animation-duration: 2s; + width: 543px; + height: 374px; + background: #232323; + mix-blend-mode: normal; + opacity: 0.9; + margin-left: 330px; + margin-bottom: 100px; + &:hover { + box-shadow: -3px -3px 23px 3px #ec9797; + transition: 2s; + } + &_title { + width: 80px; + height: 26px; + font-family: Josefin Sans; + font-size: 20px; + letter-spacing: 1.5px; + padding-top: 49px; + padding-left: 32px; + padding-bottom: 23px; + text-shadow: 2px -2px 9px #ec9797; + color: #e8e8e8; + } + &_spain_madrid { + width: 241px; + height: 26px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 20px; + text-transform: uppercase; + padding-bottom: 14px; + padding-left: 32px; + color: #ffffff; + } + &_txt { + width: 508px; + height: 78px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + padding-left: 32px; + padding-bottom: 46px; + color: #e8e8e8; + } + &_btn { + margin-left: 32px; + width: 228px; + height: 63px; + background: #5474fd; + &:hover { + box-shadow: -1px -1px 4px 4px white; + transition: 2s; + font-size: 17px; + background: linear-gradient( + 135deg, + #0000ff 0%, + #8080ff 25%, + #8cf2e3 50%, + #a8ff51 75%, + #ffff80 100% + ); + } + &_txt { + font-family: Aleo; + line-height: 26px; + letter-spacing: 1.2px; + text-transform: uppercase; + color: #ffffff; + &:hover { + font-weight: bold; + color: black; + } + } + } + } +} + +.senery { + display: flex; + justify-content: flex-end; + align-items: flex-end; + background: url(../images/secery.svg); + background-size: cover; + width: 100%; + height: 100vh; + &_container { + animation-name: jump-container; + animation-duration: 2s; + width: 543px; + height: 374px; + background: #232323; + mix-blend-mode: normal; + opacity: 0.9; + margin-right: 330px; + margin-bottom: 100px; + &:hover { + box-shadow: -3px -3px 23px 3px #ec9797; + transition: 2s; + } + &_title { + width: 80px; + height: 26px; + font-family: Josefin Sans; + font-size: 20px; + letter-spacing: 1.5px; + padding-top: 49px; + padding-left: 32px; + padding-bottom: 23px; + text-shadow: 2px -2px 5px rgb(112, 114, 233); + color: #e8e8e8; + } + &_spain_madrid { + width: 241px; + height: 26px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 20px; + text-transform: uppercase; + padding-bottom: 14px; + padding-left: 32px; + color: #ffffff; + } + &_txt { + width: 508px; + height: 78px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + padding-left: 32px; + padding-bottom: 46px; + color: #e8e8e8; + } + } + &_btn { + margin-left: 32px; + width: 228px; + height: 63px; + background: #5474fd; + &:hover { + box-shadow: -1px -1px 4px 4px white; + transition: 2s; + font-size: 17px; + background: linear-gradient( + 135deg, + #0000ff 0%, + #8080ff 25%, + #8cf2e3 50%, + #a8ff51 75%, + #ffff80 100% + ); + } + &_txt { + font-family: Aleo; + line-height: 26px; + letter-spacing: 1.2px; + text-transform: uppercase; + color: #ffffff; + &:hover { + font-weight: bold; + color: black; + } + } + } +} + +.tourist { + display: flex; + justify-content: center; + flex-direction: column; + background: url(../images/Rec.svg); + background-size: cover; + width: 100%; + height: 100vh; + &_title { + height: 26px; + font-family: Aleo; + font-size: 36px; + line-height: 26px; + text-align: center; + color: #ffffff; + text-shadow: 5px -5px 35px #ec9797; + margin-bottom: 91px; + &_main_area { + animation-name: jump-container; + animation-duration: 2s; + display: flex; + justify-content: center; + &_human_img { + &:hover { + transform: scale(1.1); + transition-duration: 1s; + box-shadow: -1px -1px 10px 1px #ec9797; + } + } + } + } + &_container { + width: 668px; + height: 287px; + background: #333333; + &:hover { + box-shadow: -1px -1px 23px 1px #ec9797; + transition: 2s; + } + &_header_txt { + margin-top: 49px; + margin-left: 62px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 20px; + line-height: 26px; + text-transform: uppercase; + color: #fefefe; + text-shadow: 2px -1px 4px #ec9797; + } + &_body_txt { + margin-top: 49px; + margin-left: 62px; + width: 581px; + height: 165px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 19px; + letter-spacing: 2.52px; + color: #fefefe; + } + } +} + +.end { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 271px; + background: #232323; + &_title { + width: 193px; + height: 26px; + font-family: Josefin Sans; + font-style: normal; + font-weight: bold; + font-size: 24px; + line-height: 26px; + letter-spacing: 3.36px; + text-transform: uppercase; + color: #ffffff; + text-align: center; + margin-bottom: 9px; + } + &_txt { + width: 196px; + height: 26px; + font-family: Josefin Sans; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 26px; + letter-spacing: 1.6px; + color: #ffffff; + text-align: center; + margin-bottom: 17px; + } + &_icons { + display: flex; + justify-content: center; + width: auto; + &_icon { + margin: 0 10px; + } + } +} + +@keyframes jump-container { + 0% { + opacity: 0; + transform: translateY(-40%); + } + + 40% { + transform: translateY(0); + } + + 55% { + transform: translateY(-18px); + } + + 70% { + opacity: 1; + transform: translateY(0); + } + + 85% { + transform: translateY(-9px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} diff --git a/lesson10/images/12.svg b/lesson10/images/12.svg new file mode 100644 index 0000000..360fdd0 --- /dev/null +++ b/lesson10/images/12.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/Figma2.0.html b/lesson10/images/Figma2.0.html new file mode 100644 index 0000000..a05a9bf --- /dev/null +++ b/lesson10/images/Figma2.0.html @@ -0,0 +1,53 @@ + + + + + + + + Figma2.0 + + +
+

BHROMAON

+
+ + + + \ No newline at end of file diff --git a/lesson10/images/Figma2.0_files/index.css b/lesson10/images/Figma2.0_files/index.css new file mode 100644 index 0000000..d85be9f --- /dev/null +++ b/lesson10/images/Figma2.0_files/index.css @@ -0,0 +1,19 @@ +@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Poppins&family=Roboto&family=Work+Sans:wght@300;400;500;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Aleo&family=Josefin+Sans&family=Poppins&family=Roboto&family=Work+Sans:wght@300;400;500;700&display=swap"); + +body { + font-family: "Josefin Sans", sans-serif; + background-color: silver; +} + +.bhromaon { + /* background: url(../images/image.svg); */ +} + +.bhromaon-title { + font-weight: bold; + font-size: 48px; + line-height: 26px; + text-align: center; + color: white; +} diff --git a/lesson10/images/Figma2.0_files/reset.css b/lesson10/images/Figma2.0_files/reset.css new file mode 100644 index 0000000..bb37c81 --- /dev/null +++ b/lesson10/images/Figma2.0_files/reset.css @@ -0,0 +1,18 @@ +*, +*::before, +*::after { + box-sizing: inherit; +} + +* { + margin: 0; + padding: 0; + + outline: none; +} + +button { + background-color: transparent; + border: none; + cursor: pointer; +} diff --git a/lesson10/images/Rec.svg b/lesson10/images/Rec.svg new file mode 100644 index 0000000..827a387 --- /dev/null +++ b/lesson10/images/Rec.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson10/images/check.svg b/lesson10/images/check.svg new file mode 100644 index 0000000..60edaa9 --- /dev/null +++ b/lesson10/images/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/human.svg b/lesson10/images/human.svg new file mode 100644 index 0000000..0d57d67 --- /dev/null +++ b/lesson10/images/human.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson10/images/ic1.svg b/lesson10/images/ic1.svg new file mode 100644 index 0000000..ec824cc --- /dev/null +++ b/lesson10/images/ic1.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/ic2.svg b/lesson10/images/ic2.svg new file mode 100644 index 0000000..c581933 --- /dev/null +++ b/lesson10/images/ic2.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/ic3.svg b/lesson10/images/ic3.svg new file mode 100644 index 0000000..d6c003c --- /dev/null +++ b/lesson10/images/ic3.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/ic4.svg b/lesson10/images/ic4.svg new file mode 100644 index 0000000..665d6a8 --- /dev/null +++ b/lesson10/images/ic4.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/ic5.svg b/lesson10/images/ic5.svg new file mode 100644 index 0000000..e913bfd --- /dev/null +++ b/lesson10/images/ic5.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/image.svg b/lesson10/images/image.svg new file mode 100644 index 0000000..6c4037a --- /dev/null +++ b/lesson10/images/image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson10/images/like.svg b/lesson10/images/like.svg new file mode 100644 index 0000000..85aa398 --- /dev/null +++ b/lesson10/images/like.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/rectangle.svg b/lesson10/images/rectangle.svg new file mode 100644 index 0000000..1cf0baa --- /dev/null +++ b/lesson10/images/rectangle.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson10/images/search.svg b/lesson10/images/search.svg new file mode 100644 index 0000000..fe810c6 --- /dev/null +++ b/lesson10/images/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/images/secery.svg b/lesson10/images/secery.svg new file mode 100644 index 0000000..c807333 --- /dev/null +++ b/lesson10/images/secery.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson10/images/sect-2-backgrd.svg b/lesson10/images/sect-2-backgrd.svg new file mode 100644 index 0000000..e74981b --- /dev/null +++ b/lesson10/images/sect-2-backgrd.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson10/images/sect-2-lake.svg b/lesson10/images/sect-2-lake.svg new file mode 100644 index 0000000..4b448ac --- /dev/null +++ b/lesson10/images/sect-2-lake.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson10/images/sect-2-mont.svg b/lesson10/images/sect-2-mont.svg new file mode 100644 index 0000000..a2b5dcc --- /dev/null +++ b/lesson10/images/sect-2-mont.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson10/images/shape.svg b/lesson10/images/shape.svg new file mode 100644 index 0000000..79ed36c --- /dev/null +++ b/lesson10/images/shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson10/index.html b/lesson10/index.html new file mode 100644 index 0000000..da15319 --- /dev/null +++ b/lesson10/index.html @@ -0,0 +1,167 @@ + + + + + + + + Figma2.0 + + +
+
+

BHROMAON

+

Safe Travel Anywhere

+
+ +
+ + + +
+ + +

Scroll Down

+ s + + +
+

BHROMAON

+
+

Who We Are

+

What We Do

+

Travel With Us

+ Contact Us +
+
+
+ +
+
+

Why Choose Us

+

+ Tion and dislike men who are so beguiled and demoralized by desire by + the charms of pleasure of the moment, so blinded by desire, that they + cannot foresee. +

+

+ Ddislike men who are so beguiled and demoralized by the charms of + pleasure of the moment, so blinded by desire, that. +

+ + +
+
+
+ lake +
+
+ mount +
+
+
+ +
+
+ search +

Search Places

+
+ +
+ check +

Select Places

+
+ +
+ like +

Book & Enjoy

+
+
+ +
+
+

Spain

+

Grand Spain Madrid

+

+ But I must explain to you how all this mistaken idea of account to + denouncing pleasure and praising pain was account born and I account + will give you a complete account of the system +

+ +
+
+ +
+
+

Spain

+

Grand Spain Madrid

+

+ But I must explain to you how all this mistaken idea of account to + denouncing pleasure and praising pain was account born and I account + will give you a complete account of the system +

+ +
+
+ +
+

What Our Tourist Say

+
+
+ human +
+
+

Sam Sumon

+

+  But I must explain to you how all this mistaken idea of account to + denouncinpleasure and praising pain But I must explain to you how + all this mistaken idea of account to nai denouncing pleasure and + praising pain was account born and I account will give you a + complete account of the system was account born and I account will + give you a nai the complete account of the system. +

+
+
+
+ +
+

Bhromaon

+

Safe Travel Anywhere

+
+ + + + + +
+
+ + diff --git a/lesson7/css/maket2.css b/lesson7/css/maket2.css index 8c2e418..70a68de 100644 --- a/lesson7/css/maket2.css +++ b/lesson7/css/maket2.css @@ -165,6 +165,7 @@ body { .tools-content { display: flex; justify-content: space-between; + margin-bottom: 34px; } .tools-columns { @@ -198,7 +199,6 @@ body { font-weight: 500; font-size: 16px; color: #544837; - margin-bottom: 34px; } .tools-icons { diff --git a/lesson7/images/1icon.svg b/lesson7/images/1icon.svg new file mode 100644 index 0000000..699ab25 Binary files /dev/null and b/lesson7/images/1icon.svg differ diff --git a/lesson9/css/index.css b/lesson9/css/index.css new file mode 100644 index 0000000..ac7acc0 --- /dev/null +++ b/lesson9/css/index.css @@ -0,0 +1,483 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&family=Work+Sans:wght@300;400;500;700&display=swap"); + +html { + box-sizing: border-box; +} + +body { + font-family: "Work Sans", sans-serif; + padding-left: 35px; + padding-right: 35px; +} + +header { + margin-bottom: 58px; +} + +.header_navigation { + display: flex; + justify-content: space-between; + margin-top: 15px; + margin-bottom: 55px; +} + +.header_navigation_left-top { + display: flex; +} + +.header_navigation_right-top { + display: flex; +} + +.navi-chat { + font-size: 12px; + line-height: 16px; + color: #6a983c; + margin-right: 33px; +} + +.navi-left { + font-size: 12px; + line-height: 16px; + color: #151515; + margin-right: 33px; +} + +.navi-green { + font-size: 12px; + line-height: 16px; + color: #6a983c; + margin-left: 38px; +} + +.freshnesecom { + font-size: 30px; + font-weight: bold; + color: #151515; +} + +.header_navi-bottom { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header_search { + margin-left: 28px; + border: none; + margin-right: 10px; + height: 19px; + width: 262px; + border-left: 1px solid #d1d1d1; + padding-left: 24px; +} + +.header_second-line { + padding: 10px 15px; + border: 1px solid #d1d1d1b0; + border-radius: 12px; +} + +.header_categories { + background: #f9f9f9; + font-weight: bold; + font-size: 15px; + line-height: 22px; + color: #151515; + border: none; + padding-right: 19px; +} + +.container { + margin-bottom: 80px; + padding: 15px; + background: #f9f9f9; +} + +.header_categories:hover, +.header_categories:focus-within { + color: rgb(0, 0, 0); + background-color: rgb(197, 226, 184); + transform: scale(1.07); +} + +.recepies-grid { + display: grid; + grid-template-columns: 369px 420px 420px; + grid-column-gap: 31px; +} + +.menu { + margin-bottom: 120px; +} + +.all-category-menu { + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 0; + height: 280px; + width: 269px; +} + +.menu-dishes { + margin-bottom: 48px; +} + +.menu-button { + margin-top: auto; +} + +.category-menu { + font-weight: 600; + font-size: 18px; + line-height: 27px; + color: #151515; + margin-bottom: 16px; +} + +.body-menu { + margin-bottom: 80px; +} + +.menu-food { + font-size: 14px; + line-height: 19px; + text-decoration-line: underline; + color: #6a983c; + margin-bottom: 12px; +} + +.menu-cards { + display: flex; + align-items: center; +} + +.menu-card { + border: 1px solid green; + background-image: url("../images/vegetables.svg"); + display: flex; + flex-direction: column; + justify-content: space-between; + height: 280px; + width: 420px; + border-radius: 12px; + margin-right: 32px; + padding: 48px 33px 32px 33px; +} + +.menu-banner-subfocus { + font-weight: bold; + weight: 600; + size: 12px; + color: #6a983c; + margin-bottom: 8px; +} + +.space-for-heading { + font-weight: 600; + font-size: 22px; + line-height: 33px; + color: #151515; +} + +.read-recepies { + padding: 12px 16px; + font-weight: bold; + font-size: 15px; + color: #151515; + border: 2px solid #92c064; + box-sizing: border-box; + border-radius: 12px; +} + +.menu-vector { + display: flex; +} + +.menu-recepies { + display: flex; +} + +.products { + margin-bottom: 137px; +} + +.product-title-a { + border: 1px solid#d1d1d1; + height: 323px; + width: 269px; + border-radius: 12px; + padding: 16px; + margin-right: 32px; +} + +.product-title { + display: flex; + flex-direction: column; + justify-content: space-between; + font-weight: 500; + font-size: 15px; + line-height: 22px; + color: #151515; + margin-bottom: 5px; +} + +.product-space-txt { + font-weight: normal; + font-size: 12px; + line-height: 16px; + color: #575757; + margin-bottom: 15px; +} + +.product-price { + margin: 0; + font-weight: 600; + font-size: 18px; + line-height: 27px; + color: #151515; +} + +.product-price-btn { + display: flex; + align-items: center; + justify-content: space-between; +} + +.product-dead-price { + margin: 0; + font-weight: 600; + font-size: 12px; + text-decoration-line: line-through; + color: #a9a9a9; +} + +.product-window { + display: flex; + justify-content: center; + height: 180px; + width: 237px; + left: 0px; + top: 0px; + border-radius: 12px; + + background: #ddd8d8; + border-radius: 12px; + margin-bottom: 15px; +} + +.product-card-content { + display: flex; + justify-content: center; + flex-direction: column; +} + +.product-green-btn { + height: 36px; + width: 90px; + border-radius: 12px; + background: #6a983c; + border: 2px solid #46760a; + box-sizing: border-box; + border-radius: 12px; +} + +.product-green-btn:hover { + box-shadow: -5px 4px rgb(168, 235, 168, 0.5); + transition: 1s; + opacity: 0.9; +} + +.product-buy-now { + font-weight: bold; + font-size: 15px; + line-height: 22px; + color: #ffffff; +} + +.farmers { + margin-bottom: 130px; +} + +@keyframes starSpin-1 { + 15% { + transform: translateX(50%) rotate(180deg); + } + + 25% { + transform: translateX(100) rotate(360deg) scale(0.4); + } + + 50% { + transform: translateX(200%) scale(0.5); + } + + 75% { + transform: translateX(300%) rotate(360deg) scale(0.4); + } + + 100% { + transform: translateX(400%); + } +} + +@keyframes starSpin { + 15% { + transform: translateX(50%) rotate(180deg); + } + + 25% { + transform: translateX(100) rotate(360deg) scale(0.4); + } + + 50% { + transform: translateY(-100%) scale(0.5); + } + + 75% { + transform: translateY(-150%) rotate(180deg) scale(0.4); + } + + 100% { + transform: translateY(-200%); + } +} + +.grid { + display: grid; + grid-template-columns: 369px 269px 269px 269px; + grid-column-gap: 32px; +} + +.animation { + display: flex; + align-items: flex-end; + width: 1260px; + height: 600px; + background-image: url(../images/andromeda-galaxy-royalty-free-image-1585682435.jpg); + margin-bottom: 170px; +} + +.star { + animation: starSpin 3s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-direction: alternate; + width: 200px; + height: 200px; +} + +.star-1 { + animation: starSpin-1 3s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-direction: alternate; + width: 200px; + height: 200px; +} + +.boxes { + justify-content: center; + grid-template-columns: 300px 300px; + grid-template-rows: 5% 5% 5% 5%; + grid-gap: 50px; + display: grid; + margin-bottom: 150px; +} + +.box { + text-align: center; + background: linear-gradient( + 14deg, + #5656fc 0%, + #8080ff 25%, + #8cf2e3 50%, + #a8ff51 75%, + #ffff80 100% + ); + box-shadow: violet; + color: rgb(118, 27, 170); + font-family: monospace; + font-weight: bold; + font-size: 25px; + padding: 10px; + border: 1px solid rgba(129, 125, 125, 0.39); + border-radius: 35px 8px 35px 8px; +} + +.box:hover { + color: rgb(238, 6, 53); + box-shadow: -5px -5px 10px 10px rgb(162, 236, 212); + transform: scale(1.1); + transition: 1s; +} + +.box.scroll { + overflow: scroll; +} + +.box.row { + font-size: 20px; + grid-auto-rows: minmax(50px, auto); +} +.box_1 { + grid-column-start: 1; + grid-column-end: 3; +} + +.footer-colunm { + display: flex; + justify-content: space-between; + margin-bottom: 48px; +} + +.footer-colunms { + display: flex; + flex-direction: column; +} + +.footer-heading { + font-weight: 600; + font-size: 18px; + color: #151515; + margin-bottom: 16px; + margin-right: 200px; +} +.footer-txt { + font-weight: normal; + font-size: 14px; + color: #6a983c; + margin-bottom: 16px; +} + +.footer-row { + display: flex; + flex-wrap: wrap; +} + +.footer-product-tags { + display: flex; + justify-content: space-between; +} + +.footer-words { + display: flex; + flex-direction: row; + align-items: center; + padding: 4px 10px; + font-weight: 600; + font-size: 12px; + line-height: 18px; + background: #f0ececce; + border-radius: 12px; + margin-right: 36px; + margin-bottom: 45px; +} + +.footer-end { + font-weight: normal; + font-size: 14px; + color: #151515; + margin-bottom: 65px; +} diff --git a/lesson9/images/10icon,svg.zip b/lesson9/images/10icon,svg.zip new file mode 100644 index 0000000..94134a2 Binary files /dev/null and b/lesson9/images/10icon,svg.zip differ diff --git a/lesson9/images/Headers/Default/Group 47.svg b/lesson9/images/Headers/Default/Group 47.svg new file mode 100644 index 0000000..7996aa8 --- /dev/null +++ b/lesson9/images/Headers/Default/Group 47.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/lesson9/images/Headers/Default/Search.svg b/lesson9/images/Headers/Default/Search.svg new file mode 100644 index 0000000..a80b241 --- /dev/null +++ b/lesson9/images/Headers/Default/Search.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson9/images/Layer.svg b/lesson9/images/Layer.svg new file mode 100644 index 0000000..41a445f --- /dev/null +++ b/lesson9/images/Layer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lesson9/images/Menus/White/v1.svg b/lesson9/images/Menus/White/v1.svg new file mode 100644 index 0000000..59454cd --- /dev/null +++ b/lesson9/images/Menus/White/v1.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/lesson9/images/Vector.svg b/lesson9/images/Vector.svg new file mode 100644 index 0000000..6000522 --- /dev/null +++ b/lesson9/images/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson9/images/andromeda-galaxy-royalty-free-image-1585682435.jpg b/lesson9/images/andromeda-galaxy-royalty-free-image-1585682435.jpg new file mode 100644 index 0000000..b8554b8 Binary files /dev/null and b/lesson9/images/andromeda-galaxy-royalty-free-image-1585682435.jpg differ diff --git a/lesson9/images/card.svg b/lesson9/images/card.svg new file mode 100644 index 0000000..8ac0084 --- /dev/null +++ b/lesson9/images/card.svg @@ -0,0 +1,3 @@ + + + diff --git a/lesson9/images/group.svg b/lesson9/images/group.svg new file mode 100644 index 0000000..7996aa8 --- /dev/null +++ b/lesson9/images/group.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/lesson9/images/menu-button.svg b/lesson9/images/menu-button.svg new file mode 100644 index 0000000..e43c3f0 --- /dev/null +++ b/lesson9/images/menu-button.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/lesson9/images/product-buttons.svg b/lesson9/images/product-buttons.svg new file mode 100644 index 0000000..b2c0b8c --- /dev/null +++ b/lesson9/images/product-buttons.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/lesson9/images/search.svg b/lesson9/images/search.svg new file mode 100644 index 0000000..a80b241 --- /dev/null +++ b/lesson9/images/search.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/lesson9/images/star.png b/lesson9/images/star.png new file mode 100644 index 0000000..3db40a2 Binary files /dev/null and b/lesson9/images/star.png differ diff --git a/lesson9/images/v1.svg b/lesson9/images/v1.svg new file mode 100644 index 0000000..59454cd --- /dev/null +++ b/lesson9/images/v1.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/lesson9/images/vegetables.svg b/lesson9/images/vegetables.svg new file mode 100644 index 0000000..9955394 --- /dev/null +++ b/lesson9/images/vegetables.svg @@ -0,0 +1,1087 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lesson9/index.html b/lesson9/index.html new file mode 100644 index 0000000..a5cef49 --- /dev/null +++ b/lesson9/index.html @@ -0,0 +1,349 @@ + + + + + + + + Document + + +
+
+
+

Chat with us

+

+420 336 775 664

+

info@freshnessless.com

+
+
+

Blog

+

About Us

+

Careers

+
+
+
+

Freshnesecom

+ +
+ + + icon +
+ +
+ icon +
+
+
+ +
+ + + + + + + + + + +
+ +
+
+

Category menu

+
+

Bakery

+

Fruit and vegetables

+

Meat and fish

+

Drinks

+

Kitchen

+
+
+ btn +
+
+ + +
+
+

Banner subfocus

+

Space for heading

+
+ +
+
+
+

Banner subfocus

+

Space for heading

+
+ +
+
+ + +
+
+

Best selling products

+
+

Kitchen

+

Meat and fish

+

Special nutrition

+

Pharmacy

+

Baby

+
+
+ btn +
+
+ +
+
+
+

Product Title

+

Space for a small product description

+
+

1.48 USD

+
+ +
+
+
+
+ +
+
+

Product Title

+

Space for a small product description

+
+
+

0.28 USD

+

48.56

+
+ +
+ +
+
+
+ +
+
+

Product Title

+

Space for a small product description

+
+

1.12 USD

+

48.56

+
+ +
+
+
+ +
+ +
+
+

Best selling products

+
+

Kitchen

+

Meat and fish

+

Special nutrition

+

Pharmacy

+

Baby

+
+
+ btn +
+
+ +
+
+
+

Product Title

+

Space for a small product description

+
+

1.48 USD

+
+ +
+
+
+
+ +
+
+

Product Title

+

Space for a small product description

+
+
+

0.28 USD

+

48.56

+
+ +
+ +
+
+
+ +
+
+

Product Title

+

Space for a small product description

+
+

1.12 USD

+

48.56

+
+ +
+
+
+ +
+ +
+ star + star +
+ +
+
Monday
+
Tuesday
+
Wednesday
+
Thursday
+
Friday
+
Saturday
+
Sunday
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste rem + voluptatibus sit dicta blanditiis, quas dolore amet! Sapiente odit + consequuntur cupiditate modi, assumenda tempore placeat itaque velit + eius illo reiciendis nesciunt, harum illum explicabo sed ex alias + voluptatibus? Maxime, pariatur nesciunt enim accusamus soluta dolore cum + mollitia hic assumenda! Ad quo cumque corrupti optio velit mollitia + maiores accusamus error dolorum alias. Iure, temporibus? Est corporis + omnis voluptates aperiam cum nesciunt nemo provident suscipit, ut modi. + Ipsam debitis, laudantium incidunt repudiandae impedit ullam eius, + distinctio quod vero atque in ipsa. Laudantium maxime unde beatae eaque + iusto aut ab, tempore. +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste velit + voluptate nisi fugiat optio reiciendis neque delectus atque rerum eaque. + Eaque quis dolor rerum accusamus, doloribus suscipit at laboriosam in. +
+
+ + + + diff --git a/shared_css/reset.css b/shared_css/reset.css new file mode 100644 index 0000000..bb37c81 --- /dev/null +++ b/shared_css/reset.css @@ -0,0 +1,18 @@ +*, +*::before, +*::after { + box-sizing: inherit; +} + +* { + margin: 0; + padding: 0; + + outline: none; +} + +button { + background-color: transparent; + border: none; + cursor: pointer; +}