/
githubmirror
/
50projects50days
Обзор
Документация
Войти
/
githubmirror
/
50projects50days
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
mobile-tab-navigation/style.css
74 строки
1 KB
Brad Traversy
Mobile tab navigation
19 окт 2020, 20:31
19 окт 2020, 20:31
c3f0877
Код
Авторство
О чём код?
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); * { box-sizing: border-box; } body { background-color: rgba(155, 89, 182, 0.7); font-family: 'Open Sans', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .phone { position: relative; overflow: hidden; border: 3px solid #eee; border-radius: 15px; height: 600px; width: 340px; } .phone .content { opacity: 0; object-fit: cover; position: absolute; top: 0; left: 0; height: calc(100% - 60px); width: 100%; transition: opacity 0.4s ease; } .phone .content.show { opacity: 1; } nav { position: absolute; bottom: 0; left: 0; margin-top: -5px; width: 100%; } nav ul { background-color: #fff; display: flex; list-style-type: none; padding: 0; margin: 0; height: 60px; } nav li { color: #777; cursor: pointer; flex: 1; padding: 10px; text-align: center; } nav ul li p { font-size: 12px; margin: 2px 0; } nav ul li:hover, nav ul li.active { color: #8e44ad; }