From e8f1aa612c6d2268f3398422b747cc9499cd8e1e Mon Sep 17 00:00:00 2001 From: Antonov Alexey Date: Tue, 7 Feb 2017 13:27:49 +0500 Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- images/h-view.jpg | Bin 0 -> 1083 bytes images/stars/goldFullStar.png | Bin 0 -> 539 bytes images/stars/goldHalfStar.png | Bin 0 -> 608 bytes images/stars/grayFullStar.png | Bin 0 -> 240 bytes images/stars/grayHalfStar.png | Bin 0 -> 201 bytes images/v-view.jpg | Bin 0 -> 1217 bytes index.css | 275 ++++++++++++++++++++++ index.html | 427 ++++++++++++++++++++++++++++++++++ 8 files changed, 702 insertions(+) create mode 100644 images/h-view.jpg create mode 100644 images/stars/goldFullStar.png create mode 100644 images/stars/goldHalfStar.png create mode 100644 images/stars/grayFullStar.png create mode 100644 images/stars/grayHalfStar.png create mode 100644 images/v-view.jpg diff --git a/images/h-view.jpg b/images/h-view.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ecc148c3cfc9b7b1f9cd764983da95a13f7bc9f1 GIT binary patch literal 1083 zcmex= z&EU+y#K;IjP{7Q}3<7K{EX=IzZ0zhH%)!ac$-%+J!OqUb%f-db0|e}xeEhsTd>}T+ z5Ri6|E+FFJVCMj-APxLKz#z!MAi^NR%&5e`B*@4t$oT&VgFMi!tUw=uJOu@eOw25- zY(OV*aRU`>6#zP)nVAXbSXLGmpz2znJOhg$tB|6hBb#twBD+$dh*9Ijg&fLG8xM*G zUHqV8oK)1r$t5N(At|M*rmmr>WnyY(ZeeNV?BeR??&0Yb91<+v*#~fzWVs-^OvvRzW@073*;|G24;x2;66k1mmttz zOu#r`VF&q(k*OSrnFU!`6%E;h90S=C3x$=88aYIqCNA7~kW<+>=!0ld(M2vX6_bam zA3ef#=;{9ONH8_>x3{3ffK`&-$2Y_!*&f3SP{_8;>3OS2|r z+%xo7k3P55^h!~;#1r3j57T;=sQdP_>&o3fZvP{yp6~O22F+DJ{{ClZG4K7)@YAZn ze&P8W+TZ#=hQH1KtzHrQNW6ES#E<3&_dEAEemlRd!amwq`mgfIJ@f9_8=Peks{3X! zDRGzT&$O64iKKAG{|qeYS4-Yz|Kr^J;ofV{A6Fmo-%|FU{M-N3kJhy}?nm7J(JZy} zfnAFEdeu`ub$EAtmU)_cWu3?hR)*@j&A)9c*pJjpmdx+C)!z6=zV;)x?Hfs4@Tm literal 0 HcmV?d00001 diff --git a/images/stars/goldFullStar.png b/images/stars/goldFullStar.png new file mode 100644 index 0000000000000000000000000000000000000000..9c57c6ae64321be932841e4e8555824aabdab2f0 GIT binary patch literal 539 zcmV+$0_6RPP)a4(^v zgfKlb&qIkJoC$DGr6A8(%0r1E90@=`uauZ9gac+e7tv8en4NR-@ZWrzjs;vTXRzP& zFgICHTi^bz%DPtc_K#r8vj>mI1DDIiO|k+4)+f{9v=NrZezamIO!g4Uib!d}WHQB= zWSubiV|2>&C}DNt)3CO-5mR0~$q(G>QIJc>mI@ILzbXcq_@-+S{so=#`j~x+r~aTd zvAwlb%jKlu=Jt-KsnME(iFc+oU5dy|A?zRec#0Ong$Vd!OlerZtPUdL8lIQ zkYKYA28PD@ts2#sd?x`=x)Ei?gcr9Cx~x2YqbBZb2d$&Zud*T$ZHd1wBoumrBuQ{M d96a&`@Bug9%aoVp-y#42002ovPDHLkV1n{p@)Q67 literal 0 HcmV?d00001 diff --git a/images/stars/goldHalfStar.png b/images/stars/goldHalfStar.png new file mode 100644 index 0000000000000000000000000000000000000000..1a47941c764f1bfcf1c416d572d631b7984afee1 GIT binary patch literal 608 zcmV-m0-ybfP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGmbN~PnbOGLGA9w%&0rg2lK~y+Tm61zG zTTu{({}XRx63k7s7Br-!Duud}h?|Io1Rn@)x@Z?&^dSZJLJM8iMG@SHJK=(~(uLwe zk$^N}Kt!-DG{m$teM1-BXf@iKYBWygBo|3c(q2C}FwB|%%s*!YF*pZa?`1%W%o2$# z%La6=PNAL~@Yl`5v?!Y;D2fHNr@~_7{>!8`jZhm0e^??rnZe`pQ)GgTy;IH4B!mDZ zoZLy6v!_kX;%+YoRa}0;4}`;EayT3uTd^2k#%AI@53J;?8Jo?Hg}E7gp39)6xf(cP zQ7{;!Xf%qzHQ*M%=4%9wvxb5>Ve>Ah6@A?{K+orLGc7H>M1OxD7RP{rdv4$-dnlY# z#)tV(a{3Xe)IK~{I?!+-i7&5s;FKsTEadbfTrMZ{oevlso`7iDM?9Ve>RDKZvS0q~ z`wuiXwcvKo5nha|z;ENi;GcWS?Iy`qcZ)k#+|$PE7;LiEQd&|`^z8X89^T>Lu)v6w zPpznIPgHr4UfF`Zh8M~kz(s-h`T>GN{H0QKmYrRl*aFd47g0$z>w>e?H5 zSIX1TaXfjzL5;x2WE$e?9x|8i%LeG`Y%kwQv3n>LQ7F*LuUmceHkL4M@|1{lUC-H& u=h5R4BU?;~NYgZOyWO9e!dZF~33)gjQ?#T4zZJV+v|KvOa%Z{}id>r;! z-V<~GolDc``uA?8)mavWQUN!OTfX}ieA8*Vwf19hRpqrU;(F;DIoUR}T=;nDs^Br^ jNBU&~7oT@mD^)QH-OiNLJ-bUB=sE^ZS3j3^P6+kRKGN=a#7tS~ zT0cX`R>_}R{RABBxjr}+zF#BPAsb?O91zwX`*m3*~Q?~new!_SgML=sAJYD@<);T3K0RTVxLf8NR literal 0 HcmV?d00001 diff --git a/images/v-view.jpg b/images/v-view.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c75452524273352421bfcebd038e6841c60c4391 GIT binary patch literal 1217 zcmbV}e^69a6vxlox66CGtir;sDATwDERpmFA_R)T1_p>TObIHQQwS!66E+YDDhsg) zg$_DkYR0HzAY@6~B0t26jUUPnH6pc@<;Sw1AjRq~TgwW&?{=R#Hq&3#_ueyeXYM)o zd_VV~yJ!qtH^jun06`FthZi6Nct_`DqyfaogFgV!_|6STd?N6AA~Xc+fI|@Mekzhj zvU1{bNgm}yQEbqBXFg2}Xo?an5(u1ySQLM;%Oc@o_RK!Qma|oO3u%gGGya><4sDfY_4L@d-(5gd}sbHbJc&N!jT7279C4mQi(?UIB6lPoATTgewJ@mRXd)AxD57gqQOzZ4R>dQI56SEFNM z*T-#0+_ZU1($;Nn?0kDyTKYQ~yWh|GU~g{TzWv1qOG-cbxa?5nu}_YlIQi+R&pxlN zIbU1%#f2{$E;Tkaw_I+$($U#<^;&mNZ{N?iZr}Mudv{Q07@xRze{$-<^snYw%kO_! z=WLJXSuO&|zp$Q>{ew${xj1+RT#Dr)IJr1T5tru`=;Ri;kxI#O_g+;*i=!&esoVKJ zK?x>FYW9F&i7eRQYi7}&ko`L_<^Ljk2KG0X4um9uhewJ)4i>#FAj$6WmGv9PVa?b@ zxuk8GJ;+v%fYvJWLmd^4s#*jcLDi#*s{VnQJ-Zynt2LF))3p_C>8nSIJ_O1x(KF6> z7Pb~#M_{@kH7V^|m`(&GWhS!YOo-XVo){LcwU(+6ST&8q%>01;dnTdaVYvEh{c#UJ zKiruSJVGGUAmF9g>c^68X)c50xSv&OjkRxz2(@K7RI1&}_Z;0RpO5a>x!)L^e4H^` zuI~1DQe@w8S1{DAWB;v6c+`3s6eqy5H+ z7_}nP<6-^85#J$UpsKHUZFY8?teT-;G|w@f#SA~(RM(wsD#@4IaviM>6$0^`GN*8+ zoO*4x>F@*jfU!k$QqyOVPOhz~jG5R=yh0gcaYKpY7=p}zBf6=s{<5=zLW9iQQdZE9 z+ZJ}jU)<)X>uEWp3mDlx((Ps}U8=nwdAfCttTJDLxdluwf+ouDm25hlzk(UYKb~vY zF6G(|F#egT+68%RgC*i-=0a7YC1js!p*M8>P+R)DLh span +{ + font-family: Verdana; +} + +.logo:first-letter +{ + color: #f00; +} + +.cat:hover +{ + box-shadow: 8px -5px 8px -5px #ffd700, -8px -5px 8px -5px #ffd700; +} + +.cat +{ + font-size: 0; + box-shadow: 5px 0 10px #ddd, -5px 0 10px #ddd; + position: relative; +} + +.cat:after +{ + content: ''; + position: absolute; + width: 100%; + height: 5%; + bottom: 0; + left: 0; + background: linear-gradient(to bottom, #fff, #bbb 100%); +} + +.female img:hover +{ + box-shadow: -10px 2px 10px -8px #ff4e40, 10px 2px 10px -8px #ff4e40; +} + +.male img:hover +{ + box-shadow: -10px 2px 10px -8px blue, 10px 2px 10px -8px blue; +} + +.img-content +{ + padding: 12px; + box-sizing: border-box; + vertical-align: bottom; + text-align: center; + width: 300px; +} + +.img-content img +{ + max-height: 100%; + max-width: 100%; +} + +.info +{ + font-size: 15px; + box-sizing: border-box; +} + +figure, +.info p, +.info h2 +{ + margin: 0; +} + +.main-info +{ + text-align: left; + padding: 0; +} + +.main-info h2 +{ + font-size: 1em; + font-weight: normal; +} + +.main-info p, +.info h2 +{ + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.kindness +{ + color: #ffd700; + font-size: 1.5em; +} + +.name:hover, +.category:hover +{ + color: #f00; +} + +.name +{ + font-size: 1.2em; +} + +.category +{ + color: #ddd; +} + +.price:after +{ + content: '₽'; +} + +.price.current-price +{ + color: green; + font-size: 1.5em; +} + +.price.old-price +{ + text-decoration: line-through; +} + +.description +{ + overflow: hidden; + position: relative; +} + +.horizontal-card:checked ~ .main +{ + width: 1000px; + margin: 0 auto; +} + +.horizontal-card:checked ~ .main .cat +{ + display: block; + width: 1000px; + height: 250px; + margin: 15px 0; +} + +.horizontal-card:checked ~ .main .img-content +{ + height: 100%; + display: inline-block; +} + +.horizontal-card:checked ~ .main .info +{ + display: inline-block; + vertical-align: top; + padding: 10px; +} + +.horizontal-card:checked ~ .main .main-info +{ + padding-left: 30px; + width: 300px; +} + +.horizontal-card:checked ~ .main .description +{ + width: 400px; +} + +.vertical-card:checked ~ .main .cat +{ + display: inline-block; + width: 300px; + margin: 10px; + vertical-align: top; + height: 550px; +} + +.vertical-card:checked ~ .main .info +{ + display: block; + padding: 0 10px; +} + +.vertical-card:checked ~ .main .img-content +{ + height: 350px; + display: table-cell; + max-width: 300px; +} + +.vertical-card:checked ~ .main .main-info +{ + height: 120px; +} + +.vertical-card:checked ~ .main .description +{ + max-height: 80px; +} + +.footer +{ + box-shadow: 0 -20px 10px -20px #888; + min-width: 700px; + height: 50px; +} + +.kindness +{ + font-size: 0; + width: 130px; +} + +.kindness > input +{ + display: none; +} + +.kindness > .half:after, +div.kindness:hover > label.half:after, +.kindness:hover > .half:hover:after +{ + content: url('images/stars/goldHalfStar.png'); +} + +.kindness > .full:after, +div.kindness:hover > label.full:after, +.kindness:hover > .full:after +{ + content: url('images/stars/goldFullStar.png'); +} + +.kindness > input:checked ~ .half:after, +.kindness:hover > .half:hover ~ .half:after, +.kindness:hover > .full:hover ~ .half:after +{ + content: url('images/stars/grayHalfStar.png'); +} + +.kindness > input:checked ~ .full:after, +.kindness:hover > .full:hover ~ .full:after, +.kindness:hover > .half:hover ~ .full:after +{ + content: url('images/stars/grayFullStar.png'); +} diff --git a/index.html b/index.html index d810ba7..1b1dc64 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,434 @@ + + Мяндекс.Муррркет + + +
+

