Jump to content

sasha_anto

Newbie
  • Posts

    4
  • Joined

  • Last visited

Everything posted by sasha_anto

  1. Вот макеты и условие задания : На макете слева выводится меню по породам котиков, по центру — карточки котиков, а справа — рейтинг пород котиков (породы выводятся по алфавиту). Подвал должен быть прибит к нижней границе окна браузера, если котики влезают в один экран. Фотки котиков должны располагаться строго по шаблону, указанному в макете (если фоток больше 8, то шаблон повторяется). Левая колонка с меню всегда подстраивается под высоту контейнера с фотками, а правая (рейтинг) — по контенту внтури нее. Для верстки необходимо использовать Flex! Помимо верстки давайте обогатим макет следующими возможностями: возможность сортировки рейтинга по убыванию баллов при помощи чекбокса; возможность выбрать породу в меню и отфильтровать котиков только этой породы; при наведении на фотку котика выводить плашку с именем и возрастом котика; цвет рейтинга должен зависеть от его значения. Вот мой код <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <header>Бабуленькины котятки</header> <div class="global"> <input type="checkbox" id="abis" class="cats"> <input type="checkbox" id="brit" class="cats"> <input type="checkbox" id="rus" class="cats"> <input type="checkbox" id="siam" class="cats"> <div class="menu"> <label for="abis">Абиссинская</label> <label for="brit">Британская</label> <label for="rus">Русская голубая</label> <label for="siam">Сиамская</label> </div> <div class="cats"> <div class="abis"> <img src="http://murkote.com/wp-content/uploads/2014/03/abissinskaya-koshka-foto.jpg" alt="" class="cat"> <p class="text">Гоша, 4 года</p> </div> <div class="brit"> <img src="http://murkote.com/wp-content/uploads/2015/06/australian-mist-5.jpg" alt="" class="cat"> <p class="text">Макс, 2 года</p> </div> <div class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/05/American-Bobtail-Cat.jpg" alt="" class="cat"> <p class="text">Гена, 1 год</p> </div> <div class="rus"> <img src="http://murkote.com/wp-content/uploads/2015/06/american-curl-7.jpg" alt="" class="cat"> <p class="text">Марк, 1 месяц</p> </div> <div class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/Anatolijskya-koshka-2.jpg" alt="" class="cat"> <p class="text">Дима, 4 года</p> </div> <div class="siam"> <img src="http://murkote.com/wp-content/uploads/2015/06/arabian-mau-1.jpg" alt="" class="cat"> <p class="text">Мага, 5 лет</p> </div> <div class="rus"> <img src="http://murkote.com/wp-content/uploads/2014/03/leopardovaya-bengalskaya-koshka.jpg" alt="" class="cat"> <p class="text">Темик, 10 лет</p> </div> <div class="brit"> <img src="http://murkote.com/wp-content/uploads/2015/06/Brazilian-Shorthair-cat-2.jpg" alt="" class="cat"> <p class="text">Мага2, 4 года</p> </div> </div> <div class="rating"> <p class="rtext">Рейтинг</p> <label for="rating">по убыванию</label> <input type="checkbox" id="rating"> <div class="block-breed"> <div class="breed breeds1" style="--default: 2;"> <p>Абиссинская</p> <div class="blockscale blockscale1"> <div class="scale1"></div> <span>9</span> </div> </div> <div class="breed breeds2" style="--default: 3;"> <p>Британская</p> <div class="blockscale blockscale2"> <div class="scale2"></div> <span>8</span> </div> </div> <div class="breed breeds3" style="--default: 1;"> <p>Русская голубая</p> <div class="blockscale blockscale3"> <div class="scale3"></div> <span>10</span> </div> </div> <div class="breed breeds4" style="--default: 4;"> <p>Сиамская</p> <div class="blockscale blockscale4"> <div class="scale4"></div> <span>4</span> </div> </div> </div> </div> </div> <footer><p>&copy ООО Бабуленькины котятки, 2015</p> <span class="adress">Наш адрес: улица Котовая, д.5</span> </footer> </body> <style> body { background-color: gainsboro; display: flex; flex-direction: column; } header { text-align: center; font-size: 28px; font-style: bold; } img { width: 100%; height: 100%; } .global { display: flex; justify-content: space-around; } .menu { display: flex; width: 250px; flex-direction: column; background-color: gray; min-width: 200px; } .menu label { font-size: 25px; border-bottom: 1px white solid; height: 50px; width: 100%; display: flex; justify-content: space-around; align-items: center; } .cats { display: grid; grid-template-rows: repeat(4,140px); grid-template-columns: repeat(3,1fr); width: 700px; height: 600px; gap: 10px; min-width: 600px; } input.cats { display: none; } div.menu label:hover { font-size: 26px; } input#abis:checked ~ div.menu label:nth-of-type(1) { background: #000; color: white; } input#brit:checked ~ div.menu label:nth-of-type(2) { background: #000; color: white; } input#rus:checked ~ div.menu label:nth-of-type(3) { background: #000; color: white; } input#siam:checked ~ div.menu label:nth-of-type(4) { background: #000; color: white; } input#abis:checked ~ div.cats div:not([class="abis"]){ opacity: .5; } input#abis:checked ~ div.cats div.abis{ opacity: 1 !important; } input#brit:checked ~ div.cats div:not([class="brit"]){ opacity: .5; } input#brit:checked ~ div.cats div.brit{ opacity: 1 !important; } input#rus:checked ~ div.cats div:not([class="rus"]){ opacity: .5; } input#rus:checked ~ div.cats div.rus{ opacity: 1 !important; } input#siam:checked ~ div.cats div:not([class="siam"]){ opacity: .5; } input#siam:checked ~ div.cats div.siam{ opacity: 1 !important; } img.cat:hover ~ p.text{ display: block; } .text { position: absolute; margin-top: -60px; background:rgba(0, 0, 0, .5); height: 50px; width: 150px; color: white; font-size: 20px; text-align: center; line-height: 50px; display: none; } div.cats div:nth-child(1) { grid-column: 1; grid-row: 1; } div.cats div:nth-child(2) { grid-column: 2/4; grid-row: 1; } div.cats div:nth-child(3) { grid-column: 1; grid-row: 2; } div.cats div:nth-child(4) { grid-column: 2; grid-row: 2; } div.cats div:nth-child(5) { grid-column: 3; grid-row: 2; } div.cats div:nth-child(6) { grid-column: 1/3; grid-row: 3; } div.cats div:nth-child(7) { grid-column: 3; grid-row: 3; } div.cats div:nth-child(8) { grid-column: 1/4; grid-row: 4; } .rating { display: flex; width: 250px; background: gray; align-self: flex-start; flex-direction: row; padding: 10px; flex-wrap: wrap; } .rating p.rtext { text-transform: uppercase; color: red; text-align: left; font-size: 30px; margin: 0; width: 250px; } .block-breed { display: flex; flex-direction: column; } .blockscale { display: flex; flex-direction: row; justify-content: space-between; } .blockscale div { height: 20px; } div.breed p { font-size: 20px; margin: 7px 0; } span { font-size: 20px; font-weight: bold; } .scale1 { width: 180px; background: linear-gradient(to right,green,white); } .scale2 { width: 160px; background: linear-gradient(to right,yellow,white); } .scale3 { width: 200px; background: linear-gradient(to right,green,white); } .scale4 { width: 80px; background: linear-gradient(to right,red,white); } .rating input:checked ~ .block-breed .breed { order: var(--default); } .rating label { margin-left: 45%; } span.adress { color: blue; font-weight: normal; font-size: 20px; } footer { font-size: 20px; margin-top: 5px; border-top: gray 1px solid; display: flex; justify-content: space-between; align-items: center; } footer p { margin: 0; } </style> </html> Что можно было бы улучшить или сделать иначе?
  2. Мне можно использовать только html и css
  3. Да, об этом я знаю, но обязательный пункт в задании это не использовать js
  4. Доброго времени суток. Возникла такая проблема, нужно сверстать страницу согласно макету, используя только flex и grid Сразу появилась идея разбить страницу на три divа, первый это блок с породами кота, второй это блок с фотками и третий блок с рейтингом. <body> <header>Бабуленькины котятки</header> <div class="global"> <div class="menu"> <a class="submenu" href="#" id="abis">Абиссинская</a> <a class="submenu" href="#" rel="brit"">Британская</a> <a class="submenu" href="#" rel="rus">Русская голубая</a> <a class="submenu" href="#" rel="siam">Сиамская</a> </div> <div class="cats"> <img src="http://murkote.com/wp-content/uploads/2014/03/abissinskaya-koshka-foto.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/australian-mist-5.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/05/American-Bobtail-Cat.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/american-curl-7.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/06/Anatolijskya-koshka-2.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/arabian-mau-1.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2014/03/leopardovaya-bengalskaya-koshka.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/06/Brazilian-Shorthair-cat-2.jpg" alt="" class="cat"> </div> <div class="rating"></div> </div> <footer>Подвал</footer> <style> a { color: #000 !important; text-decoration: none; } body { background-color: gainsboro; display: flex; flex-direction: column; } header { text-align: center; font-size: 40px; font-style: bold; } img { width: 250px; height: 200px; } .global { display: -webkit-flex; display: flex; justify-content: space-around; } footer { color: wheat; background: black; } div.menu { display: flex; width: 250px; flex-wrap: wrap; background: gray; align-content: flex-start; } .submenu { display:flex; justify-content: center; align-items: center; width: 100%; height: 50px; font-size: 25px; border-bottom: white 1px solid; } .cats { display: flex; flex-wrap: wrap; width: 800px; height: 900px; justify-content: space-around; } .cats img:nth-child(2){ width: 500px; } .cats img:nth-child(6) { width: 500px; } .cats img:nth-child(8) { width: 750px; } .rating { width: 250px; background: olive; } </style> Но возникла проблема, надо сделать так, чтобы при выборе категории, кошки данной породы меняли прозрачность. Так как у меня фото и породы в разных блоках, я не понимаю как это сделать. Был вариант не добавлять категории в отдельный блок, но тогда как разметить страницу? Прошу помощи, или хотя бы небольшой подсказки
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy