├── img ├── cor.jpeg ├── icon-site-2.jpeg ├── separator.svg ├── play.svg ├── arrow.svg ├── icon-facebook.svg ├── add.svg ├── menu-hamburguer.svg ├── icon-youtube.svg ├── icon-insta.svg ├── icon-linkedin.svg ├── custom-furniture.svg ├── space-planning.svg ├── furniture-layouts.svg ├── aven.svg ├── kyan.svg ├── spotify.svg ├── kanba.svg ├── carrie-vath.svg └── ryan.svg ├── README.md ├── index.html └── css └── style.css /img/cor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/interior-design/HEAD/img/cor.jpeg -------------------------------------------------------------------------------- /img/icon-site-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beatrizveloso/interior-design/HEAD/img/icon-site-2.jpeg -------------------------------------------------------------------------------- /img/separator.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /img/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /img/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /img/menu-hamburguer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /img/icon-youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Interior Design 2 | 3 | Este projeto consiste na reprodução de uma página fornecida pelo meu professor, criada com HTML e CSS. A atividade foi realizada no curso de Web Design, em colaboração com uma amiga. O projeto foca em aplicar conceitos de estruturação de página e estilização com CSS, buscando simular o design proposto de forma fiel. 4 | 5 | # Principais Tecnologias Utilizadas: 6 | 7 | HTML 8 | CSS 9 | 10 | # Funcionalidades: 11 | 12 | Estrutura básica da página com HTML.
13 | Estilos aplicados utilizando CSS para replicar o layout original.
14 | Esse projeto me ajudou a aprofundar meus conhecimentos em HTML e CSS, além de aprimorar minha habilidade em trabalhar em colaboração.
15 | 16 | 17 | ![image](https://github.com/beatrizveloso/interior-design/assets/156534028/3da160da-92a9-404e-bef5-8be06b2a3cd1) 18 | ![image](https://github.com/beatrizveloso/interior-design/assets/156534028/5e4d6817-d110-4664-8e60-4201b056b13a) 19 | ![image](https://github.com/beatrizveloso/interior-design/assets/156534028/62ba09dd-9110-45ba-b01a-d716061737ba) 20 | 21 | -------------------------------------------------------------------------------- /img/icon-insta.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /img/icon-linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /img/custom-furniture.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /img/space-planning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /img/furniture-layouts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/aven.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /img/kyan.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /img/spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /img/kanba.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Interior Design 8 | 9 | 10 | 11 | 12 | 13 |
14 | 18 | 19 |
  • SERVICES
  • 20 |
    21 | 22 |
  • PROJECTS
  • 23 |
    24 | 25 |
  • CONTACT
  • 26 |
    27 |
    28 |
    29 | 30 | 31 | 32 | 33 |
    34 |

    INSIDE INNOVATION

    35 |

    Interior design
    that matters.

    36 | 37 |
    38 |
    39 | 40 |
    41 |
    42 |

    FEATURED

    43 | 44 |
    45 |
    46 |

    AUSTIN, TEXAS

    47 |

    MetLife Corporate Space

    48 |
    49 |
    50 |

    CORPORATE CLIENTS

    51 |
    52 | 53 | 54 | 55 | 56 |
    57 |
    58 | 59 |
    60 |
    61 |

    SERVICES

    62 |
    63 |

    We do it best.

    64 | 65 |
    66 |
    67 |
    68 |
    69 | 70 |

    Space Planning

    71 |

    Lorem ipsum dolor sit amet, consectetur 72 | adipiscing elit. Mauris accumsan urna eu 73 | pharetra elementum.

    74 |
    75 |
    76 |
    77 |
    78 | 79 |

    Custom Furniture

    80 |

    Lorem ipsum dolor sit amet, consectetur 81 | adipiscing elit. Mauris accumsan urna eu 82 | pharetra elementum.

    83 |
    84 |
    85 |
    86 |
    87 | 88 |

    Furniture Layouts

    89 |

    Lorem ipsum dolor sit amet, consectetur 90 | adipiscing elit. Mauris accumsan urna eu 91 | pharetra elementum.

    92 |
    93 |
    94 |
    95 |
    96 |
    97 | 98 |
    99 |
    100 |

    ABOUT NSIDE

    101 |

    We're innovating the way
    companies reinvent their
    office spaces for the
    102 | remote workforce.

    103 | 104 |

    JESSICA POINT, CEO

    105 |
    106 | 107 |
    108 |
    109 |
    110 | 111 |
    112 |
    113 | 114 | 115 | 116 | 117 |
    118 |
    119 |

    Explore our work

    120 |

    See what we can do together.

    121 | 122 |
    123 |
    124 |

    SPACE PLANNING

    125 |

    CUSTOM FURNITURE

    126 |

    FURNITURE LAYOUTS

    127 |
    128 |
    129 | 130 |
    131 |
    132 | 133 | 134 |
    135 |

    MIAMI, FLORIDA

    136 |

    Allstate Employee Lounge

    137 |

    1.22.22

    138 |
    139 |
    140 |

    NEW YORK, NEW YORK

    141 |

    Spotify Satellite Office

    142 |

    1.22.22

    143 |
    144 |
    145 |

    MIAMI, FLORIDA

    146 |

    Microsoft Office Lounge

    147 |

    11.20.21

    148 |
    149 |
    150 | 151 | 152 |
    153 |

    LOS ANGELES, CALIFORNIA

    154 |

    Exxon Mobile Offices

    155 |

    6.8.21

    156 |
    157 |
    158 |

    SAN FRANCISCO, CALIFORNIA

    159 |

    Delta Satellite Office

    160 |

    12.6.20

    161 |
    162 |
    163 |

    SAN FRANCISCO, CALIFORNIA

    164 |

    Disney Employee Loft

    165 |

    10.29.30

    166 |
    167 |
    168 | 169 | 170 |
    171 |

    LOS ANGELES, CALIFORNIA

    172 |

    Nike Corporate Space

    173 |

    8.21.20

    174 |
    175 |
    176 |

    AUSTIN, TEXAS

    177 |

    MetLife Corporate Space

    178 |

    6.19.20

    179 |
    180 |
    181 |

    BROOKLYN, NEW YORK

    182 |

    Home Depot Headquarters

    183 |

    4.25.20

    184 |
    185 |
    186 | 187 | 188 |
    189 |
    190 |
    191 | 192 | 195 | 198 |

    199 | Samantha
    Vohnhale 200 |

    201 |
    202 |

    SAN FRANCISCO, CALIFORNIA

    203 |
    204 |
    205 |

    Lorem ipsum dolor sit amet, consectetur 206 | adipiscing elit. Mauris accumsan urna eu 207 | pharetra elementum. Suspendisse potenti.
    208 | Vestibulum ut quam luctus, pharetra dui sed, 209 | rutrum felis. Vestibulum tellus ipsum, rhoncus 210 | sed suscipit a, eleifend in.

    211 |
    212 |
    213 |
    214 | 215 |
    216 |
    217 |
    218 |

    OUR TEAM

    219 |
    220 |
    221 |

    Behind the design.

    222 | 223 |
    224 | 225 |
    226 | 227 |
    228 |

    Jessica Point

    229 |

    CEO

    230 |
    231 |
    232 |
    233 | 234 |
    235 |
    236 | 237 |
    238 | 241 |
    242 | 243 |
    244 |
    245 |
    246 | 247 | 248 |
    249 |

    Ryan Baser

    250 |

    CEO

    251 |
    252 |
    253 |
    254 | 255 |
    256 |
    257 | 258 |
    259 | 262 |
    263 | 264 |
    265 |
    266 |
    267 | 268 | 269 |
    270 |

    Carrie Vath

    271 |

    CEO

    272 |
    273 |
    274 |
    275 | 276 |
    277 |
    278 | 279 |
    280 | 283 |
    284 | 285 |
    286 |
    287 |
    288 | 289 |
    290 |
    291 |
    292 | 293 | 294 | 295 | 296 |
    297 | 300 |
    301 | 302 |
    303 |
    304 |

    POPULAR CATEGORIES

    305 |

    Furniture

    306 |

    Remote Spaces

    307 |

    Office Tech

    308 |

    Floor Plans

    309 |

    Organization

    310 |

    Interior Design

    311 |
    312 |
    313 | 314 |
    315 |
    316 |

    RECENT POSTS

    317 |

    What's new?

    318 | 319 |
    320 | 321 |

    5 Principles Of Effective Web Design

    322 |

    Lorem ipsum dolor sit amet, consectetur adipiscing 323 | elit.

    324 |
    325 | 326 |

    4.5.21

    327 |

    FLOOR PLANS

    328 |
    329 |
    330 |
    331 |
    332 | 333 |

    Why We Love Webflow (And You Should, 334 | Too!)

    335 |

    Lorem ipsum dolor sit amet, consectetur adipiscing 336 | elit.

    337 |
    338 |
    339 | 340 |

    4.5.21

    341 |

    FURNITURE

    342 |
    343 |
    344 |
    345 | 346 |

    7 of the Best Examples of Beautiful Blog 347 | Design

    348 |

    Lorem ipsum dolor sit amet, consectetur adipiscing 349 | elit.

    350 |
    351 |
    352 | 353 |

    4.5.21

    354 |

    FURNITURE

    355 |
    356 |
    357 |
    358 | 359 |

    14 Common Misconceptions About Web 360 | Design

    361 |

    Lorem ipsum dolor sit amet, consectetur adipiscing 362 | elit.

    363 |
    364 |
    365 | 366 |

    4.5.21

    367 |

    ORGANIZATION

    368 |
    369 |
    370 |
    371 | 372 |

    7 Things About Web Design Your Boss 373 | Wants To Know

    374 |

    Lorem ipsum dolor sit amet, consectetur adipiscing 375 | elit.

    376 |
    377 |
    378 | 379 |

    ORGANIZATION

    380 |

    4.5.21

    381 |
    382 |
    383 |
    384 | 385 |

    The Worst Advice We've Ever Heard About 386 | Web Design

    387 |

    Lorem ipsum dolor sit amet, consectetur adipiscing 388 | elit.

    389 |
    390 |
    391 | 392 |

    FLOOR PLANS

    393 |

    4.5.21

    394 |
    395 |
    396 |
    397 |
    398 | 438 | 439 | 440 | -------------------------------------------------------------------------------- /img/carrie-vath.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); 3 | 4 | * { 5 | padding: 0%; 6 | margin: 0%; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | font-family: "Inter", sans-serif; 12 | } 13 | 14 | main { 15 | width: 100%; 16 | height: 732px; 17 | } 18 | 19 | header { 20 | position: absolute; 21 | width: 100%; 22 | display: flex; 23 | } 24 | 25 | picture img { 26 | width: 100%; 27 | } 28 | 29 | .logo { 30 | width: 346px; 31 | height: 54px; 32 | background-color: white; 33 | margin-right: 290px; 34 | margin-left: 80px; 35 | display: flex; 36 | } 37 | 38 | .logo h1 { 39 | margin-top: 15px; 40 | margin-left: 15px; 41 | font-size: 18px; 42 | } 43 | 44 | .logo img { 45 | margin-left: 240px; 46 | width: 6%; 47 | } 48 | 49 | li { 50 | display: inline-block; 51 | margin: 20px; 52 | } 53 | 54 | a { 55 | color: white; 56 | letter-spacing: 3px; 57 | font-weight: 300; 58 | font-size: 16px; 59 | } 60 | 61 | .text p { 62 | position: absolute; 63 | top: 100px; 64 | left: 80px; 65 | color: white; 66 | letter-spacing: 3px; 67 | font-weight: 300; 68 | font-size: 14px; 69 | } 70 | 71 | .text h1 { 72 | position: absolute; 73 | top: 140px; 74 | left: 75px; 75 | color: white; 76 | font-size: 60px; 77 | font-weight: 600; 78 | } 79 | 80 | .text button { 81 | position: absolute; 82 | top: 320px; 83 | left: 75px; 84 | width: 200px; 85 | height: 50px; 86 | background-color: transparent; 87 | border: 1px solid white; 88 | color: white; 89 | letter-spacing: 3px; 90 | border-radius: 50px; 91 | font-size: 11px; 92 | } 93 | 94 | .white-square { 95 | width: 346px; 96 | height: 110px; 97 | background-color: white; 98 | position: absolute; 99 | top: 412px; 100 | left: 75px; 101 | } 102 | 103 | .white-square p { 104 | position: absolute; 105 | top: 35px; 106 | left: 50px; 107 | font-size: 10px; 108 | color: black; 109 | letter-spacing: 4px; 110 | } 111 | 112 | .white-square h1 { 113 | position: absolute; 114 | top: 60px; 115 | left: 48px; 116 | font-size: 16px; 117 | color: black; 118 | font-weight: 800; 119 | } 120 | 121 | .feature { 122 | background-color: #F3F6FC; 123 | width: 75px; 124 | height: 150px; 125 | position: absolute; 126 | top: 412px; 127 | } 128 | 129 | .feature h1 { 130 | position: absolute; 131 | top: 60px; 132 | left: -5px; 133 | transform: rotate(-90deg); 134 | font-size: 11px; 135 | color: #6E7488; 136 | font-weight: 300; 137 | letter-spacing: 3px; 138 | } 139 | 140 | .feature img { 141 | position: absolute; 142 | top: 120px; 143 | left: 26px; 144 | display: flex; 145 | font-size: 11px; 146 | font-weight: 300; 147 | letter-spacing: 3px; 148 | } 149 | 150 | .square-corporate { 151 | background-color: #F3F6FC; 152 | width: 930px; 153 | height: 210px; 154 | position: absolute; 155 | top: 522px; 156 | left: 75px; 157 | } 158 | 159 | .square-corporate p { 160 | color: #6E7488; 161 | display: flex; 162 | position: relative; 163 | top: 68px; 164 | left: 50px; 165 | font-size: 12px; 166 | } 167 | 168 | .square-corporate hr { 169 | position: relative; 170 | width: 625px; 171 | top: 60px; 172 | left: 230px; 173 | } 174 | 175 | .square-corporate img { 176 | margin-top: 100px; 177 | padding-right: 60px; 178 | padding-left: 45px; 179 | } 180 | 181 | .circle-arrow { 182 | width: 80px; 183 | height: 80px; 184 | border-radius: 100px; 185 | background-color: transparent; 186 | border: 1px solid white; 187 | position: absolute; 188 | top: 400px; 189 | left: 1030px; 190 | } 191 | 192 | .circle-arrow img { 193 | padding-top: 25px; 194 | padding-left: 27px; 195 | } 196 | 197 | .services { 198 | margin-top: 120px; 199 | width: 100%; 200 | height: 300px; 201 | } 202 | 203 | .services p { 204 | width: 90px; 205 | height: 20px; 206 | font-size: 12px; 207 | display: flex; 208 | letter-spacing: 3px; 209 | padding-left: 74px; 210 | } 211 | 212 | .lineUp h1 { 213 | font-size: 40px; 214 | padding-left: 74px; 215 | } 216 | 217 | .lineUp button { 218 | width: 200px; 219 | height: 50px; 220 | font-family: "Open Sans", sans-serif; 221 | background-color: black; 222 | color: white; 223 | font-size: 11px; 224 | border-radius: 50px; 225 | font-weight: 200; 226 | letter-spacing: 3px; 227 | } 228 | 229 | .lineUp { 230 | display: flex; 231 | justify-content: space-between; 232 | margin-right: 74px; 233 | } 234 | 235 | .align-space { 236 | display: flex; 237 | justify-content: space-around; 238 | align-items: center; 239 | margin-top: 60px; 240 | } 241 | 242 | .space-w, 243 | .furniture-w, 244 | .layouts-w { 245 | width: 300px; 246 | height: 300px; 247 | } 248 | 249 | .space { 250 | width: 60px; 251 | height: 60px; 252 | background: #F3F6FC; 253 | border-radius: 60px; 254 | } 255 | 256 | .space img { 257 | display: flex; 258 | margin-left: 18px; 259 | padding-top: 20px; 260 | } 261 | 262 | .space h1 { 263 | display: flex; 264 | width: 200px; 265 | font-size: 24px; 266 | font-weight: 700; 267 | letter-spacing: -0.72px; 268 | line-height: 30px; 269 | margin-top: 70px; 270 | } 271 | 272 | .space p { 273 | width: 380px; 274 | font-size: 16px; 275 | font-family: "Open Sans", sans-serif; 276 | color: #6E7488; 277 | font-weight: 400; 278 | display: flex; 279 | margin-top: 20px; 280 | margin-left: -74px; 281 | line-height: 26px; 282 | } 283 | 284 | .furniture { 285 | width: 60px; 286 | height: 60px; 287 | background: #F3F6FC; 288 | border-radius: 60px; 289 | } 290 | 291 | .furniture img { 292 | display: flex; 293 | margin-left: 18px; 294 | padding-top: 20px; 295 | } 296 | 297 | .furniture h1 { 298 | font-size: 24px; 299 | font-weight: 700; 300 | letter-spacing: -0.72px; 301 | line-height: 30px; 302 | display: flex; 303 | width: 200px; 304 | margin-top: 70px; 305 | left: 390px; 306 | } 307 | 308 | .furniture p { 309 | width: 380px; 310 | font-size: 16px; 311 | font-family: "Open Sans", sans-serif; 312 | color: #6E7488; 313 | font-weight: 400; 314 | margin-top: 20px; 315 | margin-left: -74px; 316 | line-height: 26px; 317 | } 318 | 319 | .layouts { 320 | width: 60px; 321 | height: 60px; 322 | background: #F3F6FC; 323 | border-radius: 60px; 324 | } 325 | 326 | .layouts img { 327 | display: flex; 328 | margin-left: 18px; 329 | padding-top: 20px; 330 | } 331 | 332 | .layouts h1 { 333 | font-size: 24px; 334 | width: 200px; 335 | font-weight: 700; 336 | letter-spacing: -0.72px; 337 | line-height: 30px; 338 | display: flex; 339 | margin-top: 70px; 340 | left: 790px; 341 | } 342 | 343 | .layouts p { 344 | width: 380px; 345 | font-size: 16px; 346 | font-family: "Open Sans", sans-serif; 347 | color: #6E7488; 348 | font-weight: 400; 349 | margin-top: 20px; 350 | margin-left: -74px; 351 | line-height: 26px; 352 | } 353 | 354 | .about-nside { 355 | width: 100%; 356 | height: 1000px; 357 | background-image: url(/img/innovating.svg); 358 | margin-top: 330px; 359 | } 360 | 361 | .about-nside p { 362 | padding-top: 80px; 363 | padding-left: 120px; 364 | color: white; 365 | letter-spacing: 3px; 366 | font-weight: 300; 367 | font-size: 16px; 368 | } 369 | 370 | .about-nside h1 { 371 | padding-top: 70px; 372 | padding-left: 110px; 373 | color: white; 374 | font-size: 48px; 375 | font-weight: 600; 376 | } 377 | 378 | .about-nside h2 { 379 | margin-top: -20px; 380 | padding-left: 120px; 381 | color: white; 382 | letter-spacing: 3px; 383 | font-weight: 300; 384 | font-size: 14px; 385 | } 386 | 387 | .about-nside img { 388 | padding-top: 70px; 389 | padding-left: 90px; 390 | color: white; 391 | letter-spacing: 3px; 392 | font-weight: 300; 393 | font-size: 14px; 394 | } 395 | 396 | .circle-play { 397 | width: 100px; 398 | height: 100px; 399 | border-radius: 100px; 400 | background-color: transparent; 401 | border: 1px solid white; 402 | margin-top: 90px; 403 | margin-left: 120px; 404 | } 405 | 406 | .circle-play img { 407 | margin-top: -30px; 408 | margin-left: -50px; 409 | } 410 | 411 | .picture img { 412 | margin-left: 75px; 413 | width: 1070px; 414 | height: 489px; 415 | } 416 | 417 | .explore-work { 418 | display: flex; 419 | align-items: center; 420 | justify-content: center; 421 | } 422 | 423 | .explore-work p { 424 | display: flex; 425 | color: white; 426 | margin-top: -600px; 427 | letter-spacing: 4px; 428 | font-weight: 400; 429 | font-size: 12px; 430 | } 431 | 432 | .explore-work h1 { 433 | position: absolute; 434 | margin-top: -450px; 435 | color: white; 436 | font-size: 48px; 437 | font-weight: 600; 438 | } 439 | 440 | .explore-work button { 441 | position: absolute; 442 | margin-top: -250px; 443 | width: 200px; 444 | height: 50px; 445 | font-family: "Open Sans", sans-serif; 446 | background-color: transparent; 447 | color: white; 448 | font-size: 11px; 449 | border-radius: 50px; 450 | border: 1px solid rgba(255, 255, 255, 0.75); 451 | font-weight: 200; 452 | letter-spacing: 3px; 453 | } 454 | 455 | .works { 456 | background-color: #F3F6FC; 457 | width: 1020px; 458 | height: 110px; 459 | position: absolute; 460 | margin-left: 100px; 461 | margin-top: -38px; 462 | top: 2998px; 463 | display: flex; 464 | align-items: center; 465 | justify-content: center; 466 | } 467 | 468 | .works p { 469 | width: 350px; 470 | height: 15px; 471 | font-size: 12px; 472 | color: #090B19; 473 | font-weight: 400; 474 | line-height: 20px; 475 | letter-spacing: 4px; 476 | display: flex; 477 | align-items: center; 478 | justify-content: center; 479 | } 480 | 481 | .properties { 482 | margin-top: 180px; 483 | width: 100%; 484 | height: 1410px; 485 | } 486 | 487 | .align-one { 488 | width: 100%; 489 | height: 470px; 490 | display: flex; 491 | } 492 | 493 | .all-properties { 494 | background-image: url(/img/allstate.svg); 495 | width: 350px; 496 | height: 350px; 497 | margin-top: 50px; 498 | margin-left: 82px; 499 | } 500 | 501 | .spo-properties { 502 | background-image: url(/img/spotify-satellite.svg); 503 | width: 350px; 504 | height: 352px; 505 | } 506 | 507 | .mic-properties { 508 | background-image: url(/img/microsoft-office.svg); 509 | width: 350px; 510 | height: 350px; 511 | margin-top: 50px; 512 | margin-left: -1px; 513 | } 514 | 515 | .align-two { 516 | width: 100%; 517 | height: 470px; 518 | display: flex; 519 | } 520 | 521 | .exx-properties { 522 | background-image: url(/img/exxon-mobile.svg); 523 | width: 350px; 524 | height: 350px; 525 | margin-left: 82px; 526 | } 527 | 528 | .del-properties { 529 | background-image: url(/img/delta-satellite.svg); 530 | width: 350px; 531 | height: 350px; 532 | margin-top: 50px; 533 | margin-left: -1px; 534 | } 535 | 536 | .dis-properties { 537 | background-image: url(/img/disney-employee.svg); 538 | width: 350px; 539 | height: 350px; 540 | margin-left: -1px; 541 | } 542 | 543 | .align-three { 544 | width: 100%; 545 | height: 470px; 546 | display: flex; 547 | } 548 | 549 | .nik-properties { 550 | background-image: url(/img/nike-corporate.svg); 551 | width: 350px; 552 | height: 350px; 553 | margin-top: 60px; 554 | margin-left: 82px; 555 | } 556 | 557 | .met-properties { 558 | background-image: url(/img/metlife-corporate.svg); 559 | width: 350px; 560 | height: 350px; 561 | margin-left: -1px; 562 | } 563 | 564 | .hom-properties { 565 | background-image: url(/img/home-depot.svg); 566 | width: 350px; 567 | height: 350px; 568 | margin-top: 60px; 569 | margin-left: -1px; 570 | } 571 | 572 | .all-properties p, 573 | .spo-properties p, 574 | .mic-properties p, 575 | .exx-properties p, 576 | .del-properties p, 577 | .dis-properties p, 578 | .nik-properties p, 579 | .met-properties p, 580 | .hom-properties p { 581 | color: white; 582 | letter-spacing: 4px; 583 | font-weight: 400; 584 | font-size: 10px; 585 | } 586 | 587 | .all-properties p, 588 | .spo-properties p, 589 | .mic-properties p, 590 | .exx-properties p, 591 | .del-properties p, 592 | .dis-properties p, 593 | .nik-properties p, 594 | .met-properties p, 595 | .hom-properties p { 596 | display: flex; 597 | justify-content: center; 598 | align-items: center; 599 | padding-top: 40px; 600 | } 601 | 602 | .all-properties h1, 603 | .spo-properties h1, 604 | .mic-properties h1, 605 | .exx-properties h1, 606 | .del-properties h1, 607 | .dis-properties h1, 608 | .nik-properties h1, 609 | .met-properties h1, 610 | .hom-properties h1 { 611 | color: white; 612 | font-size: 20px; 613 | font-weight: 600; 614 | } 615 | 616 | .all-properties h1, 617 | .spo-properties h1, 618 | .mic-properties h1, 619 | .exx-properties h1, 620 | .del-properties h1, 621 | .dis-properties h1, 622 | .nik-properties h1, 623 | .met-properties h1, 624 | .hom-properties h1 { 625 | display: flex; 626 | justify-content: center; 627 | align-items: center; 628 | padding-top: 20px; 629 | } 630 | 631 | .all-properties h2, 632 | .spo-properties h2, 633 | .mic-properties h2, 634 | .exx-properties h2, 635 | .del-properties h2, 636 | .dis-properties h2, 637 | .nik-properties h2, 638 | .met-properties h2, 639 | .hom-properties h2 { 640 | color: white; 641 | letter-spacing: 4px; 642 | font-weight: 400; 643 | font-size: 12px; 644 | } 645 | 646 | .all-properties h2, 647 | .spo-properties h2, 648 | .mic-properties h2, 649 | .exx-properties h2, 650 | .del-properties h2, 651 | .dis-properties h2, 652 | .nik-properties h2, 653 | .met-properties h2, 654 | .hom-properties h2 { 655 | display: flex; 656 | justify-content: center; 657 | align-items: center; 658 | padding-top: 210px; 659 | } 660 | 661 | .samantha { 662 | background-color: #090B19; 663 | width: 100%; 664 | height: 550px; 665 | } 666 | 667 | .samantha img { 668 | position: relative; 669 | width: 466px; 670 | height: 550px; 671 | margin-left: 70px; 672 | } 673 | 674 | .previous { 675 | margin-left: -30px; 676 | width: 268px; 677 | height: 70px; 678 | transform: rotate(-90deg); 679 | display: flex; 680 | flex-direction: column; 681 | align-items: center; 682 | justify-content: center; 683 | margin-top: -180px; 684 | background-color: #090B1980; 685 | color: white; 686 | border: 1px #FFFFFF1A; 687 | } 688 | 689 | .next { 690 | margin-left: -30px; 691 | width: 268px; 692 | height: 70px; 693 | transform: rotate(-90deg); 694 | display: flex; 695 | flex-direction: column; 696 | align-items: center; 697 | justify-content: center; 698 | margin-top: -340px; 699 | background-color: #090B1980; 700 | color: white; 701 | border: 1px #FFFFFF1A; 702 | } 703 | 704 | .samantha h1 { 705 | color: white; 706 | font-size: 44px; 707 | font-weight: 600; 708 | line-height: 55px; 709 | margin-left: 580px; 710 | margin-top: -120px; 711 | letter-spacing: -1.44px; 712 | } 713 | 714 | .local { 715 | color: white; 716 | font-weight: 100; 717 | font-size: 12px; 718 | line-height: 20px; 719 | letter-spacing: 4px; 720 | margin-left: 580px; 721 | margin-top: 300px; 722 | } 723 | 724 | .samanthaFeed { 725 | color: white; 726 | width: 318px; 727 | height: 73px; 728 | line-height: 25px; 729 | font-weight: 400; 730 | font-size: 16px; 731 | font-family: "Open Sans", sans-serif; 732 | margin-left: 880px; 733 | margin-top: -370px; 734 | display: flex; 735 | align-items: center; 736 | } 737 | 738 | .our-team { 739 | width: 100%; 740 | height: 650px; 741 | margin-top: 90px; 742 | 743 | } 744 | 745 | .our-team p { 746 | font-size: 12px; 747 | letter-spacing: 3px; 748 | padding-left: 74px; 749 | } 750 | 751 | .behind { 752 | display: flex; 753 | justify-content: space-between; 754 | margin-right: 75px; 755 | } 756 | 757 | .behind h1 { 758 | font-size: 40px; 759 | padding-left: 74px; 760 | padding-top: 20px; 761 | display: flex; 762 | } 763 | 764 | .behind button { 765 | width: 200px; 766 | height: 50px; 767 | font-family: "Open Sans", sans-serif; 768 | background-color: black; 769 | color: white; 770 | font-size: 11px; 771 | border-radius: 50px; 772 | font-weight: 200; 773 | letter-spacing: 3px; 774 | } 775 | 776 | .align-behind { 777 | display: flex; 778 | } 779 | 780 | .jessica { 781 | width: 350px; 782 | height: 350px; 783 | background-image: url(/img/jessica.svg); 784 | margin-left: 80px; 785 | margin-top: 50px; 786 | } 787 | 788 | .ryan { 789 | width: 350px; 790 | height: 350px; 791 | background-image: url(/img/ryan.svg); 792 | margin-top: 100px; 793 | } 794 | 795 | .carrie { 796 | width: 350px; 797 | height: 350px; 798 | background-image: url(/img/carrie-vath.svg); 799 | margin-top: 150px; 800 | } 801 | 802 | 803 | .jessica h1, 804 | .ryan h1, 805 | .carrie h1 { 806 | color: white; 807 | font-size: 18px; 808 | font-weight: 600; 809 | padding-left: 20px; 810 | padding-top: 30px; 811 | } 812 | 813 | .jessica p, 814 | .ryan p, 815 | .carrie p { 816 | color: white; 817 | letter-spacing: 4px; 818 | font-weight: 400; 819 | font-size: 10px; 820 | padding-top: 40px; 821 | padding-left: 170px; 822 | } 823 | 824 | .circle-insta, 825 | .circle-face, 826 | .circle-link, 827 | .circle-yout { 828 | width: 28px; 829 | height: 28px; 830 | background-color: white; 831 | border-radius: 150px; 832 | margin-top: 250px; 833 | margin-left: 10px; 834 | } 835 | 836 | .align-circles { 837 | display: flex; 838 | align-items: center; 839 | justify-content: center; 840 | } 841 | 842 | .circle-insta img, 843 | .circle-face img, 844 | .circle-link img, 845 | .circle-yout img { 846 | width: 15px; 847 | height: 15px; 848 | margin-top: 6px; 849 | margin-left: 6px; 850 | } 851 | 852 | .align-h1 { 853 | display: flex; 854 | 855 | } 856 | 857 | .banner { 858 | width: 100%; 859 | height: 500px; 860 | display: flex; 861 | justify-content: center; 862 | align-items: center; 863 | } 864 | 865 | .banner img { 866 | width: 90%; 867 | } 868 | 869 | .popularCategories h1 { 870 | margin-left: 50px; 871 | font-weight: 400; 872 | font-size: 10px; 873 | line-height: 20px; 874 | display: flex; 875 | align-items: center; 876 | letter-spacing: 4px; 877 | color: #090B19; 878 | margin-top: 300px; 879 | } 880 | 881 | .popularCategories p { 882 | margin-left: 20px; 883 | margin-top: 10px; 884 | font-weight: 400; 885 | font-size: 12px; 886 | line-height: 20px; 887 | letter-spacing: 1px; 888 | display: flex; 889 | padding: 30px; 890 | color: #6E7488; 891 | } 892 | 893 | .recentPosts { 894 | width: 100%; 895 | } 896 | 897 | .recentPosts p { 898 | margin-top: -750px; 899 | margin-left: 350px; 900 | font-weight: 400; 901 | font-size: 12px; 902 | line-height: 20px; 903 | letter-spacing: 4px; 904 | color: #090B19; 905 | } 906 | 907 | .recentPosts h1 { 908 | margin-left: 350px; 909 | margin-top: 10px; 910 | font-weight: 600; 911 | line-height: 50px; 912 | font-size: 48px; 913 | letter-spacing: 2px; 914 | } 915 | 916 | .recentPosts button { 917 | position: absolute; 918 | margin-top: -54px; 919 | margin-left: 950px; 920 | width: 200px; 921 | height: 54px; 922 | border-radius: 100px; 923 | background-color: #090B19; 924 | color: white; 925 | font-family: 'Open Sans'; 926 | font-size: 11px; 927 | font-weight: 400; 928 | line-height: 20px; 929 | letter-spacing: 3px; 930 | text-align: center; 931 | } 932 | 933 | .principles img { 934 | width: 440px; 935 | height: 210px; 936 | margin-left: 325px; 937 | margin-top: 110px; 938 | } 939 | 940 | .principles h1 { 941 | margin-left: 335px; 942 | margin-top: 30px; 943 | font-size: 18px; 944 | font-weight: 700; 945 | line-height: 24px; 946 | text-align: left; 947 | color: #090B19; 948 | } 949 | 950 | .principles p { 951 | margin-left: 335px; 952 | margin-top: 20px; 953 | width: 432px; 954 | height: 52px; 955 | font-family: 'Open Sans'; 956 | font-size: 16px; 957 | font-weight: 400; 958 | line-height: 25px; 959 | text-align: left; 960 | color: #6E7488; 961 | } 962 | 963 | .floor p { 964 | position: absolute; 965 | margin-left: 660px; 966 | margin-top: 80px; 967 | font-family: 'Open Sans'; 968 | font-size: 16px; 969 | font-weight: 400; 970 | line-height: 25px; 971 | text-align: left; 972 | color: #6E7488; 973 | } 974 | 975 | .floor h1 { 976 | position: absolute; 977 | margin-left: 335px; 978 | margin-top: 80px; 979 | font-family: 'Open Sans'; 980 | font-size: 16px; 981 | font-weight: 400; 982 | line-height: 25px; 983 | text-align: left; 984 | color: #6E7488; 985 | } 986 | 987 | .webflow img { 988 | width: 440px; 989 | height: 210px; 990 | display: flex; 991 | margin-left: 758px; 992 | margin-top: -300px; 993 | } 994 | 995 | .webflow h1 { 996 | margin-top: 30px; 997 | margin-left: 775px; 998 | width: 432px; 999 | font-size: 18px; 1000 | font-weight: 700; 1001 | line-height: 24px; 1002 | text-align: left; 1003 | color: #090B19; 1004 | } 1005 | 1006 | .webflow p { 1007 | margin-left: 775px; 1008 | margin-top: 20px; 1009 | width: 432px; 1010 | height: 52px; 1011 | font-family: 'Open Sans'; 1012 | font-size: 16px; 1013 | font-weight: 400; 1014 | line-height: 25px; 1015 | text-align: left; 1016 | color: #6E7488; 1017 | } 1018 | 1019 | .loveWeb p { 1020 | position: absolute; 1021 | margin-left: 1110px; 1022 | margin-top: 80px; 1023 | font-family: 'Open Sans'; 1024 | font-size: 16px; 1025 | font-weight: 400; 1026 | line-height: 25px; 1027 | text-align: left; 1028 | color: #6E7488; 1029 | } 1030 | 1031 | .loveWeb h1 { 1032 | position: absolute; 1033 | margin-left: 775px; 1034 | margin-top: 80px; 1035 | font-family: 'Open Sans'; 1036 | font-size: 16px; 1037 | font-weight: 400; 1038 | line-height: 25px; 1039 | text-align: left; 1040 | color: #6E7488; 1041 | } 1042 | 1043 | .bestExamples img { 1044 | width: 440px; 1045 | height: 210px; 1046 | margin-left: 325px; 1047 | margin-top: 70px; 1048 | } 1049 | 1050 | .bestExamples h1 { 1051 | width: 420px; 1052 | margin-left: 335px; 1053 | margin-top: 30px; 1054 | font-size: 18px; 1055 | font-weight: 700; 1056 | line-height: 24px; 1057 | text-align: left; 1058 | color: #090B19; 1059 | } 1060 | 1061 | .bestExamples p { 1062 | margin-left: 335px; 1063 | margin-top: 20px; 1064 | width: 432px; 1065 | height: 52px; 1066 | font-family: 'Open Sans'; 1067 | font-size: 16px; 1068 | font-weight: 400; 1069 | line-height: 25px; 1070 | text-align: left; 1071 | color: #6E7488; 1072 | } 1073 | 1074 | .blogDesign h1 { 1075 | position: absolute; 1076 | margin-left: 335px; 1077 | margin-top: 80px; 1078 | font-family: 'Open Sans'; 1079 | font-size: 16px; 1080 | font-weight: 400; 1081 | line-height: 25px; 1082 | text-align: left; 1083 | color: #6E7488; 1084 | } 1085 | 1086 | .blogDesign p { 1087 | position: absolute; 1088 | margin-left: 660px; 1089 | margin-top: 80px; 1090 | font-family: 'Open Sans'; 1091 | font-size: 16px; 1092 | font-weight: 400; 1093 | line-height: 25px; 1094 | text-align: left; 1095 | color: #6E7488; 1096 | } 1097 | 1098 | .misconceptions img { 1099 | width: 440px; 1100 | height: 210px; 1101 | display: flex; 1102 | margin-left: 758px; 1103 | margin-top: -315px; 1104 | } 1105 | 1106 | .misconceptions h1 { 1107 | margin-top: 30px; 1108 | margin-left: 775px; 1109 | width: 432px; 1110 | font-size: 18px; 1111 | font-weight: 700; 1112 | line-height: 24px; 1113 | text-align: left; 1114 | color: #090B19; 1115 | } 1116 | 1117 | .misconceptions p { 1118 | margin-left: 775px; 1119 | margin-top: 20px; 1120 | width: 432px; 1121 | height: 52px; 1122 | font-family: 'Open Sans'; 1123 | font-size: 16px; 1124 | font-weight: 400; 1125 | line-height: 25px; 1126 | text-align: left; 1127 | color: #6E7488; 1128 | } 1129 | 1130 | .organization h1 { 1131 | position: absolute; 1132 | margin-left: 775px; 1133 | margin-top: 98px; 1134 | font-family: 'Open Sans'; 1135 | font-size: 16px; 1136 | font-weight: 400; 1137 | line-height: 25px; 1138 | text-align: left; 1139 | color: #6E7488; 1140 | } 1141 | 1142 | .organization p { 1143 | position: absolute; 1144 | margin-left: 1110px; 1145 | margin-top: 98px; 1146 | font-family: 'Open Sans'; 1147 | font-size: 16px; 1148 | font-weight: 400; 1149 | line-height: 25px; 1150 | text-align: left; 1151 | color: #6E7488; 1152 | } 1153 | 1154 | .sevenThings img { 1155 | width: 440px; 1156 | height: 210px; 1157 | margin-left: 325px; 1158 | margin-top: 85px; 1159 | } 1160 | 1161 | .sevenThings h1 { 1162 | width: 420px; 1163 | margin-left: 335px; 1164 | margin-top: 30px; 1165 | font-size: 18px; 1166 | font-weight: 700; 1167 | line-height: 24px; 1168 | text-align: left; 1169 | color: #090B19; 1170 | } 1171 | 1172 | .sevenThings p { 1173 | margin-left: 335px; 1174 | margin-top: 20px; 1175 | width: 432px; 1176 | height: 52px; 1177 | font-family: 'Open Sans'; 1178 | font-size: 16px; 1179 | font-weight: 400; 1180 | line-height: 25px; 1181 | text-align: left; 1182 | color: #6E7488; 1183 | } 1184 | 1185 | .boss h1 { 1186 | position: absolute; 1187 | margin-left: 335px; 1188 | margin-top: 80px; 1189 | font-family: 'Open Sans'; 1190 | font-size: 16px; 1191 | font-weight: 400; 1192 | line-height: 25px; 1193 | text-align: left; 1194 | color: #6E7488; 1195 | } 1196 | 1197 | .boss p { 1198 | position: absolute; 1199 | margin-left: 660px; 1200 | margin-top: 80px; 1201 | font-family: 'Open Sans'; 1202 | font-size: 16px; 1203 | font-weight: 400; 1204 | line-height: 25px; 1205 | text-align: left; 1206 | color: #6E7488; 1207 | } 1208 | 1209 | .worstAdvice img { 1210 | width: 440px; 1211 | height: 210px; 1212 | display: flex; 1213 | margin-left: 758px; 1214 | margin-top: -315px; 1215 | } 1216 | 1217 | .worstAdvice h1 { 1218 | margin-top: 30px; 1219 | margin-left: 775px; 1220 | width: 432px; 1221 | font-size: 18px; 1222 | font-weight: 700; 1223 | line-height: 24px; 1224 | text-align: left; 1225 | color: #090B19; 1226 | } 1227 | 1228 | .worstAdvice p { 1229 | margin-left: 775px; 1230 | margin-top: 20px; 1231 | width: 332px; 1232 | height: 52px; 1233 | font-family: 'Open Sans'; 1234 | font-size: 16px; 1235 | font-weight: 400; 1236 | line-height: 25px; 1237 | text-align: left; 1238 | color: #6E7488; 1239 | } 1240 | 1241 | .design h1 { 1242 | position: absolute; 1243 | margin-left: 775px; 1244 | margin-top: 98px; 1245 | font-family: 'Open Sans'; 1246 | font-size: 16px; 1247 | font-weight: 400; 1248 | line-height: 25px; 1249 | text-align: left; 1250 | color: #6E7488; 1251 | } 1252 | 1253 | .design p { 1254 | position: absolute; 1255 | margin-left: 1110px; 1256 | margin-top: 98px; 1257 | font-family: 'Open Sans'; 1258 | font-size: 16px; 1259 | font-weight: 400; 1260 | line-height: 25px; 1261 | text-align: left; 1262 | color: #6E7488; 1263 | } 1264 | 1265 | .nside { 1266 | background-color: #090B19; 1267 | width: 100%; 1268 | height: 800px; 1269 | margin-top: 300px; 1270 | } 1271 | 1272 | .nside h1 { 1273 | padding-top: 100px; 1274 | margin-left: 50px; 1275 | font-weight: 600; 1276 | line-height: 60px; 1277 | font-size: 48px; 1278 | letter-spacing: 2px; 1279 | color: white; 1280 | } 1281 | 1282 | .nside h2 { 1283 | margin-top: 60px; 1284 | margin-left: 50px; 1285 | font-weight: 700; 1286 | line-height: 24px; 1287 | font-size: 18px; 1288 | color: white; 1289 | } 1290 | 1291 | .nside p { 1292 | margin-top: 20px; 1293 | margin-left: 50px; 1294 | font-family: 'Open Sans'; 1295 | font-size: 16px; 1296 | font-weight: 400; 1297 | line-height: 25.6px; 1298 | text-align: left; 1299 | color: white; 1300 | width: 390px; 1301 | } 1302 | 1303 | .navigation h1 { 1304 | color: white; 1305 | font-weight: 400; 1306 | font-size: 12px; 1307 | line-height: 20px; 1308 | letter-spacing: 4px; 1309 | margin-top: -576px; 1310 | margin-left: 550px; 1311 | } 1312 | 1313 | .navigation p { 1314 | color: white; 1315 | font-size: 16px; 1316 | font-weight: 400; 1317 | line-height: 20px; 1318 | letter-spacing: -1px; 1319 | text-align: left; 1320 | margin-left: 550px; 1321 | padding: 30px; 1322 | } 1323 | 1324 | .follow h1 { 1325 | font-size: 12px; 1326 | font-weight: 400; 1327 | line-height: 20px; 1328 | letter-spacing: 4px; 1329 | text-align: left; 1330 | color: white; 1331 | margin-left: 860px; 1332 | margin-top: -290px; 1333 | } 1334 | 1335 | .follow p { 1336 | color: white; 1337 | font-size: 16px; 1338 | font-weight: 400; 1339 | line-height: 20px; 1340 | letter-spacing: -0.47px; 1341 | text-align: left; 1342 | margin-left: 910px; 1343 | padding: 30px; 1344 | } 1345 | 1346 | .circleInstagram { 1347 | margin-top: -290px; 1348 | margin-left: 900px; 1349 | display: flex; 1350 | align-items: center; 1351 | padding-left: 5px; 1352 | width: 28px; 1353 | height: 28px; 1354 | background-color: white; 1355 | border-radius: 150px; 1356 | } 1357 | 1358 | .circleFacebook { 1359 | margin-top: 50px; 1360 | margin-left: 900px; 1361 | display: flex; 1362 | align-items: center; 1363 | padding-left: 5px; 1364 | width: 28px; 1365 | height: 28px; 1366 | background-color: white; 1367 | border-radius: 150px; 1368 | } 1369 | 1370 | .circleLinkedin { 1371 | margin-top: 50px; 1372 | margin-left: 900px; 1373 | display: flex; 1374 | align-items: center; 1375 | padding-left: 5px; 1376 | width: 28px; 1377 | height: 28px; 1378 | background-color: white; 1379 | border-radius: 150px; 1380 | } 1381 | 1382 | .circleYoutube { 1383 | margin-top: 50px; 1384 | margin-left: 900px; 1385 | display: flex; 1386 | align-items: center; 1387 | padding-left: 5px; 1388 | width: 28px; 1389 | height: 28px; 1390 | background-color: white; 1391 | border-radius: 150px; 1392 | } 1393 | 1394 | @media screen and (max-width: 500px) { 1395 | 1396 | .logo { 1397 | width: 386px; 1398 | height: 54px; 1399 | margin-right: 60px; 1400 | margin-left: 55px; 1401 | display: flex; 1402 | } 1403 | 1404 | .logo img { 1405 | margin-left: 145px; 1406 | width: 6%; 1407 | } 1408 | 1409 | li { 1410 | display: none; 1411 | margin: 20px; 1412 | } 1413 | 1414 | .text h1 { 1415 | width: 300px; 1416 | font-size: 48px; 1417 | } 1418 | 1419 | .text button { 1420 | position: absolute; 1421 | top: 390px; 1422 | left: 74px; 1423 | font-size: 10px; 1424 | } 1425 | 1426 | .feature { 1427 | position: absolute; 1428 | top: 475px; 1429 | width: 75px; 1430 | height: 150px; 1431 | } 1432 | 1433 | .white-square { 1434 | top: 475px; 1435 | } 1436 | 1437 | .white-square p { 1438 | position: absolute; 1439 | top: 50px; 1440 | } 1441 | 1442 | .white-square h1 { 1443 | position: absolute; 1444 | top: 75px; 1445 | } 1446 | 1447 | .square-corporate { 1448 | width: 260px; 1449 | height: 460px; 1450 | top: 625px; 1451 | left: 75px; 1452 | } 1453 | 1454 | .square-corporate p { 1455 | top: 35px; 1456 | } 1457 | 1458 | .square-corporate img { 1459 | margin-top: 22%; 1460 | padding-right: 60px; 1461 | padding-left: 70px; 1462 | } 1463 | 1464 | .square-corporate hr { 1465 | display: none; 1466 | } 1467 | 1468 | .services { 1469 | margin-top: 400px; 1470 | width: 100%; 1471 | height: 1100px; 1472 | } 1473 | 1474 | .services button { 1475 | display: none; 1476 | } 1477 | 1478 | .lineUp { 1479 | margin-right: 74px; 1480 | } 1481 | 1482 | .lineUp h1 { 1483 | font-size: 30px; 1484 | padding-top: 15px; 1485 | } 1486 | 1487 | .lineUp button { 1488 | display: none; 1489 | } 1490 | 1491 | .align-space { 1492 | flex-direction: column; 1493 | } 1494 | 1495 | .about-nside { 1496 | width: 100%; 1497 | height: 660px; 1498 | background-image: url(/img/corre.svg); 1499 | margin-top: 100px; 1500 | } 1501 | 1502 | .about-nside p { 1503 | padding-top: 80px; 1504 | padding-left: 50px; 1505 | font-size: 12px; 1506 | } 1507 | 1508 | .about-nside h1 { 1509 | padding-top: 40px; 1510 | padding-left: 50px; 1511 | width: 350px; 1512 | font-size: 34px; 1513 | } 1514 | 1515 | .about-nside h2 { 1516 | margin-top: -23px; 1517 | padding-left: 50px; 1518 | font-size: 12px; 1519 | } 1520 | 1521 | .about-nside img { 1522 | padding-top: 30px; 1523 | padding-left: 30px; 1524 | font-size: 12px; 1525 | } 1526 | 1527 | .circle-play { 1528 | margin-top: 40px; 1529 | margin-left: 50px; 1530 | } 1531 | 1532 | .circle-play img { 1533 | margin-top: 5px; 1534 | margin-left: 5px; 1535 | } 1536 | 1537 | .picture img { 1538 | display: flex; 1539 | margin-left: -300px; 1540 | margin-top: 150px; 1541 | width: 990px; 1542 | height: 413px; 1543 | } 1544 | 1545 | .explore-work p { 1546 | display: flex; 1547 | margin-top: -700px; 1548 | } 1549 | 1550 | .explore-work h1 { 1551 | position: absolute; 1552 | margin-top: -450px; 1553 | margin-left: 2.5px; 1554 | font-size: 46px; 1555 | display: flex; 1556 | text-align: center; 1557 | } 1558 | 1559 | .explore-work button { 1560 | position: absolute; 1561 | margin-top: -200px; 1562 | } 1563 | 1564 | .works { 1565 | position: absolute; 1566 | margin-left: 30px; 1567 | margin-top: 550px; 1568 | display: flex; 1569 | flex-direction: column; 1570 | width: 85%; 1571 | height: 240px; 1572 | 1573 | } 1574 | 1575 | .works p { 1576 | padding: 40px; 1577 | } 1578 | 1579 | .properties { 1580 | margin-top: 290px; 1581 | width: 100%; 1582 | height: 3650px; 1583 | } 1584 | 1585 | .align-one { 1586 | height: 1150px; 1587 | flex-direction: column; 1588 | justify-content: center; 1589 | align-items: center; 1590 | } 1591 | 1592 | .all-properties { 1593 | margin-left: 0px; 1594 | } 1595 | 1596 | .spo-properties { 1597 | margin-top: 50px; 1598 | } 1599 | 1600 | .align-two { 1601 | height: 1250px; 1602 | flex-direction: column; 1603 | justify-content: center; 1604 | align-items: center; 1605 | } 1606 | 1607 | .exx-properties { 1608 | margin-left: 0px; 1609 | } 1610 | 1611 | .dis-properties { 1612 | margin-top: 50px; 1613 | } 1614 | 1615 | .align-three { 1616 | height: 1200px; 1617 | flex-direction: column; 1618 | justify-content: center; 1619 | align-items: center; 1620 | } 1621 | 1622 | .nik-properties { 1623 | margin-left: 0px; 1624 | margin-top: 0px; 1625 | } 1626 | 1627 | .met-properties { 1628 | margin-top: 50px; 1629 | } 1630 | 1631 | .samantha { 1632 | height: 820px; 1633 | } 1634 | 1635 | .samantha img { 1636 | position: relative; 1637 | width: 340px; 1638 | height: 400px; 1639 | margin-left: 30px; 1640 | margin-top: 30px; 1641 | } 1642 | 1643 | .previous { 1644 | margin-left: -40px; 1645 | width: 200px; 1646 | height: 70px; 1647 | transform: rotate(-90deg); 1648 | display: flex; 1649 | flex-direction: column; 1650 | align-items: center; 1651 | justify-content: center; 1652 | margin-top: -140px; 1653 | background-color: #090B1980; 1654 | color: white; 1655 | border: 1px #FFFFFF1A; 1656 | } 1657 | 1658 | .next { 1659 | margin-left: -40px; 1660 | width: 200px; 1661 | height: 70px; 1662 | transform: rotate(-90deg); 1663 | display: flex; 1664 | flex-direction: column; 1665 | align-items: center; 1666 | justify-content: center; 1667 | margin-top: -270px; 1668 | background-color: #090B1980; 1669 | color: white; 1670 | border: 1px #FFFFFF1A; 1671 | } 1672 | 1673 | .samantha h1 { 1674 | font-size: 44px; 1675 | display: flex; 1676 | flex-direction: column; 1677 | margin-left: 90px; 1678 | margin-top: 280px; 1679 | letter-spacing: -1.44px; 1680 | } 1681 | 1682 | .local { 1683 | display: none; 1684 | } 1685 | 1686 | .samanthaFeed { 1687 | position: absolute; 1688 | margin-left: 40px; 1689 | margin-top: 80px; 1690 | display: flex; 1691 | } 1692 | 1693 | .our-team { 1694 | width: 100%; 1695 | height: 1330px; 1696 | margin-top: 90px; 1697 | } 1698 | 1699 | .our-team-p p{ 1700 | padding-left: 30px; 1701 | } 1702 | 1703 | .behind { 1704 | display: flex; 1705 | align-items: center; 1706 | justify-content: center; 1707 | margin-right: 0px; 1708 | } 1709 | 1710 | .behind h1 { 1711 | padding-left: 0px; 1712 | } 1713 | 1714 | .behind button { 1715 | display: none; 1716 | } 1717 | 1718 | .align-behind { 1719 | display: flex; 1720 | flex-direction: column; 1721 | justify-content: center; 1722 | align-items: center; 1723 | } 1724 | 1725 | .jessica { 1726 | margin-left: 0px; 1727 | margin-top: 50px; 1728 | } 1729 | 1730 | .ryan { 1731 | margin-top: 50px; 1732 | } 1733 | 1734 | .carrie { 1735 | margin-top: 50px; 1736 | } 1737 | 1738 | .banner { 1739 | height: 150px; 1740 | } 1741 | 1742 | .popularCategories h1 { 1743 | display: none; 1744 | } 1745 | 1746 | .popularCategories p { 1747 | display: none; 1748 | } 1749 | 1750 | .recentPosts { 1751 | width: 100%; 1752 | } 1753 | 1754 | .recentPosts p { 1755 | margin-top: 100px; 1756 | margin-left: 20px; 1757 | } 1758 | 1759 | .recentPosts h1 { 1760 | margin-left: 20px; 1761 | font-size: 40px; 1762 | } 1763 | 1764 | .recentPosts button { 1765 | display: none; 1766 | } 1767 | 1768 | .principles img { 1769 | width: 340px; 1770 | margin-left: 20px; 1771 | margin-top: 40px; 1772 | } 1773 | 1774 | .principles h1 { 1775 | width: 300px; 1776 | margin-left: 20px; 1777 | margin-top: -5px; 1778 | font-size: 18px; 1779 | } 1780 | 1781 | .principles p { 1782 | margin-left: 20px; 1783 | margin-top: 10px; 1784 | } 1785 | 1786 | .floor p { 1787 | margin-left: 260px; 1788 | margin-top: 50px; 1789 | } 1790 | 1791 | .floor h1 { 1792 | margin-left: 20px; 1793 | margin-top: 50px; 1794 | font-size: 16px; 1795 | } 1796 | 1797 | .webflow img { 1798 | width: 340px; 1799 | margin-left: 20px; 1800 | margin-top: 100px; 1801 | } 1802 | 1803 | .webflow h1 { 1804 | margin-top: -5px; 1805 | margin-left: 20px; 1806 | width: 300px; 1807 | font-size: 18px; 1808 | } 1809 | 1810 | .webflow p { 1811 | margin-left: 20px; 1812 | margin-top: 10px; 1813 | } 1814 | 1815 | .loveWeb p { 1816 | margin-left: 260px; 1817 | margin-top: 50px; 1818 | } 1819 | 1820 | .loveWeb h1 { 1821 | margin-left: 20px; 1822 | margin-top: 50px; 1823 | font-size: 16px; 1824 | } 1825 | 1826 | .bestExamples img { 1827 | width: 340px; 1828 | margin-left: 20px; 1829 | margin-top: 100px; 1830 | } 1831 | 1832 | .bestExamples h1 { 1833 | margin-top: -5px; 1834 | margin-left: 20px; 1835 | width: 300px; 1836 | font-size: 18px; 1837 | } 1838 | 1839 | .bestExamples p { 1840 | margin-left: 20px; 1841 | margin-top: 10px; 1842 | } 1843 | 1844 | .blogDesign h1 { 1845 | margin-left: 20px; 1846 | margin-top: 50px; 1847 | font-size: 16px; 1848 | } 1849 | 1850 | .blogDesign p { 1851 | margin-left: 260px; 1852 | margin-top: 50px; 1853 | } 1854 | 1855 | .misconceptions img { 1856 | width: 340px; 1857 | margin-left: 20px; 1858 | margin-top: 100px; 1859 | } 1860 | 1861 | .misconceptions h1 { 1862 | margin-top: -5px; 1863 | margin-left: 20px; 1864 | width: 300px; 1865 | font-size: 18px; 1866 | } 1867 | 1868 | .misconceptions p { 1869 | margin-left: 20px; 1870 | margin-top: 10px; 1871 | } 1872 | 1873 | .organization h1 { 1874 | margin-left: 20px; 1875 | margin-top: 50px; 1876 | font-size: 16px; 1877 | } 1878 | 1879 | .organization p { 1880 | margin-left: 260px; 1881 | margin-top: 50px; 1882 | } 1883 | 1884 | .sevenThings img { 1885 | width: 340px; 1886 | margin-left: 20px; 1887 | margin-top: 100px; 1888 | } 1889 | 1890 | .sevenThings h1 { 1891 | margin-top: -5px; 1892 | margin-left: 20px; 1893 | width: 300px; 1894 | font-size: 18px; 1895 | } 1896 | 1897 | .sevenThings p { 1898 | margin-left: 20px; 1899 | margin-top: 10px; 1900 | } 1901 | 1902 | .boss h1 { 1903 | margin-left: 20px; 1904 | margin-top: 50px; 1905 | font-size: 16px; 1906 | } 1907 | 1908 | .boss p { 1909 | margin-left: 260px; 1910 | margin-top: 50px; 1911 | } 1912 | 1913 | .worstAdvice img { 1914 | width: 340px; 1915 | margin-left: 20px; 1916 | margin-top: 100px; 1917 | } 1918 | 1919 | .worstAdvice h1 { 1920 | margin-top: -5px; 1921 | margin-left: 20px; 1922 | width: 300px; 1923 | font-size: 18px; 1924 | } 1925 | 1926 | .worstAdvice p { 1927 | margin-left: 20px; 1928 | margin-top: 10px; 1929 | } 1930 | 1931 | .design h1 { 1932 | margin-left: 20px; 1933 | margin-top: 50px; 1934 | font-size: 16px; 1935 | } 1936 | 1937 | .design p { 1938 | margin-left: 260px; 1939 | margin-top: 50px; 1940 | } 1941 | 1942 | .nside { 1943 | height: 900px; 1944 | margin-top: 150px; 1945 | } 1946 | 1947 | .nside h1 { 1948 | padding-top: 80px; 1949 | margin-left: 20px; 1950 | } 1951 | 1952 | .nside h2 { 1953 | margin-left: 20px; 1954 | } 1955 | 1956 | .nside p { 1957 | margin-left: 20px; 1958 | } 1959 | 1960 | .navigation h1 { 1961 | margin-top: -440px; 1962 | margin-left: 20px; 1963 | } 1964 | 1965 | .navigation p { 1966 | margin-left: 20px; 1967 | } 1968 | 1969 | .follow h1 { 1970 | display: none; 1971 | } 1972 | 1973 | .follow p { 1974 | display: none; 1975 | } 1976 | 1977 | .circleInstagram { 1978 | display: none; 1979 | } 1980 | 1981 | .circleFacebook { 1982 | display: none; 1983 | } 1984 | 1985 | .circleLinkedin { 1986 | display: none; 1987 | } 1988 | 1989 | .circleYoutube { 1990 | display: none; 1991 | } 1992 | 1993 | } -------------------------------------------------------------------------------- /img/ryan.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | --------------------------------------------------------------------------------