Мяндекс.Муррркет

+

+ + +

+
+
+ + +
+
+ Барсик +
+
+

Барсик

+

Сибирская кошка

+

Мальчик

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

+ 1200 +

+
+
+

+ Стиснительный и лаксковый кот. Любит забираться на повыше. +

+
+
+ +
+
+ Василиса +
+
+

Василиса

+

Сиамская кошка

+

Девочка

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

+ 1500 1700 +

+
+
+

+ Красаица, умница. Любит фотографироваться. +

+
+
+
+
+ Котя +
+
+

Котя

+

Рыжая кошка

+

Мальчик

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

+ 250 300 +

+
+
+

+ Игривый котенок. +

+
+
+
+
+ Базилио +
+
+

Базилио

+

Серый кот

+

Мальчик

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

+ 2000 +

+
+
+

+ Сердитый кот. +

+
+
+
+
+ Маруся +
+
+

Маруся

+

Трехцветная кошка

+

Девочка

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

+ 1300 1350 +

+
+
+

+ Добрая, весела кошка. С ней вам всегда будет не скучно. +

+
+
+
+
+ Варя +
+
+

Варя

+

Рыжая кошка

+

Девочка

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

+ 1400 +

+
+
+

+ Любит сидеть на окне. +

+
+
+ +
+