├── sass ├── layout │ ├── _index.scss │ ├── _container.scss │ ├── _footer.scss │ └── _header.scss ├── abstract │ ├── _variables.scss │ └── _mixins.scss ├── base │ └── _base.scss └── main.scss ├── images ├── footer-bg.png ├── header-bg.png ├── header-main-img.png └── possibilities-img.png ├── javascript └── app.js ├── css ├── main.css.map └── main.css └── index.html /sass/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @use "header"; 2 | @use "footer"; 3 | @use "container"; -------------------------------------------------------------------------------- /images/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/moveon/HEAD/images/footer-bg.png -------------------------------------------------------------------------------- /images/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/moveon/HEAD/images/header-bg.png -------------------------------------------------------------------------------- /images/header-main-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/moveon/HEAD/images/header-main-img.png -------------------------------------------------------------------------------- /images/possibilities-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/moveon/HEAD/images/possibilities-img.png -------------------------------------------------------------------------------- /sass/abstract/_variables.scss: -------------------------------------------------------------------------------- 1 | $white: #fff; 2 | $light: #B0B0B0; 3 | $hover-link: #8253d8e5; 4 | 5 | $main-bg: linear-gradient(180deg, #8253D8 0%, #D05DDE 100%); -------------------------------------------------------------------------------- /javascript/app.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.querySelector('.menu-btn'); 2 | const nav = document.getElementById('nav') 3 | let menuOpen = false; 4 | menuBtn.addEventListener('click', () => { 5 | if (!menuOpen) { 6 | menuBtn.classList.add('open'); 7 | menuOpen = true; 8 | } else { 9 | menuBtn.classList.remove('open'); 10 | menuOpen = false; 11 | } 12 | nav.classList.toggle('fixed-nav') 13 | menuBtn.classList.toggle('fixed') 14 | }); -------------------------------------------------------------------------------- /sass/abstract/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin media-sm { 2 | @media screen and (min-width: 600px) { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin media-md { 8 | @media screen and (min-width: 700px) { 9 | @content; 10 | } 11 | } 12 | 13 | @mixin media-lg { 14 | @media screen and (min-width: 900px) { 15 | @content; 16 | } 17 | } 18 | 19 | @mixin media-xl { 20 | @media screen and (min-width: 1100px) { 21 | @content; 22 | } 23 | } 24 | 25 | @mixin transition-ease { 26 | transition: all 1s ease-in-out; 27 | } -------------------------------------------------------------------------------- /sass/layout/_container.scss: -------------------------------------------------------------------------------- 1 | @use '../abstract/mixins'; 2 | 3 | .container { 4 | width: 100%; 5 | margin-left: auto; 6 | margin-right: auto; 7 | padding-left: 20px; 8 | padding-right: 20px; 9 | } 10 | 11 | @include mixins.media-sm { 12 | .container { 13 | width: 600px; 14 | } 15 | } 16 | 17 | @include mixins.media-md { 18 | .container { 19 | width: 700px; 20 | } 21 | } 22 | 23 | @include mixins.media-lg { 24 | .container { 25 | width: 900px; 26 | } 27 | } 28 | 29 | @include mixins.media-xl { 30 | .container { 31 | width: 1100px; 32 | } 33 | } -------------------------------------------------------------------------------- /sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @use "../abstract/mixins"; 2 | @use "../abstract/variables" as vars; 3 | 4 | @import url(https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;800;900&display=swap); 5 | 6 | 7 | *, 8 | *::before, 9 | *::after { 10 | box-sizing: border-box; 11 | transition: .3s; 12 | } 13 | 14 | html { 15 | scroll-behavior: smooth; 16 | } 17 | 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | font-family: 'Jost', sans-serif; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | } 27 | 28 | ul { 29 | list-style: none; 30 | padding: 0; 31 | } 32 | 33 | .hidden { 34 | display: none; 35 | } 36 | 37 | .fixed { 38 | position: fixed !important; 39 | } 40 | -------------------------------------------------------------------------------- /sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | @use "../abstract/variables" as vars; 2 | @use '../abstract/mixins'; 3 | 4 | .footer { 5 | position: relative; 6 | margin-top: 200px; 7 | 8 | &-bg { 9 | position: absolute; 10 | width: 100%; 11 | height: 80vh; 12 | bottom: 0; 13 | left: 0; 14 | z-index: -1; 15 | } 16 | 17 | &-top { 18 | display: flex; 19 | flex-direction: column; 20 | } 21 | 22 | &__about { 23 | display: none; 24 | } 25 | 26 | &__about, 27 | &__contact, 28 | &__social { 29 | h1 { 30 | font-weight: 700; 31 | font-size: 28px; 32 | color: vars.$white; 33 | } 34 | 35 | p { 36 | font-weight: 400; 37 | font-size: 18px; 38 | line-height: 124%; 39 | color: vars.$white; 40 | } 41 | } 42 | 43 | &__social { 44 | ul { 45 | display: flex; 46 | gap: 20px; 47 | } 48 | } 49 | 50 | hr { 51 | margin: 40px 0 10px; 52 | } 53 | 54 | 55 | 56 | &__copyright { 57 | p { 58 | margin: 0; 59 | padding: 20px 0; 60 | text-align: center; 61 | font-weight: 400; 62 | font-size: 20px; 63 | color: vars.$white; 64 | } 65 | } 66 | } 67 | 68 | @include mixins.media-lg { 69 | .footer { 70 | &-top { 71 | flex-direction: row; 72 | gap: 100px; 73 | } 74 | &__about { 75 | display: block; 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/base/_base.scss","../sass/layout/_header.scss","../sass/abstract/_variables.scss","../sass/abstract/_mixins.scss","../sass/layout/_footer.scss","../sass/layout/_container.scss","../sass/main.scss"],"names":[],"mappings":"AAGQ;AAGR;AAAA;AAAA;EAGI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AChCA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,OCxBA;;AD2BJ;EACI;EACA;EACA;;AACA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBCzCC;ED0CD;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA,OCxDA;EDyDA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA,YCrEJ;EDsEI;EACA;EACA;EACA;EACA;;AAGJ;EACI,OC5EC;ED6ED;;AAEA;EACI;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,kBC/FA;;ADiGA;EACI;;AAGJ;EACI;;AAGJ;EACI,OCxGC;;;AD6Gb;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,YC/HA;EDgIA;EACA;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA,YC1IJ;ED2II;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,OCjLA;;ADoLJ;EACI;EACA;EACA;EACA,OCxLA;;AD2LJ;EACI;EACA;EACA;EACA,OC/LA;EDgMA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,YCxMJ;EDyMI,OCvMC;;AD2MT;EACI;EACA;;AAEA;EACI;;;AEjNR;EFwNI;IACI;;EAIA;IACI;;;AE5MZ;EFoNI;IACI;IACA;IACA;;EACA;IACI;;EAKZ;IACI;;EAGJ;IACI;IACA;IACA;;EAEA;IACI;;EAGJ;IACI;;EAEA;IACI;;EAIR;IACI;;;AGpQZ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAMA;EACI;EACA;EACA,OF/BJ;;AEkCA;EACI;EACA;EACA;EACA,OFtCJ;;AE2CA;EACI;EACA;;AAIR;EACI;;AAMA;EACI;EACA;EACA;EACA;EACA;EACA,OF9DJ;;;ACaJ;ECwDI;IACI;IACA;;EAEJ;IACI;;;ACxEZ;EACI;EACA;EACA;EACA;EACA;;;AFNA;EEUA;IACI;;;AFLJ;EEUA;IACI;;;AFLJ;EEUA;IACI;;;AFLJ;EEUA;IACI;;;ACzBR;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA,YJjEF;EIkEE;EACA;EACA;;AAEA;EACI;EACA;;AAMR;EACI;;AAGI;EACI;;AAGJ;EACI;;AAMhB;EACI;;AAEA;EACI;;AAKJ;EACI;;AAGI;EACI;;AAGJ;EACI;;;AHlHhB;EG4HQ;IACI;;;AHjHZ;EGyHI;IACI;;EAGJ;IACI;;EAIA;IACI;;EAGI;IACI;;EAGJ;IACI","file":"main.css"} -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | @use "abstract/variables" as vars; 2 | @use "abstract/mixins"; 3 | @use "base/base"; 4 | @use "layout/index"; 5 | 6 | .possibilities { 7 | margin-top: 140px; 8 | 9 | &__title { 10 | text-align: center; 11 | font-weight: 500; 12 | font-size: 46px; 13 | margin: 0; 14 | } 15 | 16 | &__subtitle { 17 | font-weight: 400; 18 | font-size: 18px; 19 | line-height: 124%; 20 | text-align: center; 21 | letter-spacing: 0.08em; 22 | color: #ABABAB; 23 | margin: 0; 24 | } 25 | 26 | &__main { 27 | margin-top: 50px; 28 | display: flex; 29 | justify-content: space-between; 30 | flex-direction: column; 31 | gap: 20px; 32 | } 33 | 34 | &__list { 35 | display: flex; 36 | flex-direction: column; 37 | gap: 60px; 38 | } 39 | 40 | &__item { 41 | display: flex; 42 | text-align: right; 43 | gap: 20px; 44 | width: 100%; 45 | 46 | &-content { 47 | width: 80%; 48 | 49 | h3 { 50 | font-weight: 500; 51 | font-size: 22px; 52 | line-height: 124%; 53 | color: #000000; 54 | margin: 0; 55 | } 56 | 57 | p { 58 | font-weight: 400; 59 | font-size: 18px; 60 | line-height: 124%; 61 | color: #B0B0B0; 62 | margin: 0; 63 | } 64 | } 65 | 66 | &-img { 67 | width: 60px; 68 | height: 60px; 69 | border-radius: 50%; 70 | background: vars.$main-bg; 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | 75 | i { 76 | font-size: 25px; 77 | color: #fff; 78 | } 79 | } 80 | } 81 | 82 | &__left { 83 | .possibilities__item { 84 | flex-direction: row-reverse; 85 | 86 | &-content { 87 | h3 { 88 | text-align: left; 89 | } 90 | 91 | p { 92 | text-align: left; 93 | } 94 | } 95 | } 96 | } 97 | 98 | &__middle { 99 | text-align: center; 100 | 101 | img { 102 | width: 100%; 103 | } 104 | } 105 | 106 | &__right { 107 | .possibilities__item { 108 | flex-direction: row-reverse; 109 | 110 | &-content { 111 | h3 { 112 | text-align: left; 113 | } 114 | 115 | p { 116 | text-align: left; 117 | } 118 | } 119 | } 120 | } 121 | } 122 | 123 | @include mixins.media-sm { 124 | .possibilities { 125 | &__middle { 126 | img { 127 | width: 300px; 128 | } 129 | } 130 | } 131 | } 132 | 133 | @include mixins.media-lg { 134 | .possibilities { 135 | &__main { 136 | flex-direction: row; 137 | } 138 | 139 | &__item { 140 | width: 350px; 141 | } 142 | 143 | &__left { 144 | .possibilities__item { 145 | flex-direction: row; 146 | 147 | &-content { 148 | h3 { 149 | text-align: right; 150 | } 151 | 152 | p { 153 | text-align: right; 154 | } 155 | } 156 | } 157 | } 158 | } 159 | } -------------------------------------------------------------------------------- /sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | @use "../abstract/variables" as vars; 2 | @use "../abstract/mixins"; 3 | @use "../base/base"; 4 | 5 | .header { 6 | &-bg { 7 | position: absolute; 8 | width: 100%; 9 | height: 110vh; 10 | left: 0; 11 | top: 0; 12 | z-index: -1; 13 | } 14 | } 15 | 16 | .navbar { 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | padding: 30px 0; 21 | 22 | &__logo { 23 | font-weight: 500; 24 | font-size: 32px; 25 | color: vars.$white; 26 | } 27 | 28 | &__list { 29 | position: fixed; 30 | top: 0; 31 | right: -100%; 32 | &>div { 33 | display: flex; 34 | justify-content: space-around; 35 | } 36 | 37 | &.fixed-nav { 38 | display: flex; 39 | flex-direction: column; 40 | gap: 20px; 41 | right: 0; 42 | top: 0; 43 | margin: 0; 44 | background-color: vars.$hover-link; 45 | z-index: 1000; 46 | width: 70%; 47 | height: 100vh; 48 | padding: 20px; 49 | padding-top: 70px; 50 | transition: 0.5s; 51 | } 52 | } 53 | 54 | &__link { 55 | position: relative; 56 | font-size: 1.1em; 57 | color: vars.$white; 58 | font-weight: 600; 59 | text-decoration: none; 60 | margin-left: 20px; 61 | padding: 6px 15px; 62 | transition: .5s; 63 | 64 | span { 65 | position: absolute; 66 | top: 0; 67 | left: 0; 68 | width: 100%; 69 | height: 100%; 70 | background: vars.$white; 71 | border-radius: 30px; 72 | z-index: -1; 73 | transform: scale(0); 74 | opacity: 0; 75 | transition: .5s; 76 | } 77 | 78 | &:hover { 79 | color: vars.$hover-link; 80 | z-index: 2; 81 | 82 | span { 83 | transform: scale(1); 84 | opacity: 1; 85 | } 86 | } 87 | } 88 | 89 | &__social-network { 90 | width: 30px; 91 | height: 30px; 92 | border-radius: 50%; 93 | display: flex; 94 | align-items: center; 95 | justify-content: center; 96 | background-color: vars.$white; 97 | 98 | &:hover { 99 | opacity: .6; 100 | } 101 | 102 | &:active { 103 | transform: scale(0.9); 104 | } 105 | 106 | i { 107 | color: vars.$hover-link; 108 | } 109 | } 110 | } 111 | 112 | .menu-btn { 113 | position: absolute; 114 | top: 30px; 115 | right: 30px; 116 | display: flex; 117 | justify-content: center; 118 | align-items: center; 119 | width: 40px; 120 | height: 40px; 121 | cursor: pointer; 122 | transition: all .5s ease-in-out; 123 | z-index: 1001; 124 | 125 | &__burger { 126 | width: 25px; 127 | height: 4px; 128 | background: vars.$white; 129 | border-radius: 5px; 130 | box-shadow: 0 2px 5px vars.$hover-link; 131 | transition: all .3s ease-in-out; 132 | 133 | &::before, 134 | &::after { 135 | content: ''; 136 | position: absolute; 137 | width: 25px; 138 | height: 4px; 139 | background: vars.$white; 140 | border-radius: 5px; 141 | box-shadow: 0 2px 5px vars.$hover-link; 142 | transition: all .3s ease-in-out; 143 | } 144 | 145 | &::before { 146 | transform: translateY(-8px); 147 | } 148 | 149 | &::after { 150 | transform: translateY(8px); 151 | } 152 | } 153 | 154 | &.open &__burger { 155 | transform: translateX(-50px); 156 | background: transparent; 157 | box-shadow: none; 158 | 159 | &::before { 160 | transform: rotate(45deg) translate(35px, -35px); 161 | } 162 | 163 | &::after { 164 | transform: rotate(-45deg) translate(35px, 35px); 165 | } 166 | } 167 | } 168 | 169 | .home { 170 | display: flex; 171 | flex-direction: column; 172 | text-align: center; 173 | 174 | &__title { 175 | font-weight: 700; 176 | font-size: 32px; 177 | line-height: 124%; 178 | color: vars.$white; 179 | } 180 | 181 | &__subtitle { 182 | font-weight: 400; 183 | font-size: 16px; 184 | line-height: 124%; 185 | color: vars.$white; 186 | } 187 | 188 | a { 189 | font-weight: 700; 190 | font-size: 17px; 191 | line-height: 124%; 192 | color: vars.$white; 193 | border: 2px solid vars.$white; 194 | border-radius: 50px; 195 | padding: 8px 25px; 196 | display: block; 197 | margin-top: 20px; 198 | transition: .4s; 199 | 200 | &:hover { 201 | background: vars.$white; 202 | color: vars.$hover-link; 203 | } 204 | } 205 | 206 | &__img { 207 | text-align: center; 208 | margin-top: 30px; 209 | 210 | img { 211 | width: 100%; 212 | } 213 | } 214 | } 215 | 216 | @include mixins.media-sm { 217 | .home { 218 | a { 219 | display: inline-block; 220 | } 221 | 222 | &__img { 223 | img { 224 | width: 400px; 225 | } 226 | } 227 | } 228 | } 229 | 230 | @include mixins.media-xl { 231 | .navbar { 232 | &__list { 233 | position: static; 234 | display: flex; 235 | gap: 10px; 236 | &>div { 237 | gap: 10px; 238 | } 239 | } 240 | } 241 | 242 | .menu-btn { 243 | display: none; 244 | } 245 | 246 | .home { 247 | flex-direction: row; 248 | gap: 80px; 249 | text-align: left; 250 | 251 | &__title { 252 | font-size: 48px; 253 | } 254 | 255 | &__subtitle { 256 | font-size: 20px; 257 | 258 | &+a { 259 | margin-right: 30px; 260 | } 261 | } 262 | 263 | &__img { 264 | margin-top: 0; 265 | } 266 | } 267 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | Moveon 11 | 12 | 13 | 14 |
15 | 16 |
17 | 54 |
55 |
56 |

