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 @@ + + + + + + + + Axit + + + + + + + + + + + +
+
+
+ + +
+
+
+
+
+
+
+
+ logo +

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 +
+
+
+

Try your free trial today

+
+
+
+ + + +
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Aenean euismod bibendum laoreet

+
+ +
+
+
+
+
+
+
Tab 1
+
Tab 2
+
Tab 3
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index d6762dc..fc9807f 100644 --- a/index.html +++ b/index.html @@ -2,152 +2,316 @@ + Axit - - - - - - - - - -
-
- -
+ + +
+ +
+
+
+
+
+ logo +

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 +
+
+
+

Try your free trial today

+
+
+
+ + + +
+
+ +
+
+
+ +
+
+ +
+ +
+ +
+
+
+
+
Tab 1
+
Tab 2
+
Tab 3
+
+
+

Tabs with soft transitioning effect.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.

+ Download +
+
+ city +
+
+
+
+
+

Why this is awesome

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+ +
+

Thoughtful Design

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

+
+
+
+ +
+

Well Crafted

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

+
+
+
+ +
+

Easy to Customize

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

- -
-

Why this is awesome

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+

Pricing options

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
- -
-

Thoughtful Design

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

+
Basic
+

$0

+
Free for Life
+ +
1 gb of space
+
10 gb of bandwidth
+
3 websites
+
Basic Customization
+
Wordpress integration
+
Email support
-
- -
-

Well Crafted

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

+
Professional
+

$19

+
Monthly Payment
+ +
5 gb of space
+
50 gb of bandwidth
+
12 websites
+
Advanced Customization
+
Wordpress integration
+
Email support
-
- -
-

Easy to Customize

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra.

+
Enterprise
+

$70

+
Monthly Payment
+ +
Unlimited space
+
Unlimited bandwidth
+
100 websites
+
Advanced Customization
+
Wordpress integration
+
24/7 customer support
- -
-
-

PRICING OPTIONS

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

Basic

-

$0

-

Free for Life

-
-

1 gb of space

-

10 gb of bandwidth

-

13 websites

-

Basic Customization

-

Wordpress integration

-

Email support

+
+
+

What our customers are saying

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus accusamus expedita repellat similique odio aspernatur ex, architecto eaque quo suscipit.

+
+
+
+ face +
+
+

Jeremy H.

+

Manager

-
-

Professional

-

$19

-

Monthly Payment

-

Our most popular

-

5 gb of space

-

50 gb of bandwidth

-

12 websites

-

Advanced Customization

-

Wordpress integration

-

Email support

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus accusamus expedita repellat similique odio aspernatur ex, architecto eaque quo suscipit.

+
+
+
+ face
-
-

Enterprise

-

$70

-

Monthly Payment

-
-

Unlimited space

-

Unlimited bandwidth

-

100 websites

-

Advanced Customization

-

Wordpress integration

-

24/7 customer support

+
+

Jeremy H.

+

Manager

- -
- -
-
-
-
-

Stylish axure design

-

Use the sections you need, remove the ones you don't. Create gorgeous prototypes faster than ever!

-
-
-

Download

-
-
- +
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus accusamus expedita repellat similique odio aspernatur ex, architecto eaque quo suscipit.

+
+
+
+ face +
+
+

Jeremy H.

+

Manager

+
-
- -
+
+
+
+

Stylish axure design

+

Use the sections you need, remove the ones you don't. Create gorgeous prototypes faster than ever!

+ Download
-
+
+
+
+

Contact us

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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