Вид материалов Filmy для кино онлайн uCoz
 | |
| Кто собрался создавать кино сайт, то вот вам адаптированный вид материала под светлый дизайн и корректно отображается на мобильном. Что как думаю это уже стал главным аспектом при построении сайта. Здесь он идет в колонку, где смотря по какой ширине будет отображаться. Что с источника идет в четыре материала, думаю и у вас также должно быть. Он создан полностью на CSS и автоматически будет подстраиваться под любую ширину. Внизу у него на темно прозрачном фоне написано название фильма, здесь сделано так, что прям на изображение все будет. Что означает, в колонку все под одной чертой стоять должны, и если даже название большое, то оно уже внутри прописано. Такой вид сильно от других не отличается, но здесь автор добавил оригинальную кнопку и вывел на нем свой оттенок цвета, что вы сами потом настроите. И все остальное в стандартном режиме, как просмотры, если это торрент, то можно еще поставить загрузку. Что заметно, то это углы сильно закруглены, все настраивается в стилях, что идет с материалом. Но и рейтинг с правой стороны, где в самом вид материале и комментарий выставите, а он появится и продублирует еще здесь. Настроен под светлый интернет портал, и потому у него стилистика не очень яркая, но все решаемо и делается самим веб мастером. Он полностью проверен на свою работу и по всем эффектам что с ним идет, только остается поставить. Здесь рассмотрим как он будет визуально смотреться на светлом фоне.  Приступаем к установке: Здесь полностью в админ панель заменяем код. Код <div class="load-vid"> <div class="load-vid-img"> <a href="$ENTRY_URL$"> <img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$"> </a> </div> <div class="load-vid-eTitle"><h2>$TITLE$</h2></div> <div class="eDetails"> <div style="float:right"><?if($RATING$)?><span class="e-rating"><span class="ed-value"><span id="entRating$ID$">$RATING$</span>/<span id="entRated$ID$">$RATED$</span></span></span><?endif?></div> <span class="e-reads"><span class="ed-value">$READS$</span></span> <?if($COMMENTS_URL$)?><a class="e-comments" href="$COMMENTS_URL$">($COMMENTS_NUM$)</a><?endif?> </div> <div class="eDetails3"><div style="float:right"><a href="$ENTRY_URL$" class="dalee-knopochka">Смотреть</a></div> <span class="e-date"><span class="ed-value" title="$TIME$">$DATE$</span></span> </div> </div> CSS: Код .load-vid-eTitle { color: #FFFFFF; padding: 3px 5px 10px 5px; background-color: rgba(18, 18, 18, 0.8); height: 70px; text-align: center; opacity: 0.9; margin-top: -83px; border-radius: 0 0 8px 8px; } .load-vid-eTitle h2 { font-size: 13px; color: #fff; font-family: Play; font-weight: bold; } .load-vid-img { height: 350px; } .load-vid-img img { object-fit: cover; height: 350px; border-radius: 8px; } a.dalee-knopochka { display: inline-block; padding: 2px 10px; background-color: #3498DB; color: #ffffff; position: relative; font-family: Play; border-radius: 8px; } a.dalee-knopochka:before { background-color: rgba(255,255,255,0.3); content: ""; width: 80px; height: 40px; position: absolute; left: -40px; top: -10px; transform: rotate(-45deg); } a.dalee-knopochka:hover { background-color: #658539; color: #ffffff; } .eDetails3 { font-family: Play; font-size: 12px; color: #939fae; border-top: solid 2px #E4E4E4; overflow: hidden; padding: 5px 0 5px 0; } #allEntries div[id*="entryID"]{margin:0 2% 20px 0;width:23.5%;float:left;} #allEntries div[id*="entryID"]:nth-child(4n){margin:0 0 20px 0;} @media only screen and (max-width: 940px) { #allEntries div[id*="entryID"]{width:48%;margin: 0 4% 20px 0;} #allEntries div[id*="entryID"]:nth-child(2n){margin: 0 0 20px 0 !important;} #allEntries div[id*="entryID"]:nth-child(3n){margin: 0 4% 20px 0;} } @media screen and (max-width: 640px) { #allEntries div[id*="entryID"]{width:auto !important;margin: 0 0 20px 0 !important;float:none !important;} } PS - сам он по высоте больше стандартного, но здесь как было сказано, что описание или название у него располагается не стандартно, а точнее не как привыкли снаружи. Автор: ДимДимыч Если копируем, то автора обязательно ставим. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 13 | |
|
| |
