Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- background-position: center;
- background-size: cover;
- }
- .section {
- opacity: 0;
- transform: translateY(30px);
- transition: opacity 2.7s, transform 2s; /* Adjusted timing for opacity and transform */
- }
- .section.reveal {
- opacity: 1;
- transform: translateY(0);
- }
- body {
- font-size: 14px;
- overflow-x: hidden;
- margin: 0; /* Remove default margin */
- padding: 0; /* Remove default padding */
- }
- .fullpage.reveal {
- opacity: 1;
- transform: translateY(0);
- min-width: 200;
- width: 100%;
- height: 3928px;
- background: rgba(255,255,255,1);
- opacity: 1;
- position: relative;
- top: 0px;
- left: 0px;
- overflow: hidden;
- }
- .introduction {
- width: 400px;
- height: 310px;
- background: url("../images/v4_22.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 181px;
- left: 59px;
- overflow: hidden;
- }
- .name_intro {
- width: 414px;
- color: rgba(0,0,0,1);
- position: relative;
- top: 0px;
- left: 0px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 64px;
- opacity: 1;
- text-align: left;
- }
- .student_intro {
- width: 414px;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 254px;
- left: 0px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- }
- .aboutme {
- width: 100%;
- height: 50vh;
- background: url("../images/noneexistant.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 992px;
- left: 59px;
- overflow: hidden;
- }
- .aboutme_title {
- width: 414px;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 0px;
- left: 0px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 64px;
- opacity: 1;
- text-align: left;
- }
- .aboutme_statement {
- width: 100%;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 117px;
- left: 0px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word; /* This line breaks the text when it overflows the container */
- /* Media query for screen sizes larger than mobile */
- @media (min-width: 768px) {
- max-width: 60%;
- }
- }
- .education {
- width: 621px;
- height: 213px;
- max-width: 85%;
- background: url("../images/v4_29.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 1708px;
- left: 59px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .education_title {
- width: 414px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 0px;
- left: 0px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 64px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .ada_grouped {
- width: 100px;
- height: 100px;
- max-width: 85%;
- background: url("../images/ada.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 113px;
- left: 0px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .ada_name {
- width: 499px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 113px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .ada_year {
- width: 499px;
- color: rgba(0,0,0,0.800000011920929);
- position: absolute;
- top: 170px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- }
- .skills {
- width: 621px;
- height: 613px;
- max-width: 85%;
- background: url("../images/v4_37.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 2422px;
- left: 59px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .skills_title {
- width: 414px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 0px;
- left: 0px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 64px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .htmlimage {
- width: 100px;
- height: 100px;
- max-width: 85%;
- background: url("../images/html.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 113px;
- left: 0px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .html {
- width: 499px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 146px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .cssimage {
- width: 100px;
- height: 100px;
- max-width: 85%;
- background: url("../images/css.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 213px;
- left: 0px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .css{
- width: 499px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 246px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .jsimage{
- width: 100px;
- height: 100px;
- max-width: 85%;
- background: url("../images/js.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 313px;
- left: 0px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .js{
- width: 499px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 346px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .pyimage{
- width: 100px;
- height: 100px;
- max-width: 85%;
- background: url("../images/python.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 413px;
- left: 0px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .py{
- width: 499px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 446px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .experience {
- width: 621px;
- height: 313px;
- max-width: 85%;
- background: url("../images/v4_45.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 3136px;
- left: 59px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .experience_title {
- width: 414px;
- max-width: 95%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 0px;
- left: 0px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 64px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .firstexpimage {
- width: 100px;
- height: 100px;
- max-width: 85%;
- background: url("../images/salesforce.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 113px;
- left: 0px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .firstexp {
- width: 499px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 113px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .firstexpyear {
- width: 499px;
- color: rgba(0,0,0,0.800000011920929);
- position: absolute;
- top: 170px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- }
- .secondexpimage{
- width: 100px;
- height: 100px;
- max-width: 85%;
- background: url("../images/bankofamerica.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 213px;
- left: 0px;
- overflow: hidden;
- word-wrap: break-word;
- }
- .secondexp{
- width: 499px;
- max-width: 85%;
- color: rgba(0,0,0,1);
- position: absolute;
- top: 213px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- word-wrap: break-word;
- }
- .secondexpyear{
- width: 499px;
- color: rgba(0,0,0,0.800000011920929);
- position: absolute;
- top: 270px;
- left: 122px;
- text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: left;
- }
- .footer {
- width: 100%;
- height: 250px;
- background: url("../images/v4_21.png");
- background-repeat: no-repeat;
- background-position: center center;
- background-size: cover;
- opacity: 1;
- position: absolute;
- top: 3678px;
- left: 0px;
- overflow: hidden;
- }
- .gradient{
- width: 100%;
- height: 250px;
- background: linear-gradient(rgba(255,255,255,1), rgba(217,217,217,1));
- opacity: 1;
- position: absolute;
- top: 0px;
- left: 0px;
- overflow: hidden;
- }
- .footername {
- width: auto;
- color: rgba(0, 0, 0, 1);
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-family: Helvetica;
- font-weight: Bold;
- font-size: 24px;
- opacity: 1;
- text-align: center;
- }
- .footericons {
- position: absolute;
- top: calc(50% + 20px); /* Position the icons below the footername */
- left: 50%;
- transform: translateX(-50%);
- display: flex;
- justify-content: space-between;
- width: 150px;
- }
- .x {
- order: 1; /* Display x icon first */
- width: 48px;
- height: 48px;
- opacity: 1;
- overflow: hidden;
- }
- .x:hover{
- transform: scale(1.2);
- transition-duration: 0.2s;
- }
- .instagram {
- order: 2; /* Display Instagram icon second */
- width: 48px;
- height: 48px;
- opacity: 1;
- overflow: hidden;
- }
- .instagram:hover{
- transform: scale(1.2);
- transition-duration: 0.2s;
- }
- .linkedin {
- order: 3; /* Display LinkedIn icon third */
- width: 48px;
- height: 48px;
- opacity: 1;
- overflow: hidden;
- }
- .linkedin:hover{
- transform: scale(1.2);
- transition-duration: 0.2s;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement