style.css

*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}body{background:#fff}.nav-bar{display:flex;justify-content:space-between;align-items:center}.brand-title{font-size:1.5rem;margin:.5rem}.navbar-links ul{margin:0;padding:0;display:flex}.navbar-links li{list-style:none}.navbar-links li a{text-decoration:none;color:#fb5283;padding:1rem;display:block}.navbar-links LI:hover{background-color:#555}.toggle-button{position:absolute;top:.75rem;right:1rem;display:none;flex-direction:column;justify-content:space-between;width:30px;height:21px}.toggle-button .bar{height:3px;width:100%;background-color:#28292d;border-radius:10px}.first{position:relative;width:93%;height:380px;margin:0 20px;padding:10px;background-color:#fff;border-radius:8px;overflow:hidden}.cover-first{line-height:2;font-size:16px;font-weight:200;position:absolute;inset:2px;border-radius:8px;padding:50px 40px;background-color:#fff}#image1{width:70px;height:70px;border-radius:100%}.first-footer{margin-block:10px;padding-block:10px;display:flex;border:10px;flex-direction:row}#col{color:#ff3527;margin-right:10px;animation:front 2s}@keyframes front{0%{transform:translateX(200px);opacity:.1}100%{transform:translateX(0);opacity:3}}#col1{display:flex}.btn,.btn1{width:140px;border:10px;padding:12px 10px;outline:0;color:#fff;background:linear-gradient(to right,#fb5283,#ff3527);border-radius:6px;cursor:pointer;margin-right:30px}.btn1:hover{margin-right:30px;display:flex;width:160px;align-items:center;justify-content:space-between;transition:width .5s}.second{background-color:#fff;overflow:hidden;margin:0 20px;line-height:2;position:relative;inset:2px;border-radius:8px;padding:0 40px;background-color:#fff}.second h4{font-weight:400;letter-spacing:2px}.second h2{border-radius:20px;padding:10px;color:#fb5283;font-size:1.5em;font-weight:bold}@keyframes sharp{0%{transform:translateX(30px)}100%{transform:translateX(0px)}}.third{background-color:#fff;overflow:hidden;margin:20px 20px;line-height:2;padding:0 40px;display:flexbox;justify-content:space-between}.third h2{border-radius:20px;padding:10px;color:#fb5283;font-size:1.5em;font-weight:bold}.skill{display:block;padding:20px}.skill img{width:40px;height:40px}.pic{width:30px;height:30px}.fourth{background-color:#fff;overflow:hidden;margin:0 20px;line-height:2;position:relative;inset:2px;border-radius:8px;padding:0 40px;background-color:#fff}.fourth h3{color:#fb5283}.col-1{flex-basis:40%;position:relative;margin-left:50px}.col-1 h4{font-size:16px;font-weight:100;color:#000}.col-1::after{content:"";width:10px;height:90%;background:linear-gradient(#ff469f,#ff6062);position:absolute;left:-40px;top:8px}.seventh{display:grid;overflow:hidden;margin:40px 20px;line-height:2;position:relative;inset:2px;border-radius:8px;padding:0 40px;background-color:#fff}.seventh h2{color:#fb5283}.form-1{inset:2px;border-radius:8px;background:linear-gradient(to right,#fb5283,#ff3527);z-index:10;padding:50px 40px;display:flex;flex-direction:column}.form-1 h2{color:#fff;font-weight:500;text-align:center;letter-spacing:.1em}.inputBox{position:relative;width:90%;margin-top:35px}.inputBox input{position:relative;width:80%;padding:20px 10px 10px;background:transparent;outline:0;border:0;color:#23242a;font-size:1em;letter-spacing:.05em;z-index:10}.inputBox span{position:absolute;left:0;padding:20px 0 10px;font-size:1em;color:#8f8f8f;pointer-events:.05em;transition:.5s}.inputBox input:valid ~span,.inputBox input:focus ~span{color:#fff;transform:translateX(0px) translateY(-34px);font-size:.75em}.inputBox i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:#fff;border-radius:4px;transition:.5s;pointer-events:none;z-index:9}.inputBox input:valid ~i,.inputBox input:valid ~i{height:44px}.btn2{width:10%;height:30px;background-color:#000;color:#fff;border:0;border-radius:3px;margin:10px}.social-links img{height:13px;margin:20px;cursor:pointer}.social-links{margin-top:30px;text-align:center;margin-bottom:30px}#sharp{text-decoration:none;color:antiquewhite}
@media(max-width:450px){*{margin:0;padding:0;box-sizing:border-box}.toggle-button{display:flex;margin-left:60px}.navbar-links{display:none;width:100%}.nav-bar{flex-direction:column;align-items:flex-start}.navbar-links ul{width:100%;flex-direction:column}.navbar-links li{text-align:center}.navbar-links li a{padding:.5rem 1rem}.navbar-links.active{display:flex;margin-right:50px}.first{position:relative;width:100%;height:380px;margin:0;padding:10px;background-color:#fff;border-radius:8px;overflow:hidden}.cover-first{line-height:2;font-size:16px;font-weight:200;position:absolute;inset:2px;border-radius:8px;padding:10px 40px 20px;background-color:#fff}.btn,.btn1{font-family:cursive;width:140px;border:10px;padding:12px 10px;outline:0;color:#fff;background:linear-gradient(to right,#fb5283,#ff3527);border-radius:6px;cursor:pointer;transition:width .5s;margin-right:50px;font-size:11px}.btn{display:none}.btn1:hover{font-family:sans-serif;margin-right:30px;transition:width .5s}.cover2{padding:5px 5px;background:linear-gradient(#ff54a2,#ff575a);border-radius:20px 0 0 20px;z-index:-1}.second{background-color:#fff;overflow:hidden;margin:0;line-height:2;position:relative;inset:2px;border-radius:8px;padding:0 40px;background-color:#fff}.second h4{font-size:16px;font-weight:100;letter-spacing:2px}.third{margin:0;padding:40px}.seventh{position:absolute;display:grid;overflow:hidden;margin:40px 20px;line-height:2;position:relative;inset:2px;border-radius:8px;padding:0 40px;background-color:#fff}.form-1{inset:2px;border-radius:8px;background:linear-gradient(to right,#fb5283,#ff3527);z-index:10;padding:50px 40px;display:flex;flex-direction:column}.form-1 h2{color:#fff;font-weight:500;text-align:center;letter-spacing:.1em}.inputBox{position:relative;width:80%;margin-top:35px}.inputBox input{position:relative;width:80%;padding:20px 10px 10px;background:transparent;outline:0;border:0;color:#23242a;font-size:1em;letter-spacing:.05em;z-index:10}.inputBox span{position:absolute;left:0;padding:20px 0 10px;font-size:1em;color:#8f8f8f;pointer-events:.05em;transition:.5s}.inputBox input:valid ~span,.inputBox input:focus ~span{color:#fff;transform:translateX(0px) translateY(-34px);font-size:.75em}.inputBox i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:#fff;border-radius:4px;transition:.5s;pointer-events:none;z-index:9}.inputBox input:valid ~i,.inputBox input:valid ~i{height:44px}.btn2{width:40%;height:30px;background-color:#000;color:#fff;border:0;border-radius:3px;margin:10px}.social-links img{height:13px;margin:20px;cursor:pointer}.social-links{margin-top:30px;text-align:center;margin-bottom:20px}}