+ MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
+ Download +diff --git a/assets/fonts/opensans-italic-latin-ext.woff2 b/assets/fonts/opensans-italic-latin-ext.woff2 new file mode 100644 index 0000000..ca1b2b1 Binary files /dev/null and b/assets/fonts/opensans-italic-latin-ext.woff2 differ diff --git a/assets/fonts/opensans-italic-latin.woff2 b/assets/fonts/opensans-italic-latin.woff2 new file mode 100644 index 0000000..10031c0 Binary files /dev/null and b/assets/fonts/opensans-italic-latin.woff2 differ diff --git a/assets/fonts/raleway-bold-latin-ext.woff2 b/assets/fonts/raleway-bold-latin-ext.woff2 new file mode 100644 index 0000000..32aba5e Binary files /dev/null and b/assets/fonts/raleway-bold-latin-ext.woff2 differ diff --git a/assets/fonts/raleway-bold-latin.woff2 b/assets/fonts/raleway-bold-latin.woff2 new file mode 100644 index 0000000..0220642 Binary files /dev/null and b/assets/fonts/raleway-bold-latin.woff2 differ diff --git a/assets/fonts/raleway-regular-latin.woff2 b/assets/fonts/raleway-regular-latin.woff2 index 86b505e..fa88675 100644 Binary files a/assets/fonts/raleway-regular-latin.woff2 and b/assets/fonts/raleway-regular-latin.woff2 differ diff --git a/assets/image/city-3.jpg b/assets/image/city-3.jpg new file mode 100644 index 0000000..d3f9453 Binary files /dev/null and b/assets/image/city-3.jpg differ diff --git a/assets/image/city2.png b/assets/image/city2.png new file mode 100644 index 0000000..315bb0a Binary files /dev/null and b/assets/image/city2.png differ diff --git a/assets/image/face.jpg b/assets/image/face.jpg new file mode 100644 index 0000000..dbc9fab Binary files /dev/null and b/assets/image/face.jpg differ diff --git a/assets/image/lofo-2.jpg b/assets/image/lofo-2.jpg new file mode 100644 index 0000000..c9158ea Binary files /dev/null and b/assets/image/lofo-2.jpg differ diff --git a/assets/image/logo-1.png b/assets/image/logo-1.png new file mode 100644 index 0000000..c41fc21 Binary files /dev/null and b/assets/image/logo-1.png differ diff --git a/assets/styles/fonts.css b/assets/styles/fonts.css index c6b2796..9341649 100644 --- a/assets/styles/fonts.css +++ b/assets/styles/fonts.css @@ -106,4 +106,40 @@ font-display: swap; src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'), url(../fonts/opensans-semibolditalic-letin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Raleway Bold'), local('Raleway-Bold'), url(../fonts/raleway-bold-latin-ext.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPAA.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Open Sans Italic'), local('OpenSans-Italic'), url(../fonts/opensans-italic-latin-ext.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Open Sans Italic'), local('OpenSans-Italic'), url(../fonts/opensans-italic-latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } \ No newline at end of file diff --git a/assets/styles/grid-style.css b/assets/styles/grid-style.css new file mode 100644 index 0000000..369638a --- /dev/null +++ b/assets/styles/grid-style.css @@ -0,0 +1,254 @@ +@import url('fonts.css'); +:root{ + --anoter_bg_color:#333333; + --primari-color: #ff8b38; + --white-color:#ffffff +} +*{ + margin: 0; + font-weight: 400; + font-size: 14px; + font-family: 'Open Sans',sans-serif; + box-sizing: border-box; + text-decoration: none; +} +body{ + color: #86878b; +} +h2{ + font-family: 'Raleway',sans-serif; + text-transform: uppercase; + font-size: 36px; + color: #212121; + text-align: center; +} + +h2::after{ + content: ''; + display: block; + height: 2px; + width: 64px; + background-color: #ff8b38; + margin: 22px auto 24px; +} +h2.__white{ + color: #ffffff; +} +h2.__white::after{ + background-color: #ffffff; + margin: 22px auto 29px; +} +h2._left_white{ + color: #ffffff; + text-align: left; + margin-top: 22px; +} +h2._left_white::after{ + background-color: #ffffff; + text-align: left; + margin: 32px 0 34px ; +} +h3{ + font-size: 20px; + font-weight: 700; + color: #333333; +} +input,textarea,button{ + outline: none; +} +input,textarea{ + padding: 10px 12px; + background-color: transparent; + border: none; + border-bottom: 1px solid #d6d6d6; +} +textarea{ + line-height: 1.4; + resize: none; +} +button{ + border: none; + background-color: transparent; + +} +.button{ + display: inline-flex; + align-items: center; + justify-content: center; + height: 40px; + border: 2px solid #ff9b51; + background-color: #ff9b51; + color: #ffffff; + font-size: 15px; + font-weight: 600; + min-width: 135px; + border-radius: 3px; + cursor: pointer; + box-shadow: 1px 2px 2px #d6d6d6; +} +.button._outline{ + background-color: transparent; + border-radius: 0; + border-color: #ffffff; + box-shadow: none; +} +._text-center{ + text-align: center; +} +.text-left{ + text-align: left; +} +._icon{ + display: none; +} +.icon{ + width: 1em; + height: 1em; +} +.media { + fill: currentColor; + color: #cccccc; +} +.container{ + padding: 110px 0; + max-width: 1110px; + margin: 0 auto; +} +.row{ + display: grid; + grid-template: "row row row"; +} +.base_bg{ + background-color: #f5f5f5; +} +.grey_bg{ + background-color: var(--anoter_bg_color); +} +.active_bg{ + background-color: var(--primari-color); +} +p._light{ + font-family: 'Open Sans', sans-serif; + font-weight: 300; + font-size: 16px; + color: rgba(255,255,255,.8); + margin-bottom: 33px; +} +/*------------------------------------------------------*/ +header{ + background-color: #000000; + color: #ffffff; +} +.header__template{ + grid-template-columns: 2fr 5fr; +} +.header .container{ + padding: 23px 0; +} +.header__logo{ + width: 79px; + height: 27px; +} +.header__a-color{ + margin-left: 45px; + font-weight: 600; + color: rgba(255,255,255,.69); +} +nav{ + align-self: center; + justify-self: end; +} +.main__template{ + grid-template-columns: 1fr 1.1fr; + } +.main{ + background-image: url('../image/city-3.jpg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} +.main__bg{ + background-color: rgba(0,0,0,.52); +} +.main__width{ + justify-self: end; + margin-top:30px; + margin-right: 10px; + width: 360px; +} +.main__border_try{ + border-radius: 3px 3px 0 0; + background-color: #f5f5f5; +} +.main h3{ + color: #333333; + text-transform: capitalize; + padding: 13px 0; +} +span.free{ + font-family: 'Open Sans', sans-serif; + font-weight: 700; + font-size: 20px; + color: var(--primari-color); + text-transform: uppercase; +} +.main__border_form{ + background-color: #ffffff; + padding: 14px 0; +} +.main__field{ + width: 80%; + margin: 18px 0; +} +.main__button_get{ + height: 54px; + width: 360px; + box-shadow: none; + border-radius: 0 0 3px 3px; +} + +.social_media{ + box-shadow: 0 1px 3px rgba(0,0,0,.38); + position: relative; +} +.social_media .container{ + padding: 18px 0; +} +.social_media__template{ + grid-template-columns: 1fr 2fr; +} +.social_media__h3{ + margin-bottom: 3px; +} +.social_media__icon{ + margin: 0 21px; + font-size: 48px; +} +.social_media-self{ + align-self: center; + justify-self: center; +} +.tabs__block1{ + width: 110px; + border-bottom: 1px solid #c7c7c7; + border-radius: 3px 3px 0 0; + cursor: pointer; +} +.tabs__block2{ + width: 110px; + border-bottom: 1px solid #c7c7c7; + cursor: pointer; +} + +.tabs__block3{ + width: 110px; + border-radius: 0 0 3px 3px; + cursor: pointer; +} +.tabs__text{ + font-weight: 700; + font-size: 15px; + color: #ffffff; + text-transform: uppercase; + padding: 45px 0; +} \ No newline at end of file diff --git a/assets/styles/style.css b/assets/styles/style.css index 2e39238..d3ef9f6 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -1,13 +1,24 @@ @import url('fonts.css'); @import url('font-awesome.all.min.css'); +:root{ + --anoter_bg_color:#333333; + --primari-color: #ff8b38; + --white-color:#ffffff +} *{ margin: 0; font-weight: 400; + font-size: 14px; + font-family: 'Open Sans',sans-serif; + box-sizing: border-box; } + body{ - font-family: 'Open Sans',sans-serif; color: #86878b; - font-size: 14px; + +} +a{ + text-decoration: none; } h2{ @@ -15,6 +26,12 @@ h2{ text-transform: uppercase; font-size: 36px; color: #212121; + text-align: center; +} +h3{ + font-size: 20px; + font-weight: 700; + color: #333333; } h2::after{ content: ''; @@ -25,27 +42,93 @@ h2::after{ margin: 22px auto 24px; } h2.__white{ - text-align: center; color: #ffffff; - } h2.__white::after{ background-color: #ffffff; margin: 22px auto 29px; } -.icon{ - width: 1em; - height: 1em; - fill: currentColor; +h2._left_white{ + color: #ffffff; + text-align: left; + margin-top: 22px; } -._icon{ - display: none; +h2._left_white::after{ + background-color: #ffffff; + text-align: left; + margin: 32px 0 34px ; } -/*-------------------------------benefit block------------------------------*/ -h3{ - font-size: 20px; - font-weight: 700; - color: #333333; +input,textarea,button{ + outline: none; +} +input,textarea{ + padding: 10px 12px; + background-color: transparent; + border: none; + border-bottom: 1px solid #d6d6d6; +} +textarea{ + line-height: 1.4; + resize: none; +} +button{ + border: none; + background-color: transparent; + +} + +.button{ + display: inline-flex; + align-items: center; + justify-content: center; + height: 40px; + border: 2px solid #ff9b51; + background-color: #ff9b51; + color: #ffffff; + font-size: 15px; + font-weight: 600; + min-width: 135px; + border-radius: 3px; + cursor: pointer; + box-shadow: 1px 2px 2px #d6d6d6; + + + +} +.button_transform-scale{ + transition: all 300ms ease-in-out 100ms; +} +.button_transform-scale:hover{ + transform: scale(1.5); +} +.button_transform-color{ + transition: all 200ms ease-in-out 100ms; +} +._transform-scale-color{ + transition: all 300ms ease-in-out 100ms; +} +._transform-scale-color:hover{ + transform: scale(1.2); + +} +a:hover{color:var(--primari-color);} + + +.button_transform-color:hover{ + background-color: transparent; +} +.button._outline{ + background-color: transparent; + border-radius: 0; + border-color: #ffffff; + box-shadow: none; +} + +._text-center{ + text-align: center; +} +.text-left{ + text-align: left; } .row{ display: flex; @@ -55,227 +138,314 @@ h3{ .cell{ padding: 0 20px; } -.benefit{ - padding: 110px 0; -} .container{ max-width: 1110px; margin: 0 auto; + padding: 110px 0; } -.benefit__p{ +._indent{ margin-bottom: 80px; } -.benefit__image_wrap{ - display: inline-flex; - border: 2px solid #ff8b38; - border-radius: 50px; - width: 68px; - height: 68px; - margin-bottom: 22px; - align-items: center; - justify-content: center; - +._icon{ + display: none; +} +.icon{ + width: 1em; + height: 1em; +} +.media { + fill: currentColor; + color: #cccccc; +} +.base_bg{ + background-color: #f5f5f5; +} +.grey_bg{ + background-color: var(--anoter_bg_color); +} +.active_bg{ + background-color: var(--primari-color); +} +p._light{ + font-family: 'Open Sans', sans-serif; + font-weight: 300; + font-size: 16px; + color: rgba(255,255,255,.8); + margin-bottom: 33px; +} +/*--------------------------------------------------------------------------------------------*/ +.header{ + background-color: #000000; } -.benefit__h3{ - margin-bottom: 22px; +.header .container{ + padding: 21px 0; } -.benefit i{ - color: #ff8b38; - font-size: 32px; +.header__logo{ + height: 27px; + width: 79px; + background-image: url('../image/logo-1.png'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; } -.benefit{ - text-align: center; +.header__content{ + display: flex; + align-items: center; } -/*-------------------------------- download block--------------------------------*/ -.download__image{ - height: 320px; - background-image: url('../image/city.jpg'); +.header__indent{ + padding: 0 27px; +} +.header a{ + font-weight: 600; + color: rgba(255,255,255,.69); +} +.main{ + background-image: url('../image/city-3.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; } -.download__color{ - background-color: rgba(0,0,0,0.4); - height: 320px; - +.main__bg{ + background-color: rgba(0,0,0,.52); } - -.download__text{ - padding: 66px 0; +.main__width-h2{ + width: 540px; } -.download__wrap1{ - border: 1px solid #f5f5f5; - width: 135px; - height: 42px; - margin: 0 auto; +.main__width-p{ + width: 500px; } -.download__wrap2{ - border: 1px solid #d9dbd7; - width: 133px; - height: 40px; - margin: 0 auto; +.main__width{ + margin-right: 10px; + margin-top:30px; + width: 400px; +} +.main__border_try{ + border-radius: 3px 3px 0 0; + background-color: #f5f5f5; +} +.main h3{ + color: #333333; + text-transform: capitalize; + padding: 13px 0; +} +span.free{ + font-family: 'Open Sans', sans-serif; + font-weight: 700; + font-size: 20px; + color: var(--primari-color); + text-transform: uppercase; } -p.download__p1{ - text-align: center; - font-family: 'Raleway',sans-serif; - font-weight: 300; - font-size: 16px; - color: #afaca7; - margin-bottom: 33px; +.main__border_form{ + background-color: #ffffff; + padding: 14px 0; } -p.download__p2{ - text-align: center; - font-weight: 600; - font-size: 15px; - color: #ffffff; - padding: 10px - +.main__field{ + width: 80%; + margin: 18px 0; } -/*------------------------ links block-----------------------------*/ -.links i{ - padding: 0 12px; +.main__button_get{ + height: 54px; + width: 360px; + box-shadow: none; + border-radius: 0 0 3px 3px; } -p.links__p{ - color: #707070; - text-align: center; - font-size: 12px; +.social_media{ + box-shadow: 0 1px 3px rgba(0,0,0,.38); + position: relative; } -.links{ - background-color: #000000; - height: 100px; - +.social_media .container{ + padding: 18px 0; } -.links__image{ - padding-top: 35px; - margin: 0 auto 6px; - text-align: center; - color: #cccccc; - font-size: 24px; - +.social_media__flex { + display: flex; + justify-content: space-around; + align-items: center; } -/*-------------------------- pricing block--------------------*/ -.pricing_back{ - background: #f5f5f5; - height: 883px; - text-align: center; +.social_media__h3{ + margin-bottom: 3px; } -.pricing{ - padding-top: 109px; - +.social_media__icon{ + font-size: 48px; } -.pricing_row{ - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-end; - +.tabs__block1{ + width: 110px; + border-bottom: 1px solid #c7c7c7; + border-radius: 3px 3px 0 0; + cursor: pointer; } -.description{ - height: 59px; - background: #333333; - border-bottom: 1px solid #f5f5f5; - +.tabs__block2{ + width: 110px; + border-bottom: 1px solid #c7c7c7; + cursor: pointer; } -.pricing__table{ - width: 343px; +.tabs__block3{ + width: 110px; + border-radius: 0 0 3px 3px; + cursor: pointer; } -.sentence{ - height: 100px; - background: #333333; - border-bottom: 1px solid #f5f5f5; +.tabs__text{ + font-weight: 700; + font-size: 15px; + color: #ffffff; + text-transform: uppercase; + padding: 45px 0; +} +.tabs__text-width{ + width: 520px; +} +.tabs__indent1{ + padding: 48px 0 24px; +} +.tabs__indent2{ + padding-bottom: 50px; +} +.tabs__img { + margin-top: 22px; +} +.benefit__image_wrap{ + display: inline-flex; + border: 2px solid #ff8b38; + border-radius: 50px; + width: 68px; + height: 68px; + margin-bottom: 22px; + align-items: center; + justify-content: center; } -.day_price{ - height: 51px; - background: #333333; +.benefit__h3{ + margin-bottom: 22px; } -.orange__line13{ - height: 5px; - background: #ff8b38; +.benefit i{ + color: #ff8b38; + font-size: 32px; } -.orange__line2{ - height:40px; - background: #ff8b38; +.pricing .row{ + align-items: flex-end; } -.other_block{ - background: #ffffff; - height: 40px; +.pricing .cell{ + width: 384px; +} +.pricing__border{ border-bottom: 1px solid #f5f5f5; - - } -p.description_p{ - font-family: "Open Sans",sans-serif; - font-weight: bold; +.pricing__white_bg{ + padding: 11px 0; + background-color: var(--white-color); + text-transform: uppercase; +} +.pricing__most-popular{ + font-family: 'Open Sans', sans-serif; + text-transform: uppercase; + font-weight: 700; + padding: 11px 0; + font-size: 14px; + color: #ffffff; +} +.pricing__open_sans{ + padding: 16px 0; + font-family: 'Open Sans', sans-serif; + font-weight: 700; font-size: 20px; color: #ffffff; - padding-top: 17px; - } -p.sentence__p{ +p.pricing__number__p{ font-family: 'Raleway',sans-serif; - font-weight: bold; + font-weight: 700; + line-height: 37px; + padding: 34px 0 7px; + font-size: 95px; color: #ffffff; - font-size: 88px; - } - -p.day_price__p{ +.height{ + padding: 3px 0; +} +.pricing__period{ + padding: 16px 0; font-family: 'Open Sans', sans-serif; font-style: italic; font-weight: 600; font-size: 14px; - color: #999999; - padding-top: 14px; + color: rgba(255,255,255,.5); + } -p.orange__line2__p{ - font-family: 'Open Sans', sans-serif; - font-weight: bold; - font-size: 14px; - color: #ffffff; - text-transform: uppercase; - padding-top: 10px; +span.pricing__dolor{ + font-family: 'Raleway',sans-serif; + font-size: 34px; + font-weight: 700; } -p.other_block__p{ - font-family: 'Open Sans', sans-serif; - font-weight: 400; - font-size: 14px; - text-transform: uppercase; - color: #86878b; - padding-top: 11px; - +.reviews__border{ + border: 1px solid #f5f5f5; + border-radius: 4px; + background-color: #f5f5f5; + width: 273px; + height: 132px; + text-align: left; +} +.reviews__border__text{ + position: relative; + padding: 18px 17px; + font-style: italic; } -/*--------------------------------- Social Media---------------------------------------*/ -.social_media{ - height: 105px; - box-shadow: 0 3px 3px -3px rgba(0, 0, 0, .2); +.reviews__border__text::after{ + content:''; + position: absolute; + bottom: -15px; + left: 25px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top: 15px solid #f5f5f5; +} +.reviews__position{ + margin-top: 22px; + display: flex; } -.social_media_content{ - display:flex; - flex-direction: row; +.reviews__text-position{ + padding: 10px 10px; } -h4.social_media__h4{ - font-family: 'Open Sans', sans-serif; - font-weight: bold; - font-size: 20px; - color: #000000; - text-transform: capitalize; - padding-top: 17px; +.download .container{ + padding: 68px 0; +} +.download__bg{ + background-color: rgba(0,0,0,.4); +} +.download{ + background-image: url('../image/city.jpg'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; } -.social_media__p{ - padding-top: 4px; +.contact .container{ + padding: 101px 0 86px; } -.social_media_h4_p{ - padding-left: 13px; +.contact__row{ + margin-bottom: 45px; } -.social_media_icon{ - color: #cccccc; - font-size: 46px; - justify-content: center; - margin: 29px auto 0; +.contact__cell{ + display: flex; + flex-direction: column; + justify-content: space-between; + width: 50%; +} +.contact__field{ + width: 100%; +} +.footer{ + background-color: #000000; +} +.footer .container{ + padding: 37px 0 13px; +} +.footer__icon{ + font-size: 24px; + margin: 0 12px; +} +.footer__title{ + font-size: 12px; + color: rgba(255,255,255,.5); + margin-top: 7px; } -svg.facebook{ - margin-left: 77px; -} \ No newline at end of file diff --git a/grid.html b/grid.html new file mode 100644 index 0000000..d3e0ea8 --- /dev/null +++ b/grid.html @@ -0,0 +1,129 @@ + + +
+ + + + +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
+ Download +