Web-дизайн. 4 курс. Практическое занятие №5. Neomorphism-дизайн со switch-кнопкой
Вам нужно создать страницу, выполненную по правилам неоморфизма. Для этого используйте фон-подложку и два модуля, расположенных поверх нее. В качестве инструмента активности создайте свитч привязанный к каждому из модулей.
CSS:
1. Создайте класс контейнера, указав в нем ширину страницы (100%) и цвет, который вы будете использовать в качестве фона:
.container {
}
2. Внутри контейнера укажите модули и их расположение. Используйте свои цвета для фона и текста:
.packages {
margin: 20px;
top: -300px;
position: relative;
width: 300px;
padding-bottom: 1.5em;
background-color: #1E90FF;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 20px;
box-shadow: 0 19px 38px rgba(30, 35, 33, 1), 0 15px 12px rgba(30, 35, 33, 0.2);
flex-wrap: wrap;
color: white;
}
3. Укажите размер и фон заголовка:
h2 {
font-size: 2.2em;
color: white;
}
4. Опций внутри модулей и их расстановки:
.list li {
font-size: 20px;
list-style: none;
border-bottom: 1px solid #7B68EE;
padding-inline-start: 0;
border-width: 1px;
padding: 10px;
}
.first {
margin-top: 40px;
border-top: 1px solid #7B68EE;
}
.list {
width: 80%;
}
ol, ul {
padding: 0;
}
.top {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: -300px;
}
5. Поля блоков и кнопки с оформлением:
input,
label {
display: inline-block;
vertical-align: middle;
margin: 10px 0;
}
.button {
padding: 10px 30px;
text-decoration: none;
font-size: 1.4em;
margin: 15px 15px;
border-radius: 50px;
color: white;
transition: all 0.3s ease 0s;
}
.button:hover {
transform: scale(1.2);
}
6. Параметры цвета и тени для каждой из кнопок:
.button1 {
background-color: #4169E1;
box-shadow: 0 0 10px 0 #87CEFA inset, 0 0 20px 2px #87CEFA;
}
.button2 {
background-color: #4169E1;
box-shadow: 0 0 10px 0 #87CEFA inset, 0 0 20px 2px #87CEFA;
}
7. Переключатель (свитч) для данных и его движение:
.switch {
position: relative;
top: -5px;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #00008B;
-webkit-transition: 0.4s;
box-shadow: 2px 6px 25px #00008B;
transform: translate(0px, 0px);
transition: 0.6s ease transform, 0.6s box-shadow;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #50bfe6;
}
input:focus + .slider {
box-shadow: 0 0 1px #50bfe6;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
8. Контейнер, в котором будут размещены модули:
.package-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
JavaScript:
9. Встройте библиотеку jQuery. Взять ее можно здесь:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
10. Укажите в JavaScript две переменных для переключения опций модулей:
function check() {
var checkBox = document.getElementById("checbox");
var text1 = document.getElementsByClassName("text1");
var text2 = document.getElementsByClassName("text2");
for (var i = 0; i < text1.length; i++) {
if (checkBox.checked == true) {
text1[i].style.display = "block";
text2[i].style.display = "none";
} else if (checkBox.checked == false) {
text1[i].style.display = "none";
text2[i].style.display = "block";
}
}
}
check();
HTML
11. Укажите стандартные теги хэдера:
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>Название страницы</title>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
12. Встройте библиотеку CSS. Скачать ее можно здесь:
https://raw.githack.com/Dmitrykonn/specimen/master/minlib.css
13. Встройте ваш CSS, закройте </head> внутри <body> разверните класс контейнера и верхней части страницы:
<div class="container">
<div class="top">
14. Укажите общий заголовок блока:
<h2>Booking options:</h2>
15. Задайте класс свитча и параметры его переключения:
<div class="toggle-btn">
<span style="color: blue; margin: 0.8em;">2 Hours</span>
<label class="switch">
<input id="checbox" onclick="check()" type="checkbox" />
<span class="slider round"></span>
</label>
<span style="color: blue; margin: 0.8em;">30 Minutes</span></div>
</div>
16. Откройте блок модулей, находящихся внутри контейнера:
<div class="package-container">
17. Здесь же укажите опции модуля, кнопку и переменные для JS-сценария:
<div class="packages">
<h2>Standard</h2>
<h2 class="text1">€79.99</h2>
<h2 class="text2">€199.99</h2>
<ul class="list">
<li class="first">Gondola ride</li>
<li>Trip on the Lagoon</li>
<li>Grand Canal sail</li>
<li>Sharing available</li>
</ul>
<a class="button button1" href="#" style="color: white;">Book Now</a>
</div>
18. Повторите то же самое для второго модуля.
19. Закройте классы контейнера и модуля.
20. Закройте </body> и </html>
Если все сделано верно, то ваш результат будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/2023/10/neomorphism.html#
Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 17 ноября.
https://svetavasilieva.blogspot.com/2023/11/neomorphism-booking-options-2-hours-30.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://novaknova23.blogspot.com/2023/11/neomorphism.html#
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://annajour1.blogspot.com/2023/11/neomorphism-design.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://dashulyaivanova88.blogspot.com/2023/11/booking-options-2-hours-30-minutes-79.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://dontstopthemusicslpw.blogspot.com/2023/11/111.html#
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://grnata74.blogspot.com/2023/11/blog-post_17.html
ОтветитьУдалитьОценка "отлично"
Удалить