
Deals Of The Days
+

Boudin Consequat +
+




The 30-inch Apple Cinema HD Display delivers an amazing 2560 x 1600 pixel resolution. Designed specifically for professional,,,, +
+ $45.00 + $55.00 +diff --git a/css/ddsmoothmenu-v.css b/css/ddsmoothmenu-v.css new file mode 100644 index 0000000..d7d8ee2 --- /dev/null +++ b/css/ddsmoothmenu-v.css @@ -0,0 +1,58 @@ +.ddsmoothmenu-v{ +display: none; +} + +.ddsmoothmenu-v ul{ +margin: 0; +padding: 0; +width: 170px; /* Main Menu Item widths */ +list-style-type: none; +font: bold 12px Verdana; +} + +.ddsmoothmenu-v ul li{ +position: relative; +float: none; +} + +/* Top level menu links style */ +.ddsmoothmenu-v ul li a{ +display: block; +overflow: auto; /*force hasLayout in IE7 */ +color: white; +text-decoration: none; +padding: 6px 23px 6px 6px; +border-bottom: 1px solid #778; +border-right: 1px solid #778; +} + +.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{ +background: #1c5a80; /*background of menu items (default state)*/ +color: white; +} + + +.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/ +background: lightblue !important; +color: navy; +} + +.ddsmoothmenu-v ul li a:hover{ +background: lightblue; /*background of menu items during onmouseover (hover state)*/ +color: navy; +} + +/*Sub level menu items */ +.ddsmoothmenu-v ul li ul{ +position: absolute; +width: 170px; /*Sub Menu Items width */ +top: 0; +font-weight: normal; +visibility: hidden; +} + + +/* Holly Hack for IE \*/ +* html .ddsmoothmenu-v ul li { float: left; height: 1%; } +* html .ddsmoothmenu-v ul li a { height: 1%; } +/* End */ \ No newline at end of file diff --git a/css/ddsmoothmenu.css b/css/ddsmoothmenu.css new file mode 100644 index 0000000..7da8982 --- /dev/null +++ b/css/ddsmoothmenu.css @@ -0,0 +1,290 @@ +.ddsmoothmenu{ +font: bold 12px Verdana; +background: #414141; /*background of menu bar (default state)*/ +width: 100%; +display: none; +} + +.ddsmoothmenu ul{ +z-index:100; +margin: 0; +padding: 0; +list-style-type: none; +} + +/*Top level list items*/ +.ddsmoothmenu ul li{ +position: relative; +display: inline; +float: left; +} + +/*Top level menu link items style*/ +.ddsmoothmenu ul li a{ +display: block; +background: #414141; /*background of menu items (default state)*/ +color: white; +padding: 8px 10px; +border-right: 1px solid #778; +color: #2d2b2b; +text-decoration: none; +} + +* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ +display: inline-block; +} + +.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ +color: white; +} + +.ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ +background: black ; +color: white; +} + +.ddsmoothmenu ul li a:hover{ +background: black; /*background of menu items during onmouseover (hover state)*/ +color: white; +} + +/* sub menus */ +.ddsmoothmenu ul li ul{ +position: absolute; +left: -3000px; +display: none; /*collapse all sub menus to begin with*/ +visibility: hidden; +} + +/*Sub level menu list items (alters style from Top level List Items)*/ +.ddsmoothmenu ul li ul li{ +display: list-item; +float: none; +} + +/*All subsequent sub menu levels vertical offset after 1st level sub menu */ +.ddsmoothmenu ul li ul li ul{ +top: 0; +} + +/* Sub level menu links style */ +.ddsmoothmenu ul li ul li a{ +font: normal 13px Verdana; +width: 160px; /*width of sub menus*/ +padding: 5px; +margin: 0; +border-top-width: 0; +border-bottom: 1px solid gray; +} + +/* Holly Hack for IE \*/ +* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ + + +/* ######### CSS classes applied to down and right arrow images ######### */ + +.downarrowclass{ +position: absolute; +top: 12px; +right: 7px; +} + +.rightarrowclass{ +position: absolute; +top: 6px; +right: 5px; +} + +.leftarrowclass{ +margin-right: 5px; +} + +/* ######### CSS for shadow added to sub menus ######### */ + +.ddshadow{ +position: absolute; +left: 0; +top: 0; +width: 0; +height: 0; +background-color: #ccc; /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */ +} + +.toplevelshadow{ +margin: 5px 0 0 5px; /* in NON CSS3 capable browsers gives the offset of the shadow */ +opacity: 0.8; /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */ +} + +.ddcss3support .ddshadow.toplevelshadow { +margin: 0; /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */ +/* opacity: 1; */ /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */ +} + +.ddcss3support .ddshadow { +background-color: transparent; +box-shadow: 5px 5px 5px #aaa; /* box-shadow color generally should be a little darker than that for the NON CSS3 capable browsers background-color */ +-moz-box-shadow: 5px 5px 5px #aaa; +-webkit-box-shadow: 5px 5px 5px #aaa; +} + +/* ######### Mobile menu container CSS ######### */ + +div.ddsmoothmobile{ /* main mobile menu container */ +background: #414141; +color: white; +position: fixed; +top: 0; +left: 0; +width: 200px; /* width of mobile menu */ +height: 300px; +overflow: hidden; +visibility: hidden; +border-radius: 0 0 10px 0; +box-shadow: 0 0 10px gray; +} + +div.ddsmoothmobile a{ +color: white; +text-decoration: none; +} + +div.ddsmoothmobile div.topulsdiv{ /* Single DIV that surrounds all top level ULs before being flattened, or the ULs on the "frontpage" of the menu */ +position: relative; +background: #414141; +overflow-y: auto; +width: 100%; +height: 100%; +} + + +div.ddsmoothmobile ul{ /* style for all ULs in general inside mobile menu */ +list-style: none; +width: 100%; +top: 0; +left: 0; +background: #414141; +margin: 0; +padding: 0; +} + +div.ddsmoothmobile div.topulsdiv ul.submenu{ /* top level ULs style */ +} + + +div.ddsmoothmobile ul.submenu{ /* sub level ULs style */ +position: absolute; +height: 100%; +overflow-y: auto; +} + +div.ddsmoothmobile ul li{ +border-bottom: 1px solid gray; +position: relative; +font-weight: bold; +} + +div.ddsmoothmobile ul li.breadcrumb{ /* breadcrumb LI that's added to the top of every sub level UL */ +cursor: pointer; +padding: 10px; +background: black; +} + +div.ddsmoothmobile ul li a{ +display: block; +padding: 6px; +} + +div.ddsmoothmobile ul li a:hover{ +background: black; +} + +/* ############# Animated Drawer icon (mobile menu toggler) CSS ############# */ + +.animateddrawer{ + font-size: 10px; /* Base font size. Adjust this value to modify size of drawer icon */ + width: 3em; + height: 2.8em; + outline: none; + position: fixed; /* BY default, make toggler fixed on screen */ + display: none; + top: 10px; /* Position at upper right corner */ + right: 10px; + background: white; + z-index: 1000; +} + +.animateddrawer:before, .animateddrawer:after{ + position: absolute; + content: ''; + display: block; + width: 100%; + height: 0.6em; /* height of top and bottom drawer line */ + background: black; + border-radius: 2px; + top: 0; + left: 0; + opacity: 1; + -webkit-transition: all 0.3s ease-in; /* set transition type and time */ + transition: all 0.3s ease-in; +} + +.animateddrawer:after{ + top: auto; + bottom: 0; +} + +.animateddrawer span{ + width: 100%; + height: 0.6em; /* height of middle drawer line */ + background: black; + position: absolute; + top: 50%; + margin-top: -0.3em; /* set this to - half of middle drawer line height */ + border-radius: 2px; + -ms-transform-origin: 50% 50%; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */ + transition: all 0.3s ease-in 0.3s; +} + +.animateddrawer span::after{ + content: ''; + display: block; + width: 100%; + height: 0.6em; /* height of middle drawer line */ + background: black; + border-radius: 2px; + position: absolute; + -ms-transform-origin: 50% 50%; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */ + transition: all 0.3s ease-in 0.3s; +} + +.animateddrawer.open{ +} + +.animateddrawer.open:before{ /* style when .open class is added to button */ + top: 50%; + margin-top: -0.3em; /* set this to - half of top drawer line height */ + opacity: 0; +} + +.animateddrawer.open:after{ /* style when .open class is added to button */ + bottom: 50%; + opacity: 0; +} + +.animateddrawer.open span{ /* style when .open class is added to button */ + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.animateddrawer.open span:after{ /* style when .open class is added to button */ + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); +} diff --git a/css/ecommerce_styles.css b/css/ecommerce_styles.css new file mode 100644 index 0000000..a184395 --- /dev/null +++ b/css/ecommerce_styles.css @@ -0,0 +1,1332 @@ +@charset "utf-8"; +/*Fonts =============================== */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + src: url('../assets/fonts/Roboto-Bold.ttf'); + src: url('../assets/fonts/Roboto-Medium.ttf'); + src: url('../assets/fonts/Roboto-Regular.ttf'); + +} +@font-face { + font-family: 'Gotham'; + font-style: normal; + src: url('../assets/fonts/GothamMedium.ttf'); + + +} +/*common styles ===============================*/ +body { + margin: 0px; + padding: 0px; + background-color: #202020; + font-family: 'Roboto'; +} +ul { + margin: 0px; + padding: 0px; +} +hr { + box-sizing: border-box; + padding: 0px; + margin-top: 10px; + width: 100%; + border-color: #5BB1DF; +} +h1,h2,h3,h4 { + padding: 0px; + margin: 0px; +} +select { + cursor: pointer; +} +select::-ms-expand { + display: none; +} +address { + font-style: normal; +} +button { + cursor: pointer; +} +.item { + text-decoration: none; +} +.stars { + display: flex; + justify-content: space-between; + width: 90px; + margin-bottom: 5px; +} +/* Layout ===============================*/ +.wrapper { + max-width: 1920px; + background-color: #fff; +} +/* Buttons ===============================*/ +/* Deals Of The Days Buttons =============================== */ +.sale_boxes_item_cart_add { + font-family: 'Gotham'; + display: flex; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 150px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 100; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; +} +.sale_boxes_item_cart_add:hover { + background-color: #F6BD32; +} +.sale_boxes_item_cart_favorite { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 37px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; +} +.sale_boxes_item_cart_favorite:hover { + background-color: #F6BD32; +} +.sale_boxes_item_cart_info { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 37px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; +} +.sale_boxes_item_cart_info:hover { + background-color: #F6BD32; +} +/* Small Product card Buttons =============================== */ +.small_product_card_cart_add { + font-family: 'Gotham'; + display: flex; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 125px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 100; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; + +} +.small_product_card_cart_add:hover { + background-color: #F6BD32; +} +.small_product_card_favorite { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 34px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; +} +.small_product_card_favorite:hover { + background-color: #F6BD32; +} +.small_product_card_cart_info { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 34px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b;} +.small_product_card_cart_info:hover { + background-color: #F6BD32; +} +.small_product_card_cart_add img { + margin-right: 5px; + margin-left: 10px; +} +/* Header =============================== */ +.logo { + background-color: #2485B8; +} +.main_logo { + font-size: 30px; +} +.logo h1 { + margin: 0px; + margin-left: 80px; + padding-top: 10px; + padding-bottom: 0px; + line-height: 13px; +} +.logo h4 { + margin: 0px; + margin-left: 100px; + padding-top: 0px; + padding-bottom: 5px; + font-size: 12px +} +.main_header { + background-color: #2485B8; +} +.login_line { + display: flex; + justify-content: space-between; + padding-top: 10px; + max-width: 1220px; + margin-left: auto; + margin-right: auto; +} +.login_line a { + color: white; + padding-bottom: 2px; + padding-top: 2px; + padding-right: 10px; + text-decoration: none; + border-right: 1px solid #ccc; +} +.login_line a:hover { + color: #F6BD32; +} +.login_line li:hover { + color: #F6BD32; +} +.login_line li:nth-of-type(2) { + border: none; +} +.login_line { + color: white; +} +.languge_menu { + display: flex; + width: 240px; + list-style: none; +} +.languge_menu li { + padding-right: 15px; + border-right: 1px solid white; +} +.languge_menu span { + font-size: 10px; +} +.currency_select { + padding-left: 13px; + background-color: #2485B8; + color: white; + appearance: none; + border: none; +} +.currency_select:hover { + color: #F6BD32; +} +.currency_select option { + background-color: white; + color: black; +} +.language_select { + padding-left: 13px; + background-color: #2485B8; + color: white; + appearance: none; + border: none; +} +.language_select:hover { + color: #F6BD32; +} +.language_select option { + background-color: white; + color: black; +} +.account_menu { + display: flex; + width: 460px; + list-style: none; + justify-content: space-around; + font-size: 14px; +} +.account_menu li { + position: relative; +} + +.account_menu span { + font-size: 11px; +} +.account_menu li:last-child a { + border: none; +} + + +/* Account menu =============================== */ +.account_menu .ddsmoothmenu{ + font-family: 'Roboto'; + position: relative; + font-size: 14px; + height: 21px; + background: #2485B8; + display: none; + font-weight: 200; + border-right: 1px solid #ccc; + z-index:1100; +} +.account_menu .ddsmoothmenu ul{ + display: flex; + justify-content: space-around; + margin: 0; + padding: 0; + list-style-type: none; +} + +/*Top level list items*/ +.account_menu .ddsmoothmenu ul li{ + position: relative; + display: inline; + padding: 0px; +} + +/*Top level menu link items style*/ +.account_menu .ddsmoothmenu ul li a{ + display: block; + height: 17px; + background: #2485B8; /*background of menu items (default state)*/ + color: white; + padding-top: 0px; + padding-bottom: 2px; + border-right: none; + text-decoration: none; +} + +* html .account_menu .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ + display: inline-block; +} +.account_menu .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ + color: white; +} +.account_menu .ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ + background: #2485B8 ; + color: #F6BD32; +} +.account_menu .ddsmoothmenu ul li a:hover{ + background: #2485B8; /*background of menu items during onmouseover (hover state)*/ + color: F6BD32; +} + +/* sub menus */ +.account_menu .ddsmoothmenu ul li ul{ + position: absolute; + left: -3000px; + display: none; /*collapse all sub menus to begin with*/ + visibility: hidden; + text-transform: none; +} +/*Sub level menu list items (alters style from Top level List Items)*/ +.account_menu .ddsmoothmenu ul li ul li{ + display: list-item; + float: none; + text-transform: none; +} + +/*All subsequent sub menu levels vertical offset after 1st level sub menu */ +.account_menu .ddsmoothmenu ul li ul li ul{ + top: 0; +} + +/* Sub level menu links style */ +.account_menu .ddsmoothmenu ul li ul li a{ + font: normal 13px Roboto; + width: 160px; /*width of sub menus*/ + padding: 5px; + margin: 0; + border-top-width: 0; + /* border-bottom: 1px solid white; */ + background: #195e80 ; /*background of menu items */ + color: white; + box-shadow: 0 3px 5px #195e80 ; + +} +.account_menu .ddsmoothmenu ul li ul li a:hover { + /* font: normal 14px Roboto; */ + background: #154d6a; /*background of menu items during onmouseover (hover state)*/ + color: #F6BD32; + box-shadow: 0 0px 5px #154d6a; + text-decoration: underline; +} +.account_menu .ddsmoothmenu ul li ul li a:selected; { + background: blue !important; /*background of menu items during onmouseover (hover state)*/ + color: white; +} + +/* Holly Hack for IE \*/ +* html .account_menu .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ + + +/* ######### CSS classes applied to down and right arrow images ######### */ + +.account_menu .downarrowclass{ + position: absolute; + top: 4px; + right: 7px; +} +.account_menu .rightarrowclass{ + position: absolute; + top: 6px; + right: 5px; +} +.account_menu .leftarrowclass{ + margin-right: 5px; +} + +/* ######### CSS for shadow added to sub menus ######### */ + +.account_menu .ddshadow{ + position: absolute; + left: 0; + top: 0; + width: 0; + height: 0; + background-color: #ccc; /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */ +} + +.account_menu .toplevelshadow{ + margin: 5px 0 0 5px; /* in NON CSS3 capable browsers gives the offset of the shadow */ + opacity: 0.8; /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */ +} + +.account_menu .ddcss3support .ddshadow.toplevelshadow { + margin: 0; /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */ +/* opacity: 1; */ /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */ +} +.account_menu .ddcss3support .ddshadow { + background-color: transparent; + box-shadow: 5px 5px 5px #aaa; /* box-shadow color generally should be a little darker than that for the NON CSS3 capable browsers background-color */ + -moz-box-shadow: 5px 5px 5px #aaa; + -webkit-box-shadow: 5px 5px 5px #aaa; +} + +.wish_link::before { + content: url("../assets/images/header/heart_header.png"); + position: absolute; + top: 1px; + left: -25px; +} +.wish_link:hover::before { + content: url("../assets/images/header/heart_header_hover.png"); +} +.check_link::before { + content: url("../assets/images/header/checkbox.png"); + position: absolute; + top: 1px; + left: -23px; +} +.check_link:hover::before { + content: url("../assets/images/header/checkbox_hover.png"); +} +.log_link::before { + content: url("../assets/images/header/login.png"); + position: absolute; + + left: -22px; +} +.log_link:hover::before { + content: url("../assets/images/header/login_hover.png"); +} +/* Search'n'Cart ===============================*/ +.search_n_cart { + width: 1220px; + margin-left: auto; + margin-top: 50px; + margin-bottom: 50px; +} +.search_n_cart_content { + width: 870px; + display: flex; + justify-content: space-between +} +.search_box { + display: flex; + height: 40px; +} +.search_box input { + width: 272px; + padding: 13px; + border: none; +} +.search_box span { + background-color: white; +} +.search_box button { + width: 45px; + border: none; + background-color: red; +} +.select_all_categories { + padding-left: 13px; + padding-right: 23px; + width: 100%; + height: 100%; + appearance: none; + border: none; + color: #666; +} +.select_all_categories opton:nth-of-type(2)::before { + content: '65'; +} +.select_all_categories_content { + position: relative; + border-right: 1px solid #aaa; + color: #111; +} +.select_all_categories_content::after { + content: "▼"; + font-size: 11px; + position: absolute; + bottom:12px; + right: 10px; + color: gray; +} +.cart { + width: 150px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #aaa; + color: #eee; + font-size: 14px; + text-decoration: none; +} +.cart:hover { + text-decoration: underline; +} +.cart_caption { + text-transform: uppercase; + font-size: 13px; +} +/* Main menu ===============================*/ +.main_menus_block { + display: flex; + align-items: flex-end; + max-width: 1220px; + margin-left: auto; + margin-right: auto; + padding-bottom: 10px; + list-style: none; + justify-content: space-between; +} +.main_all_categories { + width: 270px; + background-color: #F6BD32; + border: 0; + padding: 8px 10px 8px 10px; + text-align: center; + font-size: 20.9px; + line-height: 33px; + font-weight: 700; + letter-spacing: 0.01em; + color: #000; + text-decoration:none; +} +.main_all_categories:hover { + color: #000; + background-color: #E09F0A; +} +.main_all_categories_content { + width: 100%; + display: flex; + align-items: center; + justify-content: space-around; +} +.main_all_categories_content span { + font-family: 'Gotham'; + font-weight: 1; + font-size: 20px; + text-transform: none; +} +.simbols_all_categories { + transform: rotate(90deg); + +} +.menu_new { + position: absolute; + bottom: 80%; + left: 45%; + width: 43px; + height: 32px; + background-image: url("../assets/images/header/menu_new.png"); + z-index: 5001; + pointer-events: none; +} +.menu_new:hover { + position: absolute; + bottom: 80%; + left: 45%; + width: 43px; + height: 32px; + background-image: url("../assets/images/header/menu_count.png"); +} +.menu_new span { + display: block; + text-align: center; + color: white; + width: 70%; + font: normal 12px Verdana; + margin: auto; + margin-top: 3px; +} +.menu_count { + position: absolute; + bottom: 80%; + left: 45%; + width: 43px; + height: 32px; + background-image: url("../assets/images/header/menu_count.png"); + pointer-events: none; +} +.menu_count span { + display: block; + text-align: center; + color: white; + width: 70%; + font: normal 12px Verdana; + margin: auto; + margin-top: 3px; +} +.main_menus_block .ddsmoothmenu{ + font: bold 12px Verdana; + background: #2485B8; + width: 600px; + display: none; +} +.main_menus_block .ddsmoothmenu ul{ + display: flex; + justify-content: space-around; + z-index:100; + margin: 0; + padding: 0; + list-style-type: none; + text-transform: uppercase; + font: normal 15px Verdana; +} + +/*Top level list items*/ +.main_menus_block .ddsmoothmenu ul li{ + position: relative; + display: inline; + +/* float: left; */ +} + +/*Top level menu link items style*/ +.main_menus_block .ddsmoothmenu ul li a{ + display: block; + background: #2485B8; /*background of menu items (default state)*/ + color: white; + padding: 8px 10px; + border-right: none; + text-decoration: none; +} +* html .main_menus_block .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ + display: inline-block; +} +.main_menus_block .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ + color: white; +} +.main_menus_block .ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ + background: #2485B8 ; + color: #F6BD32; +} +.main_menus_block .ddsmoothmenu ul li a:hover{ + background: #2485B8; /*background of menu items during onmouseover (hover state)*/ + color: F6BD32; +} + +/* sub menus */ +.main_menus_block .ddsmoothmenu ul li ul{ + position: absolute; + left: -3000px; + display: none; /*collapse all sub menus to begin with*/ + visibility: hidden; + text-transform: none; +} +.main_menus_block .ddsmoothmenu ul li ul li a:hover { + background: #18587A; /*background of menu items during onmouseover (hover state)*/ + color: white; +} +.main_menus_block .ddsmoothmenu ul li ul li a:selected; { + background: #18587A !important; /*background of menu items during onmouseover (hover state)*/ + color: white; +} + +/*Sub level menu list items (alters style from Top level List Items)*/ +.main_menus_block .ddsmoothmenu ul li ul li{ + display: list-item; + float: none; + text-transform: none; +} + +/*All subsequent sub menu levels vertical offset after 1st level sub menu */ +.main_menus_block .ddsmoothmenu ul li ul li ul{ + top: 0; +} + +/* Sub level menu links style */ +.main_menus_block .ddsmoothmenu ul li ul li a{ + font: normal 13px Verdana; + width: 160px; /*width of sub menus*/ + padding: 5px; + margin: 0; + border-top-width: 0; + border-bottom: 1px solid black; +} + +/* Holly Hack for IE \*/ +* html .main_menus_block .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ + + +/* ######### CSS classes applied to down and right arrow images ######### */ + +.main_menus_block .downarrowclass{ + position: absolute; + top: 12px; + right: 7px; +} + +.main_menus_block .rightarrowclass{ + position: absolute; + top: 6px; + right: 5px; +} + +.main_menus_block .leftarrowclass{ + margin-right: 5px; +} + +/* ######### CSS for shadow added to sub menus ######### */ + +.main_menus_block .ddshadow{ + position: absolute; + left: 0; + top: 0; + width: 0; + height: 0; + background-color: #ccc; /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */ +} +.main_menus_block .toplevelshadow{ + margin: 5px 0 0 5px; /* in NON CSS3 capable browsers gives the offset of the shadow */ + opacity: 0.8; /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */ +} +.main_menus_block .ddcss3support .ddshadow.toplevelshadow { + margin: 0; /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */ +/* opacity: 1; */ /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */ +} +.main_menus_block .ddcss3support .ddshadow { + background-color: transparent; + box-shadow: 5px 5px 5px #aaa; /* box-shadow color generally should be a little darker than that for the NON CSS3 capable browsers background-color */ + -moz-box-shadow: 5px 5px 5px #aaa; + -webkit-box-shadow: 5px 5px 5px #aaa; +} +.banner img { + width: 100%; +} +/* Home page header ===============================*/ +.go_quickly { + background-color: #444540; +} +.go_quickly_content { + display: flex; + justify-content: space-around; + width: 880px; + margin-left: auto; + margin-right: auto; + padding-bottom: 16px; + padding-top: 21px; + font-size: 14px; +} +.go_quickly_content span { + color: #F6BD32; +} +.go_quickly_menu { + display: flex; + width: 750px; + list-style: none; + justify-content: space-around; +} +.go_quickly a { + text-decoration: none; + color: #aaa; +} +.go_quickly a:hover { + text-decoration: underline; + color: #eee; +} + +/* Banner =============================== */ +.banner { + width: 100%; +} +.banner .slick-prev, +.banner .slick-next { + height: 80px; +} +.banner .slick-prev { + left: 120px; +} +.banner .slick-next { + right: 190px; +} +.banner .slick-prev:before { + content: url("../assets/images/header/left_arrow.png"); +} +.banner .slick-next:before { + content: url("../assets/images/header/right_arrow.png"); +} +/* Advantages =============================== */ +.advantages { + background-color: #E6E7E8; +} +.advantages_content { + padding-bottom: 20px; + padding-top: 20px; +} +.advantages_menu { + display: flex; width: 1100px; + margin-left: auto; + margin-right: auto; + list-style: none; + justify-content: space-around; +} +.advantages_menu a { + text-decoration: none; + text-transform: uppercase; + padding-left: 33px; + color: black; + font-weight: 800; +} +.advantages_menu a:hover { + text-decoration: underline; +} +.advantages_menu li { + border-left: 2px solid #aaa; + padding-bottom: 3px; + padding-top: 3px; +} +.advantages_menu li:nth-of-type(1) { + border-left: none; +} +/* Main ===============================*/ +main { + width: 1220px; + background-color: white; + margin-left: auto; + margin-right: auto; +} +.main_content { + width: 100%; + margin-left: auto; + margin-right: auto; +} +/* Deals Of The Days ===============================*/ +.sale_boxes { + display: flex; + justify-content: space-between; + padding-top: 40px; + padding-bottom: 40px; +} +.sale_boxes_item { + position: relative; + width: 600px; + height: 437px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.sale_ribbon { + position: absolute; + left: 487px; + bottom: 335px; +} +.sale_boxes_item_content { + display: flex; +} +.sale_boxes_item_img { + position: relative; +} +.sale_20percent { + position: absolute; + left: 20px; + bottom: 280px; +} +.sale_boxes_item h3 { + font-size: 24px; + line-height: 14px; + font-weight: 600; + color: #1f1f1f; + padding-bottom: 40px; + padding-top: 50px; + padding-left: 20px; +} +.sale_boxes_item h4 { + font-size: 24px; + line-height: 14px; + font-weight: 500; + color: #1f1f1f; + padding-bottom: 15px; +} +.sale_boxes_item p { + font-size: 15px; + line-height: 24px; + font-weight: 400; + color: #424040; +} +.sale_boxes_item_text { + width: 240px; +} +.sale_boxes_item_price { + font-size: 26.4px; + line-height: 24px; + font-weight: 400; + color: #f73b48; +} +.sale_boxes_item_old_price { + font-size: 18.1px; + text-decoration: line-through; + color: #504f4f; +} +.sale_boxes_item_cart { + display: flex; + justify-content: space-between; + margin-top: 15px; +} +.sale_boxes_item_cart_add img { + margin-right: 5px; + margin-left: 10px; +} +/* Featured Products =============================== */ +.sale_boxes_2items { + position: relative; + width: 570px; + height: 437px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.sale_boxes_2items_sale_ribbon { + position: absolute; + left: 455px; + bottom: 335px; +} +.sale_boxes_2items_items_set { + display: flex; + justify-content: space-around; + width: 90%; + margin-left: auto; + margin-right: auto; +} +.sale_boxes_2items h3 { + font-size: 24px; + line-height: 14px; + font-weight: 400; + color: #0a0909; + padding-bottom: 35px; + padding-top: 35px; + padding-left: 20px; +} +.sale_boxes_2items h4 { + font-size: 20px; + line-height: 24px; + font-weight: 400; + color: #0b0909; +} +.sale_20percent_sale_boxes_2items { + position: absolute; + right: 205px; + bottom: 265px; +} +/* Small product card =============================== */ +.small_product_card { + display: flex; + flex-direction: column; + width: 220px; + position: relative; +} +.product_img { + padding-bottom: 40px; +} +.small_product_card_text { + padding-left: 5px; +} +.small_product_card_text h4 { + margin-bottom: 15px; + font-size: 22px; + line-height: 24px; + font-weight: 400; + color: #111010; +} +.small_product_card_price { + font-size: 20.3px; + line-height: 19px; + font-weight: 400; + color: #f73b48; +} +.small_product_card_old_price { + font-size: 11.3px; + text-decoration: line-through; + color: #0d0c0d; +} +.small_product_card_cart { + display: flex; + width: 210px; + justify-content: space-between; + margin-top: 15px; +} +/* Carusel with dots ===============================*/ +.sale_carusel_nav_dots { + width: 100%; + height: 437px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.sale_carusel_nav_dots_set { + display: flex; + margin-left: auto; + margin-right: auto; + padding-top: 30px; +} +.sale_carusel_nav_dots_set .slick-dots li button:before { + font-size: 18px; +} +.sale_carusel_nav_dots_set .slick-dots li.slick-active button:before +{ + color: red; +} +.sale_carusel_nav_dots_item { + width: 271px; + margin-bottom: 30px; + margin-top: 30px; + margin-left: 20px; + margin-right: 30px; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.sale_carusel_nav_dots_item:hover { + box-shadow: 0px 0px 16px 5px #ccc; +} +.sale_carusel_nav_dots_item h3 { + padding-bottom: 15px; + padding-top: 15px; + font-size: 16px; + line-height: 14px; + font-weight: 400; + color: #0a0909; + text-transform: uppercase; + text-align: center; + background-color: #fff; +} +/* Carusel electronics =============================== */ +.sale_carusel_electronics { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 40px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.electronics { + height: 417px; + justify-content: flex-end; + padding-bottom: 20px; + border: 1px solid white; +} +.electronics:hover { + border: 1px solid #ccc; +} +.new { + position: absolute; + left: 100px; + bottom: 330px; +} +/* Carusel clothes =============================== */ +.clothes_slider { + display: flex; + width: 100%; + height: 439px; + margin-top: 40px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.carousel_head_img { + width: 296px; + height: 418px; +} +.sale_carusel_clothes { + display: flex; + justify-content: space-between; + /* margin-left: auto; */ + /* margin-right: auto; */ + width: 924px; + +} +.clothes { + justify-content: flex-end; + height: 417px; + padding-bottom: 20px; + border: 1px solid white; +} +.clothes:hover { + border: 1px solid #ccc; +} + +/* Two items boxes =============================== */ +.two_items_boxes { + display: flex; + justify-content: space-between; + padding-top: 40px; + padding-bottom: 40px; +} + +/* Two fotos box =============================== */ +.two_foto_box { + display: flex; + justify-content: space-around; + width: 593px; + height: 374px; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.two_foto_box_item { + padding-top: 20px; +} +.two_foto_box_item h3{ + font-size: 25px; + padding-top:22px; + line-height: 24px; + font-weight: 400; + color: #2b2b2b; +} +/* Two items box =============================== */ +.two_item_box { + display: flex; + justify-content: space-around; + width: 593px; + height: 354px; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); + padding-bottom: 20px; +} +.two_items_box { + justify-content: flex-end; +} +/* Footer =============================== */ +footer { + background-color: #2385b8; + margin-top: 120px; + color: #cce4f0; +} +.socials_container { + position: relative; + width: 1220px; + margin-left: auto; + margin-right: auto; + color: white; +} +/* Socials =============================== */ +.footer_socials { + position: absolute; + top: -86px; + width: 100%; + height: 173px; + background-color: #32a3dd; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); + border-radius: 30px; +} +.social_content { + display: flex; + align-items: center; + justify-content: space-around; + width: 90%; + margin-left: auto; + margin-right: auto; + height: 100%; +} +.socials_newsletter { + display: flex; + align-items: center; +} +.socials_newsletter a { + opacity: 1.0; + transition: 0.5s; +} +.socials_newsletter a:hover { + opacity: 0.6; +} +.newsletter_text { + padding-left: 20px; + font-size: 14px; +} +.newsletter_text span { + display: block; +} +.newsletter_text span:first-child { + text-transform: uppercase; + padding-bottom: 7px; +} +.socials_search { + display: flex; +} +.socials_search input { + width: 272px; + padding: 13px; + border: none; + text-transform: uppercase; +} +.socials_search button { + width: 55px; + border: none; + background-color: red; +} +.socials_links { + width: 150px; + display: flex; + justify-content: space-around; + list-style: none; +} +.socials_links a { + opacity: 0.9; + transition: 0.5s; +} +.socials_links a:hover { + opacity: 0.6; +} +/* About =============================== */ +.about { + display: flex; + justify-content: space-between; + padding-top: 176px; + width: 1220px; + font-size: 14px; + line-height: 25px; + font-weight: 100; + margin-left: auto; + margin-right: auto; +} +.about h3 { + text-transform: uppercase; + font-size: 19px; + font-weight: 400; + color: white; +} +.about_shop { + flex-basis:300px; +} +.about_info { + flex-basis:200px; +} +.about_info_links { + list-style: none; +} +.about_info_links li { + line-height: 20px; +} +.about_info_links a { + text-decoration: none; + color: inherit; +} +.about_info_links a:hover { + color: white; + text-decoration: underline; +} +.about_services { + flex-basis:200px; +} +.about_services li { + line-height: 20px; +} +.about_services a { + text-decoration: none; + color: inherit; +} +.about_services a:hover { + color: white; + text-decoration: underline; +} +.about_services_links { + list-style: none; +} +.about_contact { + flex-basis:300px; +} +.hr_footer { + margin-top: 40px; + margin-bottom: 30px; +} +/* Footer product links =============================== */ +.products_links { + width: 1000px; + margin-left: auto; + margin-right: auto; + padding-bottom: 35px; +} +.products_links_items { + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style: none; + +} +.products_links_items a { + text-decoration: none; + color: inherit; + padding-left: 5px; + padding-right: 5px; + border-right: 1px solid #dfe0e1; + font-size: 14px; + line-height: 18px; + font-weight: 400; +} +.products_links_items a:hover { + text-decoration: underline; + color: white; +} +.credits { + width: 20%; + margin-top: 30px; + margin-left: auto; + margin-right: auto; + font-size: 12px; +} +.credits a { + color: white; +} +.credits a:hover { + color: yellow; +} + + + diff --git a/css/fonts/slick.eot b/css/fonts/slick.eot new file mode 100644 index 0000000..2cbab9c Binary files /dev/null and b/css/fonts/slick.eot differ diff --git a/css/fonts/slick.svg b/css/fonts/slick.svg new file mode 100644 index 0000000..b36a66a --- /dev/null +++ b/css/fonts/slick.svg @@ -0,0 +1,14 @@ + + + diff --git a/css/fonts/slick.ttf b/css/fonts/slick.ttf new file mode 100644 index 0000000..9d03461 Binary files /dev/null and b/css/fonts/slick.ttf differ diff --git a/css/fonts/slick.woff b/css/fonts/slick.woff new file mode 100644 index 0000000..8ee9972 Binary files /dev/null and b/css/fonts/slick.woff differ diff --git a/css/megadroplinemenu_ecomm.css b/css/megadroplinemenu_ecomm.css new file mode 100644 index 0000000..040b91f --- /dev/null +++ b/css/megadroplinemenu_ecomm.css @@ -0,0 +1,333 @@ +#megadroplinemenu { + font: bold 16px 'Bitter', sans-serif; + /* use Google font */ + position: relative; + z-index: 1000; + background: #DE9E0A; + /* border: 1px solid #ddd; */ + width: 270px; +} + +#megadroplinemenu * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* fontawesome style. Remove if not using FA icons */ +#megadroplinemenu .fa { + font-size: 1.5em; +} + +#megadroplinemenu .fa-twitter { + color: #00ACEE; +} + +/* Top Level Menu */ +#megadroplinemenu ul { + z-index: 100; + margin: 0; + padding: 0; + position: relative; + display: flex; + flex-wrap: wrap; + list-style: none; + -webkit-perspective: 1000px; + perspective: 1000px; + -webkit-perspective-origin: 50% 0%; + perspective-origin: 50% 0%; +} + +/* Top level list items */ +#megadroplinemenu > ul li { + display: inline-block; + text-transform: uppercase; +} + +/* right align last two LI elements, Change (2) above to diff number if desired */ +#megadroplinemenu > ul li:nth-last-of-type(2) { + margin-left: auto; + border-left: none; +} + +/* Top level menu items link style */ +#megadroplinemenu > ul > li a { + display: inline-block; + display: flex; + position: relative; + height: 100%; + /* background of menu items (default state) */ + background: #F6BD32; + color: black; + padding: 14px 10px; + border-right: none; + color: #2d2b2b; + text-decoration: none; + font-size: 12px; +} + +/* Top level menu items link style on hover and when active */ +#megadroplinemenu > ul li:hover > a { + background: #DE9E0A; + box-shadow: 0 3px 15px #DE9E0A; +} + +/* Sub ULs style */ +#megadroplinemenu > ul li ul { + position: absolute; + left: -5000px; + top: auto; + opacity: 0; + width: 500px; + transform: rotateX(-70deg); + backface-visibility: hidden; + transform-origin: 50% 0; + background: #DE9E0A; + visibility: hidden; + border: none; + border-width: 1px 0 1px 1px; + box-shadow: 0 3px 15px #DE9E0A; + -webkit-transition: opacity .3s, -webkit- transform .5s, visibility 0s .3s, left 0s .3s; + transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s; +} + +/* First Sub Levels UL style on hover */ +#megadroplinemenu > ul li:hover > ul { + visibility: visible; + left: 0; + opacity: 1; + transform: rotateX(0deg); + -webkit-transition: opacity .5s, -webkit-transform .5s; + transition: opacity .5s, transform .5s; +} + +/* Sub level Menu list items */ +#megadroplinemenu > ul li ul li { + display: inline-block; + flex: 1; + min-width: 140px; + /* min width of sub menu LIs */ +} + +/* Sub Levels link style on hover and when active */ +#megadroplinemenu ul ul li:hover > a { + background: #F6BD32; + text-decoration: underline;; +} + +/* Sub Levels UL style on hover */ +#megadroplinemenu ul ul li:hover > ul { + left: 0; +} + +/* Sub level menu links style */ +#megadroplinemenu ul li ul li a { + font: normal 11px 'Bitter', sans-serif; + padding: 10px; + margin: 0; + background: #DE9E0A; + color: black; + display: block; + font-weight: bold; + width: 100%; + height: 100%; +} + +/* Sub level List Links Descriptions */ +#megadroplinemenu > ul li ul li a div { + text-transform: none; + padding-top: 5px; + font-size: 90%; + color: black; + font-weight: normal; + line-height: 1.5; +} + +/* LIs with a sub UL style */ +#megadroplinemenu ul li > a { + /* add padding to accomodate arrow inside LIs */ + padding-right: 25px; +} + +/* LIs with NO sub UL style */ +#megadroplinemenu ul li > a:only-child { + /* undo padding for non submenu LIs */ + padding-right: 10px; +} + +/* Arrow for LIs with sub ULs */ +#megadroplinemenu ul li > a:after { + /* add arrow inside LIs */ + content: ""; + position: absolute; + height: 0; + width: 0; + border: 5px solid transparent; + border-top-color: black; + top: 19px; + right: 8px; +} + +/* LIs with NO sub UL pseudo class */ +/* remove drop down arrow */ +#megadroplinemenu ul li > a:only-child:after, #megadroplinemenu ul li.noarrow > a:after { + /* undo arrow for non submenu LIs */ + display: none; +} + +#megadroplinemenu ul li.noarrow > a { + padding-right: 10px; +} + +#searchtoggler input { + width: 100%; + font-weight: bold; + font-size: 36px; + padding: 5px; +} + +/* Uneven Line Menu */ +div#burgertoggler { + width: 40px; + /* keep width/height ratio to 1.53 if changing dimensions */ + height: 26px; + margin-bottom: 2em; + position: absolute; + background: DE9E0A; + right: 10px; + /* position toggler to the right of page */ + top: 10px; + display: flex; + cursor: pointer; + flex-direction: column; + justify-content: space-between; + visibility: hidden; + z-index: 100000; + transition: none; +} + +div#burgertoggler > div { + width: 80%; + height: 4px; + background: black; + transform-origin: 0 50%; +} + +div#burgertoggler > div.line1 { + width: 80%; +} + +div#burgertoggler > div.line2 { + width: 100%; +} + +div#burgertoggler.open div.line1 { + transform: rotate(45deg); +} + +div#burgertoggler.open div.line2 { + opacity: 0; + transform: translate3d(-10px,0,0); +} + +div#burgertoggler.open div.line3 { + transform: rotate(-45deg); +} + +/* ####### responsive layout CSS ####### */ +@media (max-width: 680px) { + div#burgertoggler { + visibility: visible; + } + + div#burgertoggler > div { + transition: all .5s; + } + + #megadroplinemenu { + visibility: hidden; + position: fixed; + left: 0; + top: 0; + opacity: 0; + width: 100%; + height: 100%; + transform: scale(.8); + transition: transform .3s, opacity .3s; + } + + #megadroplinemenu.open { + visibility: visible; + opacity: 1; + transform: scale(1); + overflow: auto; + transition: transform .3s, opacity .3s; + } + + #megadroplinemenu > ul { + display: block; + font-size: 18px; + } + + #megadroplinemenu > ul li { + display: block; + } + + /* Undo Arrow for LIs with sub ULs */ + #megadroplinemenu ul li > a:after { + /* add arrow inside LIs */ + display: none; + } + + /* Sub ULs style */ + #megadroplinemenu > ul li ul { + position: static; + display: block; + background: DE9E0A; + visibility: visible; + transform: rotateX(-90deg); + } + + #megadroplinemenu > ul li ul li { + display: block; + } + + #megadroplinemenu.open > ul li ul { + transform: rotateX(0deg); + opacity: 1; + transition: all .3s .3s; + } + + #megadroplinemenu > ul > li a { + display: block; + } + + /* Sub level menu links style */ + #megadroplinemenu ul li ul li a { + height: auto; + padding: 20px; + font-weight: bold; + font-size: 16px; + } + + /* Undo Top level menu items link style on hover for touch devices */ + html.can-touch #megadroplinemenu > ul li:hover > a { + background: transparent; + } + + /* Undo Sub Levels link style on hover and when active for touch devices */ + html.can-touch #megadroplinemenu ul ul li:hover > a { + background: transparent; + color: red; + } + + #megadroplinemenu ul li ul li a div { + font-weight: normal; + } +} + +@media (max-width: 500px) { + /* Sub level menu links style */ #megadroplinemenu ul li ul li a div { + display: none; + } +} diff --git a/css/slick-theme.css b/css/slick-theme.css new file mode 100644 index 0000000..6af3237 --- /dev/null +++ b/css/slick-theme.css @@ -0,0 +1,206 @@ +@charset 'UTF-8'; +/* Slider */ +.slick-loading .slick-list +{ + background: #fff url('./ajax-loader.gif') center center no-repeat; +} + +/* Icons */ +@font-face +{ + font-family: 'slick'; + font-weight: normal; + font-style: normal; + + src: url('./fonts/slick.eot'); + src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); +} +/* Arrows */ +.slick-prev, +.slick-next +{ + font-size: 0; + line-height: 0; + + position: absolute; + top: 50%; + + display: block; + + z-index: 100; + + width: 20px; + height: 20px; + padding: 0; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + + cursor: pointer; + + color: transparent; + border: none; + outline: none; + background: transparent; +} +.slick-prev:hover, +.slick-prev:focus, +.slick-next:hover, +.slick-next:focus +{ + color: transparent; + outline: none; + background: transparent; +} +.slick-prev:hover:before, +.slick-prev:focus:before, +.slick-next:hover:before, +.slick-next:focus:before +{ + opacity: 1; +} +.slick-prev.slick-disabled:before, +.slick-next.slick-disabled:before +{ + opacity: .25; +} + +.slick-prev:before, +.slick-next:before +{ + font-family: 'slick'; + font-size: 20px; + line-height: 1; + + opacity: .75; + color: white; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.slick-prev +{ + left: -1px; +} +[dir='rtl'] .slick-prev +{ + right: -25px; + left: auto; +} +.slick-prev:before +{ + content: '←'; +} +[dir='rtl'] .slick-prev:before +{ + content: '→'; +} + +.slick-next +{ + right: -25px; +} +[dir='rtl'] .slick-next +{ + right: auto; + left: -25px; +} +.slick-next:before +{ + content: '→'; +} +[dir='rtl'] .slick-next:before +{ + content: '←'; +} + +/* Dots */ +.slick-dotted.slick-slider +{ + margin-bottom: 30px; +} + +.slick-dots +{ + position: absolute; + bottom: -25px; + + display: block; + + width: 100%; + padding: 0; + margin: 0; + + list-style: none; + + text-align: center; +} +.slick-dots li +{ + position: relative; + + display: inline-block; + + width: 20px; + height: 20px; + margin: 0 5px; + padding: 0; + + cursor: pointer; +} +.slick-dots li button +{ + font-size: 0; + line-height: 0; + + display: block; + + width: 20px; + height: 20px; + padding: 5px; + + cursor: pointer; + + color: transparent; + border: 0; + outline: none; + background: transparent; +} +.slick-dots li button:hover, +.slick-dots li button:focus +{ + outline: none; +} +.slick-dots li button:hover:before, +.slick-dots li button:focus:before +{ + opacity: 1; +} +.slick-dots li button:before +{ + font-family: 'slick'; + font-size: 6px; + line-height: 20px; + + position: absolute; + top: 0; + left: 0; + + width: 20px; + height: 20px; + + content: '•'; + text-align: center; + + opacity: .25; + color: black; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.slick-dots li.slick-active button:before +{ + opacity: .75; + color: black; +} diff --git a/css/slick.css b/css/slick.css new file mode 100644 index 0000000..57477e8 --- /dev/null +++ b/css/slick.css @@ -0,0 +1,119 @@ +/* Slider */ +.slick-slider +{ + position: relative; + + display: block; + box-sizing: border-box; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-touch-callout: none; + -khtml-user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} + +.slick-list +{ + position: relative; + + display: block; + overflow: hidden; + + margin: 0; + padding: 0; +} +.slick-list:focus +{ + outline: none; +} +.slick-list.dragging +{ + cursor: pointer; + cursor: hand; +} + +.slick-slider .slick-track, +.slick-slider .slick-list +{ + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track +{ + position: relative; + top: 0; + left: 0; + + display: block; + margin-left: auto; + margin-right: auto; +} +.slick-track:before, +.slick-track:after +{ + display: table; + + content: ''; +} +.slick-track:after +{ + clear: both; +} +.slick-loading .slick-track +{ + visibility: hidden; +} + +.slick-slide +{ + display: none; + float: left; + + height: 100%; + min-height: 1px; +} +[dir='rtl'] .slick-slide +{ + float: right; +} +.slick-slide img +{ + display: block; +} +.slick-slide.slick-loading img +{ + display: none; +} +.slick-slide.dragging img +{ + pointer-events: none; +} +.slick-initialized .slick-slide +{ + display: block; +} +.slick-loading .slick-slide +{ + visibility: hidden; +} +.slick-vertical .slick-slide +{ + display: block; + + height: auto; + + border: 1px solid transparent; +} +.slick-arrow.slick-hidden { + display: none; +} diff --git a/css/ui.totop_e_commerce.css b/css/ui.totop_e_commerce.css new file mode 100644 index 0000000..af3de57 --- /dev/null +++ b/css/ui.totop_e_commerce.css @@ -0,0 +1,36 @@ +/* +|-------------------------------------------------------------------------- +| UItoTop jQuery Plugin 1.2 +| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/ +|-------------------------------------------------------------------------- +*/ + +#toTop { + display:none; + text-decoration:none; + position:fixed; + bottom:200px; + right:190px; + overflow:hidden; + width:51px; + height:51px; + border:none; + text-indent:100%; + background:url(../img/ui.totop.png) no-repeat left top; +} + +#toTopHover { + background:url(../img/ui.totop.png) no-repeat left -51px; + width:51px; + height:51px; + display:block; + overflow:hidden; + float:left; + opacity: 0; + -moz-opacity: 0; + filter:alpha(opacity=0); +} + +#toTop:active, #toTop:focus { + outline:none; +} \ No newline at end of file diff --git a/ecommerce_design.html b/ecommerce_design.html new file mode 100644 index 0000000..a46e1e7 --- /dev/null +++ b/ecommerce_design.html @@ -0,0 +1,920 @@ + + +
+The 30-inch Apple Cinema HD Display delivers an amazing 2560 x 1600 pixel resolution. Designed specifically for professional,,,, +
+ $45.00 + $55.00 +