НАЙДИ СВОЮ КОМПАНИЮ ДРУЗЕЙ

57 |

С помощью приложения Moveon найди свою компанию для походов в кафе, бар или для 58 | прогулок по городу

59 | APP STORE 60 | PLAY MARKET 61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 |

Possibilities

73 |

Moveon поможет найти единомышленников и собрать большую компанию в одном месте.

74 |
75 |
    76 |
  • 77 |
    78 |

    Join the events

    79 |

    Find the events that interest you on the main screen and press I want to go

    80 |
    81 |
    82 | 83 |
    84 |
    • 85 | 86 |
  • 87 |
    88 |

    Search events by filters

    89 |

    To search for events, we offer more than 10 filters

    90 |
    91 |
    92 | 93 |
    94 |
    • 95 | 96 |
  • 97 |
    98 |

    Where will your friends go?

    99 |

    In any profile, all events that the user has attended or plans to go to are visible

    100 |
    101 |
    102 | 103 |
    104 |
    • 105 | 106 | 107 |
108 |
109 | 110 |
111 |
    112 |
  • 113 |
    114 |

    Create your events

    115 |

    Click on the plus sign in the main menu, create your own event and approve the participation of new friends

    116 |
    117 |
    118 | 119 |
    120 |
    • 121 | 122 |
  • 123 |
    124 |

    Chats and Conversations

    125 |

    Chat with friends, discuss events in conversations

    126 |
    127 |
    128 | 129 |
    130 |
    • 131 | 132 |
  • 133 |
    134 |

    Leave marks on the map

    135 |

    Mark on the map to find a company faster

    136 |
    137 |
    138 | 139 |
    140 |
    • 141 |
