Lab_2 #2
188
ИП2/css/index-style.css
Normal file
@@ -0,0 +1,188 @@
|
||||
body {
|
||||
color: #c5c6c7;
|
||||
background-color: #0b0c10;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* Шапка */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid #BF1723;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
}
|
||||
|
||||
.left-part{
|
||||
display: flex;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.header > .left-part > img {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.header > .left-part > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.first-part {
|
||||
color:#FCD116;
|
||||
font-size: 1.4em;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.last-part {
|
||||
color: #BF1723;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.right-part{
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.header > .right-part > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.header > .right-part > nav > ul > li > a {
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
border: 0.5px solid #FFF;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Блок регистрации */
|
||||
.login-div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
width: 19%;
|
||||
background-color: #222222;
|
||||
padding: 1%;
|
||||
border-radius: 15%;
|
||||
border: 0.5px solid #BF1723;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.input-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.remember-forgot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.remember-forgot label input {
|
||||
accent-color: #BF1723;
|
||||
}
|
||||
|
||||
.login-page .btn {
|
||||
width: 100%;
|
||||
background-color: #BF1723;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.register-link{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Ссылки */
|
||||
a {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:link{
|
||||
color: #FCD116;
|
||||
}
|
||||
a:visited{
|
||||
color: #FCD116;
|
||||
}
|
||||
a:hover{
|
||||
color: #c5c6c7;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 600px){
|
||||
.header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header > .right-part {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header > .left-part {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
width: 77%;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) and (max-width: 800px){
|
||||
|
||||
.login-page {
|
||||
width: 37%;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 801px) and (max-width: 1024px){
|
||||
|
||||
.login-page {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1920px){
|
||||
|
||||
.login-page {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
280
ИП2/css/lenta-style.css
Normal file
@@ -0,0 +1,280 @@
|
||||
body {
|
||||
color: #c5c6c7;
|
||||
background-color: #141414;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: white;
|
||||
}
|
||||
a:hover {
|
||||
color: #BF1723;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
a:active {
|
||||
color: #FCD116;
|
||||
}
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Шапка */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid #BF1723;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
padding: 0.25% 33% 0% 33%;
|
||||
}
|
||||
|
||||
.rightpart > img {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
|
||||
/* Основная страница */
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.leftbar {
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
background-color: #222222;
|
||||
border-radius: 15px;
|
||||
margin: 5px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.leftbar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.leftbar-content > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.leftbar-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.479);
|
||||
margin: 10px 10px 0px 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.leftbar-settings > a{
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.479);
|
||||
margin: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.footer > span {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
color: #BF1723;
|
||||
}
|
||||
|
||||
.footer:hover .footer-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 150%;
|
||||
left: -8%;
|
||||
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
|
||||
background-color: #222222;
|
||||
border-radius: 10px;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.footer-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-menu > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
background-color: #222222;
|
||||
border-radius: 15px;
|
||||
border: 0.1px solid #BF1723;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.post-header {
|
||||
margin-bottom: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
width: 98%;
|
||||
padding: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.image .post-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
color: #fff;
|
||||
border-bottom: 0.5px solid #BF1723;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.post-footer > i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.rightbar {
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
background-color: #222222;
|
||||
border-radius: 15px;
|
||||
margin: 5px;
|
||||
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.rightbar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.rightbar-content > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bottombar{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
border-top: 3px solid #BF1723;
|
||||
border-top-right-radius: 25px;
|
||||
border-top-left-radius: 25px;
|
||||
padding: 5px 0px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bottombar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottombar > a > img {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px){
|
||||
.header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header > .rightpart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header > .leftpart {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.leftbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rightbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottombar {
|
||||
display: flex;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.page {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
/*Tablets*/
|
||||
@media (min-width: 601px) and (max-width: 800px){
|
||||
.header {
|
||||
padding: 0.25% 25% 0% 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 801px) and (max-width: 1024px){
|
||||
.header {
|
||||
padding: 0.25% 31% 0% 28%;
|
||||
}
|
||||
}
|
||||
267
ИП2/css/message-style.css
Normal file
@@ -0,0 +1,267 @@
|
||||
body {
|
||||
color: #c5c6c7;
|
||||
background-color: #141414;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: white;
|
||||
}
|
||||
a:hover {
|
||||
color: #BF1723;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
a:active {
|
||||
color: #FCD116;
|
||||
}
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Шапка */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid #BF1723;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
padding: 0.25% 33% 0% 33%;
|
||||
}
|
||||
|
||||
.rightpart > img {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
|
||||
/* Основная страница */
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.leftbar {
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
background-color: #222222;
|
||||
border-radius: 15px;
|
||||
margin: 5px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.leftbar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.leftbar-content > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.leftbar-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.479);
|
||||
margin: 10px 10px 0px 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.leftbar-settings > a{
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.479);
|
||||
margin: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.footer > span {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
color: #BF1723;
|
||||
}
|
||||
|
||||
.footer:hover .footer-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 150%;
|
||||
left: -8%;
|
||||
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
|
||||
background-color: #222222;
|
||||
border-radius: 10px;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.footer-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-menu > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
background-color: #222222;
|
||||
border-radius: 15px;
|
||||
border: 0.1px solid #BF1723;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.chat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 0.5px solid rgba(128, 128, 128, 0.479);
|
||||
}
|
||||
|
||||
.chat > .avatar > img {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
margin: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin: 0;
|
||||
color: rgb(158, 158, 158);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.rightbar {
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
background-color: #222222;
|
||||
border-radius: 15px;
|
||||
margin: 5px;
|
||||
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.rightbar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.rightbar-content > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bottombar{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
border-top: 3px solid #BF1723;
|
||||
border-top-right-radius: 25px;
|
||||
border-top-left-radius: 25px;
|
||||
padding: 5px 0px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bottombar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottombar > a > img {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px){
|
||||
.header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header > .rightpart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header > .leftpart {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.leftbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rightbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottombar {
|
||||
display: flex;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) and (max-width: 800px){
|
||||
.header {
|
||||
padding: 0.25% 25% 0% 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 801px) and (max-width: 1024px){
|
||||
.header {
|
||||
padding: 0.25% 31% 0% 28%;
|
||||
}
|
||||
}
|
||||
285
ИП2/css/profile-style.css
Normal file
@@ -0,0 +1,285 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #c5c6c7;
|
||||
background-color: #141414;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: white;
|
||||
}
|
||||
a:hover {
|
||||
color: #BF1723;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
a:active {
|
||||
color: #FCD116;
|
||||
}
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Шапка */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid #BF1723;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
padding: 0.25% 33% 0% 33%;
|
||||
}
|
||||
|
||||
.rightpart > img {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
|
||||
/* Основная страница */
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.leftbar {
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
background-color: #222222;
|
||||
border-radius: 15px;
|
||||
margin: 5px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.leftbar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.leftbar-content > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.leftbar-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.479);
|
||||
margin: 10px 10px 0px 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.leftbar-settings > a{
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.479);
|
||||
margin: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.footer > span {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
color: #BF1723;
|
||||
}
|
||||
|
||||
.footer:hover .footer-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 150%;
|
||||
left: -8%;
|
||||
|
||||
width: 115%;
|
||||
|
||||
position: absolute;
|
||||
|
||||
background-color: #222222;
|
||||
border-radius: 10px;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.footer-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-menu > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.profile-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 250px;
|
||||
width: 100%;
|
||||
background-color: #222222;
|
||||
border-radius: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background-color: #FCD116;
|
||||
padding: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.image .profile-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #FFF;
|
||||
}
|
||||
|
||||
.profile-card .text-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-data .name {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.text-data .about {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.profile-card .more-info {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.rightbar {
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
background-color: #222222;
|
||||
border-radius: 15px;
|
||||
margin: 5px;
|
||||
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.rightbar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.rightbar-content > a {
|
||||
margin-bottom: 5px;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bottombar{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
border-top: 3px solid #BF1723;
|
||||
border-top-right-radius: 25px;
|
||||
border-top-left-radius: 25px;
|
||||
padding: 5px 0px;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bottombar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottombar > a > img {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px){
|
||||
.header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header > .rightpart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header > .leftpart {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.leftbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rightbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottombar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) and (max-width: 800px){
|
||||
.header {
|
||||
padding: 0.25% 25% 0% 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 801px) and (max-width: 1024px){
|
||||
.header {
|
||||
padding: 0.25% 31% 0% 28%;
|
||||
}
|
||||
}
|
||||
181
ИП2/css/signup-style.css
Normal file
@@ -0,0 +1,181 @@
|
||||
body {
|
||||
color: #c5c6c7;
|
||||
background-color: #0b0c10;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* Шапка */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid #BF1723;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
}
|
||||
|
||||
.left-part{
|
||||
display: flex;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.header > .left-part > img {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.header > .left-part > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.first-part {
|
||||
color:#FCD116;
|
||||
font-size: 1.4em;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.last-part {
|
||||
color: #BF1723;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
.right-part{
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.header > .right-part > nav > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.header > .right-part > nav > ul > li > a {
|
||||
display: block;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
border: 0.5px solid #FFF;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Блок регистрации */
|
||||
.login-div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
width: 19%;
|
||||
background-color: #222222;
|
||||
padding: 1%;
|
||||
border-radius: 15%;
|
||||
border: 0.5px solid #BF1723;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.input-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.remember-forgot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.remember-forgot label input {
|
||||
accent-color: #BF1723;
|
||||
}
|
||||
|
||||
.login-page .btn {
|
||||
width: 100%;
|
||||
background-color: #BF1723;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.register-link{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.register-link > a {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Ссылки */
|
||||
a {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:link{
|
||||
color: #FCD116;
|
||||
}
|
||||
a:visited{
|
||||
color: #FCD116;
|
||||
}
|
||||
a:hover{
|
||||
color: #c5c6c7;
|
||||
}
|
||||
|
||||
@media (max-width: 600px){
|
||||
.header {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header > .right-part {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header > .left-part {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
width: 77%;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) and (max-width: 800px){
|
||||
|
||||
.login-page {
|
||||
width: 37%;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 801px) and (max-width: 1024px){
|
||||
|
||||
.login-page {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
62
ИП2/index.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>СОЦИАЛьная сеть</title>
|
||||
<link rel="stylesheet" href="css/index-style.css" />
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left-part">
|
||||
<img src="source/logo.svg" alt="">
|
||||
<div>
|
||||
<p class="first-part">СОЦИАЛ</p>
|
||||
<p class="last-part">ьная сеть</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-part">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="messages.html">Войти</a></li>
|
||||
<li><a href="signup.html">Зарегистрироваться</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-div">
|
||||
<div class="login-page">
|
||||
<form action="">
|
||||
<h1>Авторизация</h1>
|
||||
|
||||
<div class="input-div">
|
||||
<div class="input-box">
|
||||
<input type="text" placeholder="Логин">
|
||||
<i class='bx bxs-user'></i>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input type="password" placeholder="Пароль">
|
||||
<i class='bx bxs-lock-alt' ></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="remember-forgot">
|
||||
<label><input type="checkbox">Запомнить меня</label>
|
||||
<a href="#">Забыли пароль?</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">Войти</button>
|
||||
|
||||
<div class="register-link">
|
||||
<p>У меня нет аккаунта</p>
|
||||
<a href="signup.html">Зарегистрироваться</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
136
ИП2/lenta.html
Normal file
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Лента новостей</title>
|
||||
<link rel="stylesheet" href="css/lenta-style.css" />
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<span class="leftpart">
|
||||
<img src="source/logo.svg" alt="" class="logo">
|
||||
</span>
|
||||
|
||||
<span class="rightpart">
|
||||
<img src="source/photo.jpg" alt="" class="account-image">
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="page">
|
||||
<div class="leftbar">
|
||||
<div class="leftbar-content">
|
||||
<a href="profile.html">Профиль</a>
|
||||
<a href="lenta.html">Лента</a>
|
||||
<a href="messages.html">Сообщения</a>
|
||||
</div>
|
||||
|
||||
<div class="leftbar-settings">
|
||||
<a href="index.html">Настройки</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span>Ещё ▼</span>
|
||||
<div class="footer-menu">
|
||||
<a href="#">Разработчикам</a>
|
||||
<a href="#">О нас</a>
|
||||
<a href="#">Правовая информация</a>
|
||||
<a href="#">Помощь</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="post">
|
||||
<div class="post-header">
|
||||
<i class='bx bxs-group'></i>
|
||||
<label>Какая-то группа 1</label>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src="source/meme1.jpg" class="post-img"/>
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
<i class='bx bx-like' >8</i>
|
||||
<i class='bx bx-message-square-dots' >2</i>
|
||||
<i class='bx bx-reply' >1</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post">
|
||||
<div class="post-header">
|
||||
<i class='bx bxs-group'></i>
|
||||
<label>Какая-то группа 2</label>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src="source/meme2.jpg" class="post-img"/>
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
<i class='bx bx-like' >785</i>
|
||||
<i class='bx bx-message-square-dots' >102</i>
|
||||
<i class='bx bx-reply' >14</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post">
|
||||
<div class="post-header">
|
||||
<i class='bx bxs-group'></i>
|
||||
<label>Какая-то группа 3</label>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src="source/meme3.jpg" class="post-img"/>
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
<i class='bx bx-like' >156</i>
|
||||
<i class='bx bx-message-square-dots' >10</i>
|
||||
<i class='bx bx-reply' >0</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post">
|
||||
<div class="post-header">
|
||||
<i class='bx bxs-group'></i>
|
||||
<label>Какая-то группа 4</label>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src="source/meme4.jpg" class="post-img"/>
|
||||
<label>Горшок для ФИСТа, в котором хранится прах студентов, которые не сдали сессию</label>
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
<i class='bx bx-like' >456</i>
|
||||
<i class='bx bx-message-square-dots' >32</i>
|
||||
<i class='bx bx-reply' >4</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post">
|
||||
<div class="post-header">
|
||||
<i class='bx bxs-group'></i>
|
||||
<label>Какая-то группа 5</label>
|
||||
</div>
|
||||
<div class="image">
|
||||
<img src="source/meme5.jpg" class="post-img"/>
|
||||
</div>
|
||||
<div class="post-footer">
|
||||
<i class='bx bx-like' >1067</i>
|
||||
<i class='bx bx-message-square-dots' >467</i>
|
||||
<i class='bx bx-reply' >56</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightbar">
|
||||
<div class="rightbar-content">
|
||||
<a href="#">Все</a>
|
||||
<a href="#">Непрочитанные</a>
|
||||
<a href="#">Архив</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bottombar">
|
||||
<a href="lenta.html"><img src="source/home-icon.svg" alt=""></a>
|
||||
<a href="messages.html"><img src="source/message-icon.svg" alt=""></a>
|
||||
<a href="profile.html"><img src="source/profile-icon.svg" alt=""></a>
|
||||
<a href="index.html"><img src="source/exit-icon.svg" alt=""></a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
132
ИП2/messages.html
Normal file
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Сообщения</title>
|
||||
<link rel="stylesheet" href="css/message-style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<span class="leftpart">
|
||||
<img src="source/logo.svg" alt="" class="logo">
|
||||
</span>
|
||||
|
||||
<span class="rightpart">
|
||||
<img src="source/photo.jpg" alt="" class="account-image">
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="page">
|
||||
<div class="leftbar">
|
||||
<div class="leftbar-content">
|
||||
<a href="profile.html">Профиль</a>
|
||||
<a href="lenta.html">Лента</a>
|
||||
<a href="messages.html">Сообщения</a>
|
||||
</div>
|
||||
|
||||
<div class="leftbar-settings">
|
||||
<a href="index.html">Настройки</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span>Ещё ▼</span>
|
||||
<div class="footer-menu">
|
||||
<a href="#">Разработчикам</a>
|
||||
<a href="#">О нас</a>
|
||||
<a href="#">Правовая информация</a>
|
||||
<a href="#">Помощь</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="chat">
|
||||
<div class="avatar">
|
||||
<img src="source/photo.jpg" alt="" class="avatar">
|
||||
</div>
|
||||
|
||||
<div class="chat-content">
|
||||
<h3 class="username">username</h3>
|
||||
<p class="message">Сделал вторую лабу</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat">
|
||||
<div class="avatar">
|
||||
<img src="source/photo.jpg" alt="" class="avatar">
|
||||
</div>
|
||||
|
||||
<div class="chat-content">
|
||||
<h3 class="username">username</h3>
|
||||
<p class="message">Сделал вторую лабу</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat">
|
||||
<div class="avatar">
|
||||
<img src="source/photo.jpg" alt="" class="avatar">
|
||||
</div>
|
||||
|
||||
<div class="chat-content">
|
||||
<h3 class="username">username</h3>
|
||||
<p class="message">Сделал вторую лабу</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat">
|
||||
<div class="avatar">
|
||||
<img src="source/photo.jpg" alt="" class="avatar">
|
||||
</div>
|
||||
|
||||
<div class="chat-content">
|
||||
<h3 class="username">username</h3>
|
||||
<p class="message">Сделал вторую лабу</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat">
|
||||
<div class="avatar">
|
||||
<img src="source/photo.jpg" alt="" class="avatar">
|
||||
</div>
|
||||
|
||||
<div class="chat-content">
|
||||
<h3 class="username">username</h3>
|
||||
<p class="message">Сделал вторую лабу</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat">
|
||||
<div class="avatar">
|
||||
<img src="source/photo.jpg" alt="" class="avatar">
|
||||
</div>
|
||||
|
||||
<div class="chat-content">
|
||||
<h3 class="username">username</h3>
|
||||
<p class="message">Сделал вторую лабу</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightbar">
|
||||
<div class="rightbar-content">
|
||||
<a href="#">Все</a>
|
||||
<a href="#">Непрочитанные</a>
|
||||
<a href="#">Архив</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bottombar">
|
||||
<a href="lenta.html"><img src="source/home-icon.svg" alt=""></a>
|
||||
<a href="messages.html"><img src="source/message-icon.svg" alt=""></a>
|
||||
<a href="profile.html"><img src="source/profile-icon.svg" alt=""></a>
|
||||
<a href="index.html"><img src="source/exit-icon.svg" alt=""></a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
84
ИП2/profile.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ваш профиль</title>
|
||||
<link rel="stylesheet" href="css/profile-style.css" />
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<span class="leftpart">
|
||||
<img src="source/logo.svg" alt="" class="logo">
|
||||
</span>
|
||||
|
||||
<span class="rightpart">
|
||||
<img src="source/photo.jpg" alt="" class="account-image">
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="page">
|
||||
<div class="leftbar">
|
||||
<div class="leftbar-content">
|
||||
<a href="profile.html">Профиль</a>
|
||||
<a href="lenta.html">Лента</a>
|
||||
<a href="messages.html">Сообщения</a>
|
||||
</div>
|
||||
|
||||
<div class="leftbar-settings">
|
||||
<a href="index.html">Настройки</a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<span>Ещё ▼</span>
|
||||
<div class="footer-menu">
|
||||
<a href="#">Разработчикам</a>
|
||||
<a href="#">О нас</a>
|
||||
<a href="#">Правовая информация</a>
|
||||
<a href="#">Помощь</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="profile-card">
|
||||
<div class="image">
|
||||
<img src="source/photo.jpg" alt="" class="profile-img">
|
||||
</div>
|
||||
|
||||
<div class="text-data">
|
||||
<span class="name">Павел Ладягин</span>
|
||||
<span class="about">Краткая информация о себе</span>
|
||||
</div>
|
||||
|
||||
<div class="more-info">
|
||||
<div class="location">
|
||||
<i class='bx bx-current-location'></i>
|
||||
<label>Ульяновск</label>
|
||||
</div>
|
||||
<div class="education">
|
||||
<i class='bx bxs-school'></i>
|
||||
<label>УлГТУ</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightbar">
|
||||
<div class="rightbar-content">
|
||||
<a href="#">Все</a>
|
||||
<a href="#">Непрочитанные</a>
|
||||
<a href="#">Архив</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bottombar">
|
||||
<a href="lenta.html"><img src="source/home-icon.svg" alt=""></a>
|
||||
<a href="messages.html"><img src="source/message-icon.svg" alt=""></a>
|
||||
<a href="profile.html"><img src="source/profile-icon.svg" alt=""></a>
|
||||
<a href="index.html"><img src="source/exit-icon.svg" alt=""></a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
ИП2/signup.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>СОЦИАЛьная сеть</title>
|
||||
<link rel="stylesheet" href="css/signup-style.css" />
|
||||
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="left-part">
|
||||
<img src="source/logo.svg" alt="">
|
||||
<div>
|
||||
<p class="first-part">СОЦИАЛ</p>
|
||||
<p class="last-part">ьная сеть</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-part">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="messages.html">Войти</a></li>
|
||||
<li><a href="#">Зарегистрироваться</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-div">
|
||||
<div class="login-page">
|
||||
<form action="">
|
||||
<h1>Регистрация</h1>
|
||||
<div class="input-div">
|
||||
<div class="input-box">
|
||||
<input type="text" placeholder="Логин">
|
||||
<i class='bx bxs-user'></i>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input type="password" placeholder="Пароль">
|
||||
<i class='bx bxs-lock-alt' ></i>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input type="password" placeholder="Подтвердите пароль">
|
||||
<i class='bx bxs-lock-alt' ></i>
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input type="text" placeholder="Почта">
|
||||
<i class='bx bx-envelope'></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" class="btn">Зарегистрироваться</button>
|
||||
|
||||
<div class="register-link">
|
||||
<p>У меня есть аккаунта</p>
|
||||
<a href="index.html">Войти</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4
ИП2/source/exit-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.002 0H2.002C0.899001 0 0.00200081 0.897 0.00200081 2V6H2.002V2H16.002V16H2.002V12H0.00200081V16C0.00200081 17.103 0.899001 18 2.002 18H16.002C17.105 18 18.002 17.103 18.002 16V2C18.002 0.897 17.104 0 16.002 0Z" fill="white"/>
|
||||
<path d="M8 13L13 9L8 5V8.001H0V10.001H8V13Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 403 B |
3
ИП2/source/home-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.9629 0.054492C23.753 0.0617304 23.5507 0.134847 23.3848 0.263476L0.384755 18.2107C0.175483 18.3739 0.0396014 18.6135 0.00700236 18.8769C-0.0255966 19.1402 0.0477576 19.4058 0.210928 19.615C0.374098 19.8243 0.613719 19.9602 0.877075 19.9928C1.14043 20.0254 1.40595 19.952 1.61522 19.7889L2.99999 18.7088V44.9998C3.00002 45.265 3.10538 45.5194 3.29291 45.7069C3.48044 45.8944 3.73478 45.9998 3.99999 45.9998H17.832C17.94 46.0177 18.0502 46.0177 18.1582 45.9998H29.832C29.94 46.0177 30.0502 46.0177 30.1582 45.9998H44C44.2652 45.9998 44.5195 45.8944 44.7071 45.7069C44.8946 45.5194 45 45.265 45 44.9998V18.7088L46.3848 19.7889C46.4884 19.8697 46.6069 19.9293 46.7336 19.9643C46.8602 19.9993 46.9925 20.009 47.1229 19.9928C47.2533 19.9767 47.3793 19.935 47.4936 19.8702C47.6079 19.8054 47.7083 19.7187 47.7891 19.6151C47.8699 19.5115 47.9295 19.3929 47.9645 19.2663C47.9995 19.1396 48.0092 19.0073 47.993 18.8769C47.9769 18.7465 47.9352 18.6205 47.8704 18.5062C47.8056 18.3919 47.7189 18.2915 47.6152 18.2107L40 12.2693V4.9998H34V7.58574L24.6152 0.263476C24.4292 0.119197 24.1981 0.0451914 23.9629 0.054492ZM24 2.32207L43 17.1482V43.9998H31V24.9998H17V43.9998H4.99999V17.1482L24 2.32207ZM36 6.9998H38V10.7088L36 9.14629V6.9998ZM19 26.9998H29V43.9998H19V26.9998Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
6
ИП2/source/logo.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="323" height="330" viewBox="0 0 323 330" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M166.19 69.5299L100.78 62.6699L29.04 131.77L66.49 169.75L166.19 69.5299Z" fill="#FCD116"/>
|
||||
<path d="M99.6401 136.43L279.07 317.44L282.17 320.6C282.17 320.6 284.35 323.07 288.2 323.86C292.06 324.65 292.55 325.94 300.36 323.86C308.17 321.78 310.65 316.74 310.65 316.74C310.65 316.74 314.7 310.71 314.61 306.65C314.51 302.6 313.72 297.75 310.56 294.49C307.4 291.23 297.8 281.24 297.8 281.24L125.74 110.19L99.6401 136.43Z" fill="#BF1723"/>
|
||||
<path d="M97.8098 232.52C97.8098 232.52 94.8398 228.96 91.2798 228.76C87.7198 228.56 85.3498 228.96 82.9698 230.64C80.5898 232.32 81.5898 234.3 81.5898 234.3H77.8298C77.8298 234.3 69.7198 236.48 68.3398 238.45C66.9598 240.43 62.7998 247.55 62.4098 250.32C62.0198 253.09 30.5598 271.88 30.5598 271.88C30.5598 271.88 14.1398 286.52 11.3698 291.66C8.59979 296.8 5.82979 304.32 7.21979 311.04C8.59979 317.77 13.7498 321.52 13.7498 321.52C13.7498 321.52 21.0698 325.67 26.7998 324.88C32.5298 324.09 34.9098 324.68 45.7898 315.78C56.6698 306.88 62.0098 297.98 62.0098 297.98L72.2998 281.56L78.4298 271.87C78.4298 271.87 81.1998 271.28 84.5598 269.69C87.9198 268.11 95.2398 264.55 96.6298 260.79C98.0098 257.03 97.8198 255.84 97.8198 255.84C97.8198 255.84 99.3998 255.84 101.38 250.89C103.36 245.94 97.8098 232.52 97.8098 232.52Z" fill="#BF1723"/>
|
||||
<path d="M171.99 3.37012L190.48 14.7401L210.75 28.9801L231.82 45.6901L245.17 57.9501L255.26 68.6301L263.63 78.4201C263.63 78.4201 275.5 92.8601 278.93 99.9101C282.36 106.96 290.37 118.87 294.03 130.64C297.69 142.41 302.24 158.73 302.14 170.4C302.04 182.07 300.16 204.52 295.61 214.41C291.06 224.3 281.76 245.86 271.28 254.17C260.8 262.48 237.06 280.58 237.06 280.58C237.06 280.58 212.93 291.06 197.5 292.45C182.07 293.84 157.74 291.07 149.83 287.5C141.92 283.94 118.38 275.63 107.1 263.57C95.8299 251.5 88.1099 240.82 88.1099 240.82L107.1 222.62C107.1 222.62 120.15 237.46 134.59 242.6C149.03 247.74 164.26 253.28 184.04 251.3C203.82 249.32 224.19 239.63 224.19 239.63C224.19 239.63 244.76 226.58 253.46 206.79C262.16 187.01 262.95 161.3 255.24 135.98C247.53 110.66 234.87 88.1101 234.87 88.1101C234.87 88.1101 208.17 44.2001 203.42 40.8401C198.69 37.4901 171.99 3.37012 171.99 3.37012Z" fill="#FCD116"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
BIN
ИП2/source/meme1.jpg
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
ИП2/source/meme2.jpg
Normal file
|
After Width: | Height: | Size: 158 KiB |
BIN
ИП2/source/meme3.jpg
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
ИП2/source/meme4.jpg
Normal file
|
After Width: | Height: | Size: 102 KiB |
BIN
ИП2/source/meme5.jpg
Normal file
|
After Width: | Height: | Size: 52 KiB |
6
ИП2/source/message-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="669" height="608" viewBox="0 0 669 608" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M33.265 607.169C29.796 607.169 26.387 605.874 23.763 603.432C19.932 599.868 18.419 594.459 19.844 589.424L53.914 469.04C18.725 419.919 0.162003 363.025 0.162003 304.06C0.162003 262.963 9.06701 223.103 26.63 185.588C43.542 149.463 67.724 117.046 98.503 89.237C161.523 32.301 245.217 0.945007 334.168 0.945007C423.122 0.945007 506.818 32.301 569.839 89.237C600.618 117.046 624.801 149.463 641.713 185.588C659.276 223.103 668.181 262.963 668.181 304.06C668.181 345.155 659.276 385.014 641.713 422.528C624.801 458.653 600.618 491.069 569.839 518.877C506.818 575.813 423.122 607.169 334.168 607.169C272.121 607.169 211.813 591.697 159.3 562.364L38.017 606.334C36.467 606.896 34.859 607.169 33.265 607.169ZM160.612 533.107C163.057 533.107 165.487 533.75 167.648 535.012C217.214 563.97 274.796 579.277 334.167 579.277C416.199 579.277 493.255 550.477 551.139 498.181C608.627 446.243 640.287 377.304 640.287 304.061C640.287 230.815 608.627 161.873 551.139 109.936C493.255 57.64 416.2 28.839 334.167 28.839C252.138 28.839 175.084 57.64 117.201 109.936C59.714 161.874 28.054 230.816 28.054 304.061C28.054 359.198 46.133 412.396 80.337 457.905C82.954 461.386 83.794 465.891 82.608 470.082L54.093 570.837L155.86 533.942C157.401 533.383 159.01 533.107 160.612 533.107Z" fill="white"/>
|
||||
<path d="M440.419 402.182H153.893C146.191 402.182 139.947 395.938 139.947 388.236C139.947 380.534 146.191 374.29 153.893 374.29H440.419C448.121 374.29 454.365 380.534 454.365 388.236C454.365 395.938 448.121 402.182 440.419 402.182Z" fill="white"/>
|
||||
<path d="M514.448 318.003H153.893C146.191 318.003 139.947 311.759 139.947 304.057C139.947 296.355 146.191 290.111 153.893 290.111H514.448C522.15 290.111 528.394 296.355 528.394 304.057C528.394 311.759 522.15 318.003 514.448 318.003Z" fill="white"/>
|
||||
<path d="M514.448 233.826H153.893C146.191 233.826 139.947 227.582 139.947 219.88C139.947 212.178 146.191 205.934 153.893 205.934H514.448C522.15 205.934 528.394 212.178 528.394 219.88C528.394 227.582 522.15 233.826 514.448 233.826Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
ИП2/source/photo.jpg
Normal file
|
After Width: | Height: | Size: 356 KiB |
10
ИП2/source/profile-icon.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="428" height="428" viewBox="0 0 428 428" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3_100)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M199.5 1.03578C163.394 3.43679 127.681 15.3168 98 34.8018C84.295 43.7998 76.669 49.9688 64.63 61.7998C30.476 95.3648 9.58699 136.587 2.45399 184.5C0.201994 199.629 0.212996 227.823 2.478 243.5C7.987 281.635 23.311 317.238 47.026 347C55.453 357.575 75.042 376.781 85 384.231C114.449 406.264 147.76 420.093 184.5 425.538C199.308 427.733 228.803 427.738 243.5 425.547C280.235 420.073 313.627 406.207 343 384.231C352.958 376.781 372.547 357.575 380.974 347C404.616 317.33 419.695 282.336 425.573 243.5C427.791 228.843 427.78 199.441 425.55 184.5C420.85 153.009 409.639 123.097 393.055 97.7978C384.244 84.3568 378.038 76.6828 366.2 64.5908C322.341 19.7908 262.214 -3.13322 199.5 1.03578ZM229.699 23.0078C303.453 29.5368 365.275 75.5218 392.359 144C401.417 166.902 405.28 187.832 405.277 214C405.274 240.064 401.203 261.901 392.036 285.032C384.876 303.1 372.169 324.192 360.227 337.835L354.682 344.169L352.497 338.835C338.115 303.72 309.622 274.318 275.006 258.871C269.002 256.192 263.619 254 263.045 254C262.47 254 262 253.55 262 253C262 252.45 262.455 252 263.011 252C264.865 252 280.202 236.58 284.206 230.691C294.644 215.336 299.182 200.581 299.182 182C299.182 166.457 297.058 157.518 290.034 143.5C281.672 126.813 268.989 114.121 252.5 105.937C238.374 98.9258 229.474 96.8178 214 96.8178C198.457 96.8178 189.518 98.9418 175.5 105.966C153.687 116.897 137.129 137.499 130.869 161.5C127.953 172.676 127.976 191.296 130.919 202.5C133.458 212.167 139.441 224.98 144.784 232.194C149.052 237.957 163.388 252 165.003 252C167.922 252 165.162 253.949 158.75 256.416C122.293 270.443 90.705 301.717 75.503 338.835L73.318 344.169L67.773 337.835C55.831 324.192 43.124 303.1 35.964 285.032C22.115 250.088 18.83 211.588 26.53 174.457C42.729 96.3408 107.189 35.7338 186 24.5228C204.236 21.9278 213.766 21.5978 229.699 23.0078ZM230.539 120.552C254.543 126.804 272.639 147.171 276.797 172.616C278.179 181.068 278.177 182.942 276.779 191.494C272.202 219.505 251.505 240.202 223.494 244.779C214.942 246.177 213.068 246.179 204.616 244.797C185.349 241.649 168.746 230.529 159.241 214.408C144.475 189.366 148.503 157.592 169.048 137.048C185.179 120.916 208.213 114.737 230.539 120.552ZM235.619 269.546C281.127 277.466 318.697 309.167 334.407 352.901L337.066 360.301L334.824 362.687C330.891 366.874 309.862 380.423 299 385.77C280.495 394.878 262.6 400.459 241.585 403.676C226.794 405.941 201.177 405.936 186.346 403.666C162.687 400.045 137.287 391.18 117.956 379.797C108.563 374.266 92.822 363.139 91.606 361.171C91.263 360.617 92.169 356.865 93.617 352.832C107.023 315.514 136.007 286.96 173.055 274.576C178.86 272.636 187.185 270.403 191.555 269.614C202.39 267.658 224.575 267.623 235.619 269.546Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3_100">
|
||||
<rect width="428" height="428" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
3
ИП2/source/settings-icon.svg
Normal file
|
After Width: | Height: | Size: 8.1 KiB |