Merge pull request #2 from Llloooggg/frontend

Frontend
This commit is contained in:
2020-03-15 19:08:26 +03:00
committed by GitHub
5 changed files with 205 additions and 72 deletions

View File

@@ -222,12 +222,18 @@
.header_btn:hover { .header_btn:hover {
background: #834c05; background: #834c05;
} }
/* выпадашка в регистрации */ /* контент */
.contacts__schedule_mod {
padding: 14px 0;
}
.drop:hover .dropdown_mod { .drop:hover .dropdown_mod {
left: -80px; left: -25px;
} }
.triangle_mod { .triangle_mod {
left: 81%; left: 73%;
bottom: 88%; bottom: 81%;
}
.header_btn_mod {
margin: 0 40px;
} }

View File

@@ -4,9 +4,7 @@
@import "components/footer.css"; @import "components/footer.css";
@import "components/header.css"; @import "components/header.css";
/* главная-- */
/* главная */
.hero_con { .hero_con {
padding-top: 100px; padding-top: 100px;
@@ -233,18 +231,34 @@
transform: rotate(720deg); transform: rotate(720deg);
} }
} }
/*
* Отзывы
*/
/*
* контент
*/
.form_content {
display: flex;
}
/* условия */
.condition {
width: 35%;
margin-right: 20px;
}
.events {
width: 45%;
margin-right: 20px;
}
.telegram {
width: 20%;
}
.form { .form {
width: 700px;
background: #f5f5f5; background: #f5f5f5;
border-radius: 3px; border-radius: 3px;
padding: 45px 70px; padding: 45px 20px;
margin: 0 auto; margin: 0 auto;
margin-top: 35px; margin-top: 35px;
margin-bottom: 35px; margin-bottom: 35px;
@@ -252,7 +266,7 @@
.form__title { .form__title {
color: #221f1f; color: #221f1f;
font-size: 35px; font-size: 23px;
font-weight: bold; font-weight: bold;
margin-bottom: 25px; margin-bottom: 25px;
} }
@@ -263,7 +277,7 @@
} }
.form__log { .form__log {
display: block; display: block;
width: 560px; width: 100%;
} }
/* только в списках к первому элементу добавить справа 20р */ /* только в списках к первому элементу добавить справа 20р */
.form__cell:first-child { .form__cell:first-child {
@@ -382,4 +396,54 @@
.form__submit:hover { .form__submit:hover {
background: #f89513; background: #f89513;
} }
/* евенты
*/
.events_item {
display: flex;
justify-content: space-between;
align-items: center;
}
/* крест */
.cl-btn-7 {
width: 40px;
height: 40px;
border-radius: 40px;
position: relative;
z-index: 1;
cursor: pointer;
}
.cl-btn-7:before {
content: '+';
color: #535557;
position: absolute;
z-index: 2;
transform: rotate(45deg);
font-size: 50px;
line-height: 1;
top: -5px;
left: 6px;
transition: all 0.3s cubic-bezier(0.77, 0, 0.2, 0.85);
}
.cl-btn-7:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: #535557;
z-index: 1;
transition: all 0.3s cubic-bezier(0.77, 0, 0.2, 0.85);
transform: scale(0.01);
}
.cl-btn-7:hover:after {
transform: scale(1);
}
.cl-btn-7:hover:before {
transform: scale(0.8) rotate(45deg);
color: #fff;
}

View File

@@ -10,7 +10,7 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- header --> <!-- header-- -->
<header class="header"> <header class="header">
<div class="container clearfix"> <div class="container clearfix">
<div class="header_left clearfix"> <div class="header_left clearfix">
@@ -19,82 +19,123 @@
<p class="logo-text">J.a.r.v.i.s </p> <p class="logo-text">J.a.r.v.i.s </p>
</a> </a>
</div> </div>
<div class="header_right clearfix"> <div class="header_right">
<div class="contacts"> <div class="contacts">
<a href="/registration" class="contacts__schedule">Выйти</a> <div class="drop">
<p href="" class="contacts__schedule contacts__schedule_mod">nagbator228#264</p>
<div class="dropdown dropdown_mod">
<div class="drop-block">
<div class="triangle triangle_mod"></div>
<a href="" class="input">
<input type="button" href="" name="scriptbutton" class="header_btn header_btn_mod" value="Выйти" >
</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<section class="container form_content">
<section class="form"> <!-- условия -->
<div class="form__title"> <section class="condition">
Настройки <div class="form">
</div> <div class="form__title">
<!-- лейблы --> Условия
<form action="/registration" method="POST"> </div>
<div class="form__fields"> <form action="" method="POST">
<div class="form__element"> <div class="form_condition">
<div class="form__row clearfix">
<label class="form__log"> <label class="form__log">
<div class="form__field-title" > <div class="form__field-title" >
Telegram Название
</div> </div>
<input type="text" class="form__input-text" placeholder="Telegram" name = ""> <input type="text" class="form__input-text" placeholder="Введите название сбытия" name = "">
</label> </label>
<label class="form__log"> <label class="form__log">
<div class="form__field-title" > <div class="form__field-title" >
Событие Если:
</div> </div>
<input type="text" class="form__input-text" placeholder="Событие" name = ""> <select class="form__input-text" >
</label> <option>Lorem ipsum dolor sit amet.</option>
</div> <option>Lorem ipsum dolor sit amet.</option>
<div class="form__row"> <option>Lorem ipsum dolor sit amet.</option>
<label class="form__textaria-label"> <option>Lorem ipsum dolor sit amet.</option>
<div class="form__field-title"> <option>Lorem ipsum dolor sit amet.</option>
Текст </select>
</label>
<label class="form__log">
<div class="form__field-title" >
Действие:
</div> </div>
<textarea class="form__texterea" placeholder="Текст" name = ""></textarea> <select class="form__input-text" >
</label> <option>Lorem ipsum dolor sit amet.</option>
<option>Lorem ipsum dolor sit amet.</option>
<option>Lorem ipsum dolor sit amet.</option>
<option>Lorem ipsum dolor sit amet.</option>
<option>Lorem ipsum dolor sit amet.</option>
</select>
</label>
<div class="form__btns">
<div class="form__controls">
<div class="form__controls-btns clearfix">
<div class="form__controls-right">
<button type="submit" value="Отправить" class="form__submit" name="" >Добавить</button>
</div>
</div>
</div>
</div>
</div> </div>
</form>
</div>
</section>
<!-- лист событий -->
<section class="events">
<section class="form">
<div class="form__title">
Лист событий
</div>
<form action="" method="POST">
<ul class="events_list">
<li class="events_item">
<p>qwe</p>
<div class="cl-btn-7"></div>
</li>
</ul>
</form>
</section>
</section>
<!-- лист телеги -->
<section class="telegram">
<div class="form">
<div class="form__title">
Ваш telegram
</div>
<form action="" method="POST">
<label class="form__log">
<input type="text" class="form__input-text" placeholder="Логин" name = "">
</label>
<div class="form__btns"> <div class="form__btns">
<div class="form__controls"> <div class="form__controls">
<div class="form__controls-btns clearfix"> <div class="form__controls-btns clearfix">
<!-- <div class="form__container-left">
<p class="form__field-title">
Пол
</p>
<div class="form__controls-left">
<label class="form__radio">
<input type="radio" name="review" class="form__radio-elem" checked>
<div class="form__radio-fake"></div>
<div class="form__radio-text">Муж.</div>
</label>
<label class="form__radio">
<input type="radio" name="review" class="form__radio-elem" >
<div class="form__radio-fake"></div>
<div class="form__radio-text ">Жен.</div>
</label>
</div>
</div> -->
<div class="form__controls-right"> <div class="form__controls-right">
<button type="submit" value="Отправить" class="form__submit" name="" >Создать</button> <button type="submit" value="Отправить" class="form__submit" name="" >Изменить</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</form>
</div>
</div> </div>
</form> </section>
</section> </section>
</div> </div>
<!-- заглушка --> <!-- заглушка -->
<footer class="footer clearfix"> <footer class="footer clearfix">
<div class="container"> <div class="container">
<div class="footer-q clearfix"> <div class="footer-q clearfix">
<p class="footer-full-text">Сделано с любовью и старанием на курсе ВГУ "Тестирование ПО" Автор работы: <b class="footer-text_name">Трухачев Сергей и Подшивалов Денис</b> </p> <p class="footer-full-text">Сделано с любовью и старанием на курсе ВГУ "Тестирование ПО" <b class="footer-text_name"></b> </p>
</div> </div>
<div class="footer-q clearfix"> <div class="footer-q clearfix">
<a href="/" class="logo-text">j.a.r.v.i.s</a> <a href="/" class="logo-text">j.a.r.v.i.s</a>

View File

@@ -10,7 +10,7 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- header --> <!-- header-- -->
<header class="header"> <header class="header">
<div class="container clearfix"> <div class="container clearfix">
<div class="header_left clearfix"> <div class="header_left clearfix">
@@ -77,7 +77,7 @@
<footer class="footer clearfix"> <footer class="footer clearfix">
<div class="container"> <div class="container">
<div class="footer-q clearfix"> <div class="footer-q clearfix">
<p class="footer-full-text">Сделано с любовью и старанием на курсе ВГУ "Тестирование ПО" Авторы работы: <b class="footer-text_name">Трухачев Сергей и Подшивалов Денис</b> </p> <p class="footer-full-text">Сделано с любовью и старанием на курсе ВГУ "Тестирование ПО" <b class="footer-text_name"></b> </p>
</div> </div>
<div class="footer-q clearfix"> <div class="footer-q clearfix">
<a href="/" class="logo-text">j.a.r.v.i.s</a> <a href="/" class="logo-text">j.a.r.v.i.s</a>

View File

@@ -10,7 +10,7 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<!-- header --> <!-- header-- -->
<header class="header"> <header class="header">
<div class="container clearfix"> <div class="container clearfix">
<div class="header_left clearfix"> <div class="header_left clearfix">
@@ -22,16 +22,38 @@
<div class="header_right"> <div class="header_right">
<div class="contacts"> <div class="contacts">
<div class="drop"> <div class="drop">
<a href="" class="contacts__schedule">Нужна помощь?</a> <a href="" class="contacts__schedule">Войти</a>
<div class="dropdown dropdown_mod"> <div class="dropdown">
<div class="drop-block drop-block_mod"> <div class="drop-block">
<div class="triangle triangle_mod"></div> <div class="triangle"></div>
<p>Обратитесь в службу поддержки по адресу:<b>jarvis@mail.ru</b> </p> <label class="form__cell-header ">
<input type="text" class="form__input-text-mod" placeholder="Логин" >
</label>
<label class="form__cell-header">
<input type="password" class="form__input-text-mod" placeholder="Пароль">
</label>
<a href="" class="input">
<input type="button" href="/content.html" name="scriptbutton" class="header_btn" value="Войти" >
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="header_right">
<div class="contacts">
<div class="drop">
<a href="" class="contacts__schedule">Нужна помощь?</a>
<div class="dropdown dropdown_mod">
<div class="drop-block drop-block_mod">
<div class="triangle triangle_mod"></div>
<p>Обратитесь в службу поддержки по адресу:<b>jarvis@mail.ru</b> </p>
</div>
</div>
</div>
</div>
</div> -->
</div> </div>
</header> </header>
@@ -80,7 +102,7 @@
<footer class="footer clearfix"> <footer class="footer clearfix">
<div class="container"> <div class="container">
<div class="footer-q clearfix"> <div class="footer-q clearfix">
<p class="footer-full-text">Сделано с любовью и старанием на курсе ВГУ "Тестирование ПО" Автор работы: <b class="footer-text_name">Трухачев Сергей и Подшивалов Денис</b> </p> <p class="footer-full-text">Сделано с любовью и старанием на курсе ВГУ "Тестирование ПО" <b class="footer-text_name"></b> </p>
</div> </div>
<div class="footer-q clearfix"> <div class="footer-q clearfix">
<a href="/" class="logo-text">j.a.r.v.i.s</a> <a href="/" class="logo-text">j.a.r.v.i.s</a>