142 |
143 |
144 | 145 |
146 |
147 | 148 | 182 | 183 | 184 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;800;900&display=swap); 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | transition: 0.3s; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | body { 14 | margin: 0; 15 | padding: 0; 16 | font-family: "Jost", sans-serif; 17 | } 18 | 19 | a { 20 | text-decoration: none; 21 | } 22 | 23 | ul { 24 | list-style: none; 25 | padding: 0; 26 | } 27 | 28 | .hidden { 29 | display: none; 30 | } 31 | 32 | .fixed { 33 | position: fixed !important; 34 | } 35 | 36 | .header-bg { 37 | position: absolute; 38 | width: 100%; 39 | height: 110vh; 40 | left: 0; 41 | top: 0; 42 | z-index: -1; 43 | } 44 | 45 | .navbar { 46 | display: flex; 47 | justify-content: space-between; 48 | align-items: center; 49 | padding: 30px 0; 50 | } 51 | .navbar__logo { 52 | font-weight: 500; 53 | font-size: 32px; 54 | color: #fff; 55 | } 56 | .navbar__list { 57 | position: fixed; 58 | top: 0; 59 | right: -100%; 60 | } 61 | .navbar__list > div { 62 | display: flex; 63 | justify-content: space-around; 64 | } 65 | .navbar__list.fixed-nav { 66 | display: flex; 67 | flex-direction: column; 68 | gap: 20px; 69 | right: 0; 70 | top: 0; 71 | margin: 0; 72 | background-color: rgba(130, 83, 216, 0.8980392157); 73 | z-index: 1000; 74 | width: 70%; 75 | height: 100vh; 76 | padding: 20px; 77 | padding-top: 70px; 78 | transition: 0.5s; 79 | } 80 | .navbar__link { 81 | position: relative; 82 | font-size: 1.1em; 83 | color: #fff; 84 | font-weight: 600; 85 | text-decoration: none; 86 | margin-left: 20px; 87 | padding: 6px 15px; 88 | transition: 0.5s; 89 | } 90 | .navbar__link span { 91 | position: absolute; 92 | top: 0; 93 | left: 0; 94 | width: 100%; 95 | height: 100%; 96 | background: #fff; 97 | border-radius: 30px; 98 | z-index: -1; 99 | transform: scale(0); 100 | opacity: 0; 101 | transition: 0.5s; 102 | } 103 | .navbar__link:hover { 104 | color: rgba(130, 83, 216, 0.8980392157); 105 | z-index: 2; 106 | } 107 | .navbar__link:hover span { 108 | transform: scale(1); 109 | opacity: 1; 110 | } 111 | .navbar__social-network { 112 | width: 30px; 113 | height: 30px; 114 | border-radius: 50%; 115 | display: flex; 116 | align-items: center; 117 | justify-content: center; 118 | background-color: #fff; 119 | } 120 | .navbar__social-network:hover { 121 | opacity: 0.6; 122 | } 123 | .navbar__social-network:active { 124 | transform: scale(0.9); 125 | } 126 | .navbar__social-network i { 127 | color: rgba(130, 83, 216, 0.8980392157); 128 | } 129 | 130 | .menu-btn { 131 | position: absolute; 132 | top: 30px; 133 | right: 30px; 134 | display: flex; 135 | justify-content: center; 136 | align-items: center; 137 | width: 40px; 138 | height: 40px; 139 | cursor: pointer; 140 | transition: all 0.5s ease-in-out; 141 | z-index: 1001; 142 | } 143 | .menu-btn__burger { 144 | width: 25px; 145 | height: 4px; 146 | background: #fff; 147 | border-radius: 5px; 148 | box-shadow: 0 2px 5px rgba(130, 83, 216, 0.8980392157); 149 | transition: all 0.3s ease-in-out; 150 | } 151 | .menu-btn__burger::before, .menu-btn__burger::after { 152 | content: ""; 153 | position: absolute; 154 | width: 25px; 155 | height: 4px; 156 | background: #fff; 157 | border-radius: 5px; 158 | box-shadow: 0 2px 5px rgba(130, 83, 216, 0.8980392157); 159 | transition: all 0.3s ease-in-out; 160 | } 161 | .menu-btn__burger::before { 162 | transform: translateY(-8px); 163 | } 164 | .menu-btn__burger::after { 165 | transform: translateY(8px); 166 | } 167 | .menu-btn.open .menu-btn__burger { 168 | transform: translateX(-50px); 169 | background: transparent; 170 | box-shadow: none; 171 | } 172 | .menu-btn.open .menu-btn__burger::before { 173 | transform: rotate(45deg) translate(35px, -35px); 174 | } 175 | .menu-btn.open .menu-btn__burger::after { 176 | transform: rotate(-45deg) translate(35px, 35px); 177 | } 178 | 179 | .home { 180 | display: flex; 181 | flex-direction: column; 182 | text-align: center; 183 | } 184 | .home__title { 185 | font-weight: 700; 186 | font-size: 32px; 187 | line-height: 124%; 188 | color: #fff; 189 | } 190 | .home__subtitle { 191 | font-weight: 400; 192 | font-size: 16px; 193 | line-height: 124%; 194 | color: #fff; 195 | } 196 | .home a { 197 | font-weight: 700; 198 | font-size: 17px; 199 | line-height: 124%; 200 | color: #fff; 201 | border: 2px solid #fff; 202 | border-radius: 50px; 203 | padding: 8px 25px; 204 | display: block; 205 | margin-top: 20px; 206 | transition: 0.4s; 207 | } 208 | .home a:hover { 209 | background: #fff; 210 | color: rgba(130, 83, 216, 0.8980392157); 211 | } 212 | .home__img { 213 | text-align: center; 214 | margin-top: 30px; 215 | } 216 | .home__img img { 217 | width: 100%; 218 | } 219 | 220 | @media screen and (min-width: 600px) { 221 | .home a { 222 | display: inline-block; 223 | } 224 | .home__img img { 225 | width: 400px; 226 | } 227 | } 228 | @media screen and (min-width: 1100px) { 229 | .navbar__list { 230 | position: static; 231 | display: flex; 232 | gap: 10px; 233 | } 234 | .navbar__list > div { 235 | gap: 10px; 236 | } 237 | .menu-btn { 238 | display: none; 239 | } 240 | .home { 241 | flex-direction: row; 242 | gap: 80px; 243 | text-align: left; 244 | } 245 | .home__title { 246 | font-size: 48px; 247 | } 248 | .home__subtitle { 249 | font-size: 20px; 250 | } 251 | .home__subtitle + a { 252 | margin-right: 30px; 253 | } 254 | .home__img { 255 | margin-top: 0; 256 | } 257 | } 258 | .footer { 259 | position: relative; 260 | margin-top: 200px; 261 | } 262 | .footer-bg { 263 | position: absolute; 264 | width: 100%; 265 | height: 80vh; 266 | bottom: 0; 267 | left: 0; 268 | z-index: -1; 269 | } 270 | .footer-top { 271 | display: flex; 272 | flex-direction: column; 273 | } 274 | .footer__about { 275 | display: none; 276 | } 277 | .footer__about h1, .footer__contact h1, .footer__social h1 { 278 | font-weight: 700; 279 | font-size: 28px; 280 | color: #fff; 281 | } 282 | .footer__about p, .footer__contact p, .footer__social p { 283 | font-weight: 400; 284 | font-size: 18px; 285 | line-height: 124%; 286 | color: #fff; 287 | } 288 | .footer__social ul { 289 | display: flex; 290 | gap: 20px; 291 | } 292 | .footer hr { 293 | margin: 40px 0 10px; 294 | } 295 | .footer__copyright p { 296 | margin: 0; 297 | padding: 20px 0; 298 | text-align: center; 299 | font-weight: 400; 300 | font-size: 20px; 301 | color: #fff; 302 | } 303 | 304 | @media screen and (min-width: 900px) { 305 | .footer-top { 306 | flex-direction: row; 307 | gap: 100px; 308 | } 309 | .footer__about { 310 | display: block; 311 | } 312 | } 313 | .container { 314 | width: 100%; 315 | margin-left: auto; 316 | margin-right: auto; 317 | padding-left: 20px; 318 | padding-right: 20px; 319 | } 320 | 321 | @media screen and (min-width: 600px) { 322 | .container { 323 | width: 600px; 324 | } 325 | } 326 | @media screen and (min-width: 700px) { 327 | .container { 328 | width: 700px; 329 | } 330 | } 331 | @media screen and (min-width: 900px) { 332 | .container { 333 | width: 900px; 334 | } 335 | } 336 | @media screen and (min-width: 1100px) { 337 | .container { 338 | width: 1100px; 339 | } 340 | } 341 | .possibilities { 342 | margin-top: 140px; 343 | } 344 | .possibilities__title { 345 | text-align: center; 346 | font-weight: 500; 347 | font-size: 46px; 348 | margin: 0; 349 | } 350 | .possibilities__subtitle { 351 | font-weight: 400; 352 | font-size: 18px; 353 | line-height: 124%; 354 | text-align: center; 355 | letter-spacing: 0.08em; 356 | color: #ABABAB; 357 | margin: 0; 358 | } 359 | .possibilities__main { 360 | margin-top: 50px; 361 | display: flex; 362 | justify-content: space-between; 363 | flex-direction: column; 364 | gap: 20px; 365 | } 366 | .possibilities__list { 367 | display: flex; 368 | flex-direction: column; 369 | gap: 60px; 370 | } 371 | .possibilities__item { 372 | display: flex; 373 | text-align: right; 374 | gap: 20px; 375 | width: 100%; 376 | } 377 | .possibilities__item-content { 378 | width: 80%; 379 | } 380 | .possibilities__item-content h3 { 381 | font-weight: 500; 382 | font-size: 22px; 383 | line-height: 124%; 384 | color: #000000; 385 | margin: 0; 386 | } 387 | .possibilities__item-content p { 388 | font-weight: 400; 389 | font-size: 18px; 390 | line-height: 124%; 391 | color: #B0B0B0; 392 | margin: 0; 393 | } 394 | .possibilities__item-img { 395 | width: 60px; 396 | height: 60px; 397 | border-radius: 50%; 398 | background: linear-gradient(180deg, #8253D8 0%, #D05DDE 100%); 399 | display: flex; 400 | align-items: center; 401 | justify-content: center; 402 | } 403 | .possibilities__item-img i { 404 | font-size: 25px; 405 | color: #fff; 406 | } 407 | .possibilities__left .possibilities__item { 408 | flex-direction: row-reverse; 409 | } 410 | .possibilities__left .possibilities__item-content h3 { 411 | text-align: left; 412 | } 413 | .possibilities__left .possibilities__item-content p { 414 | text-align: left; 415 | } 416 | .possibilities__middle { 417 | text-align: center; 418 | } 419 | .possibilities__middle img { 420 | width: 100%; 421 | } 422 | .possibilities__right .possibilities__item { 423 | flex-direction: row-reverse; 424 | } 425 | .possibilities__right .possibilities__item-content h3 { 426 | text-align: left; 427 | } 428 | .possibilities__right .possibilities__item-content p { 429 | text-align: left; 430 | } 431 | 432 | @media screen and (min-width: 600px) { 433 | .possibilities__middle img { 434 | width: 300px; 435 | } 436 | } 437 | @media screen and (min-width: 900px) { 438 | .possibilities__main { 439 | flex-direction: row; 440 | } 441 | .possibilities__item { 442 | width: 350px; 443 | } 444 | .possibilities__left .possibilities__item { 445 | flex-direction: row; 446 | } 447 | .possibilities__left .possibilities__item-content h3 { 448 | text-align: right; 449 | } 450 | .possibilities__left .possibilities__item-content p { 451 | text-align: right; 452 | } 453 | } 454 | 455 | /*# sourceMappingURL=main.css.map */ 456 | --------------------------------------------------------------------------------