diff --git a/css/style.css b/css/style.css index 0642676..e729bb0 100644 --- a/css/style.css +++ b/css/style.css @@ -1,387 +1,104 @@ -body{ - background-color: #fff; - padding: 0; - margin:0; - font-family: 'Lato', sans-serif; - font-size:14pt; +body { + margin: 0; + font-family: 'Montserrat', sans-serif; + background-color: rgba(0, 0, 0, 0.014); line-height: 1.6; + font-size: 16px; } -a{ - color: #000; +h1, h2,h3, h4, h5, h6{ + margin:0; +} + +*, +*:after, +*:before { + box-sizing: border-box; +} + +/*intro*/ +.intro { + height: 100vh; + width:100%; + background: url("../images/intro.jpg") center no-repeat ; + background-size: cover; + -webkit-background-size:cover; +} + +.intro_title{ + font-size: 150px; + font-weight:700; + text-transform: uppercase; + text-align: center; + line-height: 1; +} + +/*header*/ +.header{ + padding-top: 30px; + width: 100%; + position:absolute; + top: 0; + left: 0; + right:0; + z-index: 1000; +} + +.header_inner{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.header_logo { + font-size: 30px; + font-weight:700; + color: #fff; +} + +.nav{ + font-size: 14px; + text-transform: uppercase; + + +} + +.nav_link{ + display: inline-block; + vertical-align: top; + margin: 0 15px; + position: relative; + color: #fff; text-decoration: none; - + transition: color 0.2s linear; } +.nav_link:after{ + content:""; + display:block; + width: 100%; + height: 3px; + opacity: 0; + background-color:#fce38a; + position: absolute; + top:100%; + left:0; + z-index: 1; + transition: opacity .2s linear; +} + +.nav_link:hover +{ + color: #fce38a; +} +.nav_link:hover::after{ + opacity: 1; +} + + .container { width: 100%; - max-width: 1150px; + max-width: 1200px; margin: 0 auto; } -.welcome -{ - width: 100%; - height: 30px; - background-color: #d9e1e6; - color: #868f93; -} -.close { - float: right; - padding-right: 5px; - font-size: 100%; - font-weight: 600; -} -.welcome_msg -{ - line-height: 30px; - text-align: center; - font-size: 10pt; - text-transform: uppercase; -} - -/*logo line*/ - -.logo_line -{ - height: 97px; - text-transform: uppercase; - color: #000; - display: flex; - justify-content: space-between; - align-items: center; -} - -.val{ - width: 100%; - max-width: 128px; -} - -.logo -{ - font-size: 24px; - font-family: 'Intro demo'; -} - -.cart{ - line-height: 40px ; - border: 2px solid; - font-size: 12px; - border-color: #ded3aa; - text-align: center; - height:40px; - width: 124px; -} - -/*link line*/ -.link_line{ - line-height: 68px; - text-transform: uppercase; - border-top: 2px solid #ded3aa; - border-bottom: 2px solid #ded3aa; -} - -.link_content -{ - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.nav_group -{ - max-width: 545px; - display: flex; - justify-content: space-between ; - align-items: center; - -} - -.nav_link -{ - font-size: 12px; - margin: 0 25px; -} - -.link_content div{ - float: left; -} - -.icons -{ - line-height: 28px; -} - -.heart -{ - content: ""; - border-right: 1px dashed #999999; - border-right-width: 1px; - padding: 0 14px; - -} - -.search -{ - padding: 0 14px; -} - - -/*main content*/ -.main_content -{ - padding-top: 48px; - display: flex; -} - - -.main_image -{ - height: 683px; - width: 657px; -} - -.alt_images -{ - display: flex; - flex-direction: row; - width: 146px; - padding-top: 21px; - padding-bottom: 101px; - -} - -.alt_image -{ - width: 146px; - height: 170px; - margin-right: 24px; - -} - -.alt_image:hover -{ - box-shadow: 1px 1px 1px #cbcdce; -} - -.exit -{ - font-size: 14px; -} - -.text -{ - margin-left: 29px; -} - -.product_name h2 -{ - line-height: 36px; - font-size: 24px; - margin-bottom: 0; -} - -.review -{ - - line-height: 25px; - font-size: 14px; - color: #555555; -} - -.review a -{ - font-size: 12px; - color: #000; -} - -.price -{ - margin-top: 15px; - font-size: 24px; - color:#68899a; -} - -.inform -{ - font-size:14px; - line-height: 24px; - margin-top:18px; -} - -.inform p -{ - margin: 0 0; -} - -.inform a -{ - color:#68899a; -} - -.about -{ - margin-top: 30px; - font-size: 14px; - color: #555555; -} - -.about ul -{ - padding-left: 0; - list-style-position: inside; -} - -.selectors -{ - display: flex; - flex-direction: row; - justify-content: space-between; - background-color: #fff; - border-color: #e1e1e1; - text-transform: uppercase; - font-size: 14px; - -} - -.color -{ - width: 196px; -} - -.size -{ - width: 196px; - -} - -.selectors select -{ - font-size: 13px; - color: #707070; - width: 168px; - height: 35px; - border-radius: 0%; - border-color: #e1e1e1; - padding-left: 12px; - font: inherit; - letter-spacing: inherit; - word-spacing: inherit; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; -} - -select:not([multiple]) { - padding-right: 1.2em; - background-repeat: no-repeat; - background-position: calc(100% - 0.25em) 0.8499999999999932em; - background-size: 1.2499999999999991em auto; - background-image: url("../images/icon.png"); - } - -input[type="number"] -{ - -webkit-appearance: textfield; - -moz-appearance: textfield; - appearance: textfield; -} - -input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button -{ - -webkit-appearance: none; -} - -input -{ - text-align: center; -} - -.qty_counter -{ - display: flex; - align-items: center; - -} - - -.buttons -{ - display: flex; - flex-direction: column; - border-radius: 0; - border: 1px solid #e1e1e1; - border-left: none; -} - -.buttons button -{ - border-radius: 0; - border: 0px ; - background-color: #fff; - height: 16.5px; -} - -.buttons button:first-child -{ - - border-bottom: 0.5px solid #e1e1e1; -} - -.buttons button:last-child -{ - - border-top: 0.5px solid #e1e1e1; -} - - -.count_up { - width: 0; - height: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; - - border-bottom: 2px solid #cccccc; - } - -.count_down { - width: 0; - height: 0; - border-left: 3px solid transparent; - border-right: 3px solid transparent; - - border-top: 2px solid #cccccc; - } - -.selectors .qty input -{ - padding: 5px; - font-size: 13px; - color: #707070; - width: 34px; - height: 33px; - padding: 0; - border-radius: 0; - border: 1px solid #e1e1e1; -} - - - - - - - - - - - -footer -{ - border-top: 1px solid #e1e1e1; - line-height: 75px; - text-align: center; - color: #b5b5b5; - font-size: 13pt; - font-family: 'Lato'; -} \ No newline at end of file diff --git a/images/intro.jpg b/images/intro.jpg new file mode 100644 index 0000000..bf41bb7 Binary files /dev/null and b/images/intro.jpg differ diff --git a/index.html b/index.html index 0d3b0ef..521c92d 100644 --- a/index.html +++ b/index.html @@ -1,123 +1,38 @@ - + - - - - - - - Sale + + Document + - +
-
-
-
- start selling your products or buy them from anywhere! × -
+
+
+ + +
+
+
-
-
USD
- - cart(3) +
+

Welcome + to MoGo

- - -
-
-
- -
- - - - -
-
-
- Back to Woman -

The Atelier Tailored Coat

-
Star 3 Review(s) | ADD A REVIEV
-
$499.00
-
-

Availability : In stock

-

Product Code : #4657

-

Tags : Fashion, Hood, Classic

-
Sleek, polished, and boasting an impeccably modern fit, this blue, 2-but- - ton Lazio suit features a notch lapel, flap pockets, and accompanying flat - front trousers—all in pure wool by Vitale Barberis Canonico. -
    -
  • Dark blue suit for a tone-on-tone look
  • -
  • Regular fit
  • -
  • 100% Cotton
  • -
  • Free shipping with 4 days delivery
  • -
-
-
-
- -
color -

-
-
size -

-
qty -
-

-

- - -
-

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