Portfolio/style.css at master · GH-TIMe/Portfolio · GitHub

1
2
*,::before,::after{box-sizing:border-box;padding:0;margin:0}html{font-size:10px}body{font-family:'Roboto',sans-serif;color:#000}body.no-scroll{overflow:hidden}.container{max-width:1000px;width:100%;margin:0 auto;padding:0 20px;overflow:hidden}@media (max-width:600px){.container{padding:0 20px}}@media (min-width:768px){.container{width:750px}}@media (min-width:1000px){.container{width:1000px}}header{display:block;position:fixed;width:100%;top:0;left:0;padding:20px 0;z-index:1000;background-color:#fff;border-bottom:1px solid #e3e3e3}header.active{border-bottom:1px solid transparent;box-shadow:0 5px 10px rgba(37,37,37,0.1)}.header__inner{display:flex;justify-content:space-between;align-items:center}.header__logo{font:700 24px/1.56 'Montserrat',sans-serif}@media (max-width:1000px){.header__logo{font-size:18px;line-height:1.4}}.header__burger{display:none}@media (max-width:1000px){.header__burger{display:block}}.other-color{color:#33f}.navigation{list-style:none}@media (max-width:1000px){.navigation{display:none}}.navigation__item{display:inline-block;white-space:nowrap;margin:8px 0 10px 20px}.navigation__link{display:block;font:700 12px/1.16 'Montserrat',sans-serif;color:#000;text-decoration:none;text-transform:uppercase;border-bottom:1px solid transparent;transition:all .1s linear}.navigation__link:hover{color:#33f;border-bottom:1px solid #33f}.title{margin-bottom:2px;font:700 30px/1.25 'Montserrat',sans-serif}@media (max-width:1000px){.title{font-size:24px;line-height:1.5}}.title_underline{text-decoration:underline;-webkit-text-decoration-color:#33f;text-decoration-color:#33f}.about-me{margin-top:73.6px;border-bottom:1px solid #e3e3e3}.about-me__inner{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:80px 0}@media (max-width:1000px){.about-me__inner{flex-direction:column-reverse;margin:30px 0}}.about-me__content{width:500px}@media (max-width:1000px){.about-me__content{width:100%}}.about-me__photo{width:340px;height:340px;background:url("https://gh-time.github.io/Portfolio/img/my_photo-min.png");background-repeat:no-repeat;background-size:contain;background-position:center;border-radius:50%;background-color:#33e}@media (max-width:1000px){.about-me__photo{width:340px;height:340px;margin-bottom:20px}}@media (max-width:600px){.about-me__photo{width:250px;height:250px}}.about-me__title{font:700 36px/1.25 "Montserrat",sans-serif;text-align:left;opacity:1}@media (max-width:1000px){.about-me__title{text-align:center;font-size:30px;line-height:1.4}}@media (max-width:400px){.about-me__title{font-size:24px;line-height:1.5}}.about-me__text{font:16px/1.56 'Roboto',sans-serif;margin-bottom:20px;opacity:.8}@media (max-width:1000px){.about-me__text{font-size:14px;line-height:1.4}}.about-me__info{list-style:none;margin-bottom:30px}.about-me__info-item{display:flex;max-width:250px;width:100%;justify-content:space-between;align-items:center;margin-bottom:10px}.about-me__info-title{display:block;text-transform:uppercase;font:700 14px/1.66 "Roboto",sans-serif}.about-me__info-detail{display:block;text-decoration:none;font:14px 'Roboto',sans-serif;transition:all .1s linear;color:#000;opacity:.8;cursor:pointer}.about-me__info-detail:hover{color:#33f;opacity:1}.about-me__info-detail:active{opacity:.8}.social{list-style:none}.social__item{display:inline;padding-right:20px}.social__item:last-child{padding-right:0}.social__icon{text-decoration:none;transition:all .1s linear}.social__icon svg path{transition:all .1s linear;fill:#000;opacity:1}.social__icon:hover svg path{fill:#33f}.social__icon:active{opacity:.8}.button{display:block;min-width:170px;padding:15px;font:700 12px/1.66 'Montserrat',sans-serif;text-transform:uppercase;text-decoration:none;text-align:center;border:none;border-radius:2px;cursor:pointer;outline:none}.button_contact{display:inline-block;background-color:#33f;color:#fff;transition:box-shadow .3s ease}.button_contact:hover{box-shadow:10px 10px 20px rgba(51,51,255,0.2)}.button_contact:active{box-shadow:10px 10px 20px rgba(51,51,255,0.2)}@media (max-width:480px){.button_contact{width:100%}}.button_download-cv{display:inline-block;margin-left:30px;background-color:#e3e3e3;color:#000;transition:all .3s ease}.button_download-cv:hover{box-shadow:10px 10px 20px rgba(37,37,37,0.2)}.button_download-cv:active{background:#c7c7c7;box-shadow:10px 10px 20px rgba(37,37,37,0.2)}@media (max-width:480px){.button_download-cv{margin:20px 0 0 0;width:100%}}.mobile-nav{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#33f;z-index:2000;transform:translateY(-100%);transition:transform .2s ease}.mobile-nav.active{transform:translateY(0)}.mobile-nav__items{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);list-style:none;text-align:center}.mobile-nav__item{display:block;padding:17px}.mobile-nav__link{font:700 12px/1.66 'Montserrat',sans-serif;text-decoration:none;text-transform:uppercase;color:#fff}.close{display:block;position:absolute;top:0;right:0;margin:30px 30px 0 0;cursor:pointer}.block{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;padding:30px 0;font:16px/1.56 'Roboto',sans-serif}@media (max-width:1000px){.block{display:block;font-size:14px;line-height:1.4}}.block__content{align-self:flex-start;width:30%;margin-right:15px}@media (max-width:1000px){.block__content{width:100%;margin-right:0}}.block__description{opacity:.8}.block__items{width:65%;margin-left:15px;list-style:none}@media (max-width:1000px){.block__items{width:100%;margin-left:0}}.block__item{padding-top:20px;border-bottom:1px solid #e3e3e3}.block__item:first-child{padding-top:0}.block__item:last-child{border-bottom:none}@media (max-width:1000px){.block__item:first-child{padding-top:20px}}.skills{border-bottom:1px solid #e3e3e3}.skills__items{display:flex;width:65%;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-left:15px;list-style:none}@media (max-width:1000px){.skills__items{width:100%;display:block;margin-left:0}}.skills__item{width:48%;padding:20px 0}.skills__item:nth-child(n+3){border-top:1px solid #e3e3e3}@media (max-width:1000px){.skills__item{width:100%}.skills__item:nth-child(2){border-top:1px solid #e3e3e3}.skills__item:last-child{padding-bottom:0}}.skills__header{font:700 18px/1.55 'Montserrat',sans-serif}.skills__text{opacity:.8;text-align:justify}.education{border-bottom:1px solid #e3e3e3}.education__header{font:700 18px/1.55 'Montserrat',sans-serif}.education__name{opacity:.8}.education__text{font-style:italic;margin:10px 0 20px;opacity:.8}.block__item:last-child .education__text{margin-bottom:0}.education__abbr{text-decoration:none;cursor:pointer;border-bottom:1px dashed #33f}.education__organization{margin-right:10px}.education__certificate{display:block;max-width:300px;width:100%;overflow:hidden;border-radius:2px;margin-bottom:2rem;cursor:pointer}.education__img{display:block;width:100%}.portfolio{border-bottom:1px solid #e3e3e3}.portfolio__inner{padding:30px 0}.portfolio__navigation{list-style:none;margin:20px 0 20px;white-space:nowrap;overflow-x:scroll;-ms-overflow-style:none}.portfolio__navigation::-webkit-scrollbar{display:none}.portfolio__category{display:inline-block;margin-right:25px;text-transform:uppercase;border-bottom:1px solid transparent;cursor:pointer;font:700 12px/1.16 'Montserrat',sans-serif;color:#000;transition:all .1s linear}.portfolio__category:last-child{margin-right:0}.portfolio__category:hover{color:#33f;border-bottom:1px solid #33f}.portfolio__category.active{color:#33f}.works{width:100%;display:flex;flex-wrap:wrap;margin:0 auto;list-style:none}.works__item{display:block;position:relative;width:24%;margin:0 calc((100% - 24%*4) / 3) 30px 0;cursor:pointer;overflow:hidden}.works__item:nth-child(4n+4){margin-right:0}.works__item.is-animated{animation:.2s zoom-in}@media (max-width:800px){.works__item{width:45%;margin:0 calc(100% - 45%*2) 30px 0}.works__item:nth-child(2n+2){margin-right:0}}@media (max-width:500px){.works__item{width:100%;margin:0 0 30px 0}.works__item:last-child{margin-bottom:0}}@keyframes zoom-in{0%{transform:scale(.1)}100%{transform:none}}.works__img-container{width:100%;overflow:hidden;margin-bottom:10px;border-radius:2px}.works__img{display:block;width:100%;transition:transform .2s linear}.works__item:hover .works__figure .works__img{transform:scale(1.2)}.works__title{margin-bottom:2px;font:700 18px/1.55 'Montserrat',sans-serif;color:#000;text-decoration:underline;-webkit-text-decoration-color:transparent;text-decoration-color:transparent;transition:all .1s linear}.works__item:hover .works__figure .works__caption .works__title{color:#33f;-webkit-text-decoration-color:#33f;text-decoration-color:#33f}.works__date{font:16px/1.56 "Roboto",sans-serif;color:inherit;opacity:.8}@media (max-width:1000px){.works__date{font-size:14px;line-height:1.4}}.contact__form{width:65%;margin-left:15px}@media (max-width:1000px){.contact__form{width:100%;margin:20px 0 0 0}}.form__input-group{display:flex;justify-content:space-between;align-items:flex-start}@media (max-width:1000px){.form__input-group{flex-direction:column}}.form__input{display:block;position:relative;margin-bottom:30px}.form__input-field{display:block;width:100%;height:50px;padding:0 20px;font:14px/1.4 "Montserrat",sans-serif;border:1px solid #e3e3e3;border-radius:2px;outline:none}.form__group-left{width:40%;padding-right:15px}@media (max-width:1000px){.form__group-left{width:100%;padding:0}}.form__group-right{width:60%;text-align:right}@media (max-width:1000px){.form__group-right{width:100%}}.form__textarea{display:block;width:100%;height:130px;padding:15px 20px;font:14px/1.4 "Montserrat",sans-serif;border:1px solid #e3e3e3;border-radius:2px;resize:none;outline:none}.form__valid{position:absolute;top:0;left:0;bottom:0;right:0;border:2px solid transparent;border-radius:2px;pointer-events:none;transition:all .2s ease}.form__input-field:hover+.form__valid,.form__textarea:hover+.form__valid,.form__input-field:focus+.form__valid,.form__textarea:focus+.form__valid,.form__input-field:active+.form__valid,.form__textarea:active+.form__valid{border:2px solid #33f}.form__input-field:invalid+.form__valid,.form__textarea:invalid+.form__valid,.form__input-field.invalid+.form__valid,.form__textarea.invalid+.form__valid{border:2px solid #ff4669}.form__invalid-icon{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);margin-right:10px;pointer-events:none}.form__input-field.invalid~.form__invalid-icon,.form__input-field:invalid~.form__invalid-icon{display:block}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:2000;overflow-y:auto}.modal__container{max-width:850px;margin:30px auto}@media (max-width:850px){.modal__container{margin:0}}.modal__work{display:none;padding:40px;transform:translateY(-100%);background-color:#fff;transition:all .4s ease}.modal__work.is-animated{transform:translateY(0)}.modal__title{text-align:left}.modal__stack{font:14px/1.4 "Roboto",sans-serif;opacity:.8}.modal__img{display:block;width:100%;margin-bottom:20px}.modal__link{text-decoration:underline;-webkit-text-decoration-color:transparent;text-decoration-color:transparent;color:#33f;transition:all .2s ease}.modal__link:hover{text-decoration:underline;-webkit-text-decoration-color:#33f;text-decoration-color:#33f}.viewer{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:9999;overflow-y:auto}.viewer__container{max-width:850px;width:100%;height:100%;margin:0 auto;display:flex;justify-content:center;align-items:center}.viewer__content{display:none;width:100%;padding:2rem;overflow:hidden}.viewer__img{display:block;width:100%}.viewer__close{opacity:.8;transition:opacity .1s linear}.viewer__close:hover{opacity:1}
/*# sourceMappingURL=./style.css.map */