-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
153 additions
and
155 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,234 +1,232 @@ | ||
| .container { | ||
| margin: 1em auto; | ||
| margin: 1em auto; | ||
| } | ||
|
|
||
| .col, | ||
| .container, | ||
| .social-media img { | ||
| width: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .row { | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -ms-flex-wrap: wrap; | ||
| flex-wrap: wrap; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: Calibri, sans-serif; | ||
| } | ||
| * { | ||
| font-family: Calibri, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| figure img { | ||
| transition: 1.5s; | ||
| transition: 1.5s; | ||
| } | ||
|
|
||
| figure img:hover { | ||
| transform: scale(1.1); | ||
| transition: 0.5s; | ||
| transform: scale(1.1); | ||
| transition: 0.5s; | ||
| } | ||
|
|
||
| footer { | ||
| background-image: linear-gradient(rgb(212, 192, 195), rgb(0, 15, 11)); | ||
| padding: 15px; | ||
| margin-top: 10px; | ||
| border-top: solid 2px #333; | ||
| background-image: linear-gradient(rgb(212, 192, 195), rgb(0, 15, 11)); | ||
| border-top: solid 2px #333; | ||
| margin-top: 10px; | ||
| padding: 15px; | ||
| } | ||
|
|
||
| header { | ||
| background-image: linear-gradient(#455a64 , #000); | ||
| padding: 2px; | ||
| color: #fff; | ||
| border-bottom: solid 2px #000; | ||
| background-image: linear-gradient(#455a64, #000); | ||
| border-bottom: solid 2px #000; | ||
| color: #fff; | ||
| padding: 2px; | ||
| } | ||
|
|
||
| ul { | ||
| padding-top: 5px; | ||
| text-align: center; | ||
| padding-top: 5px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| ul li { | ||
| list-style-type: none; | ||
| font-size: 1.3rem; | ||
| font-weight: bold; | ||
| font-size: 1.3rem; | ||
| font-weight: bold; | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 2.5rem; | ||
| font-size: 2.5rem; | ||
| } | ||
|
|
||
| h1, | ||
| h2, | ||
| p { | ||
| text-align: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 2.3rem; | ||
| font-style: oblique; | ||
| font-size: 2.3rem; | ||
| font-style: oblique; | ||
| } | ||
|
|
||
| .about-me-photo { | ||
| margin-top: 2%; | ||
| margin-left: 30%; | ||
| width: 45%; | ||
| clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); | ||
| clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); | ||
| margin-left: 30%; | ||
| margin-top: 2%; | ||
| width: 45%; | ||
| } | ||
|
|
||
| figure { | ||
| height: 100%; | ||
| padding-bottom: 10px; | ||
| height: 100%; | ||
| padding-bottom: 10px; | ||
| } | ||
|
|
||
| figcaption { | ||
| font-weight: bold; | ||
| text-align: center; | ||
| font-size: 1.7rem; | ||
| margin-left: 13px; | ||
| font-size: 1.7rem; | ||
| font-weight: bold; | ||
| margin-left: 13px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| p { | ||
| padding-left: 20px; | ||
| padding-right: 20px; | ||
| font-size: 1.3rem; | ||
| font-size: 1.3rem; | ||
| padding-left: 20px; | ||
| padding-right: 20px; | ||
| } | ||
|
|
||
| body { | ||
| background-color: #424242; | ||
| background-color: #424242; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| color: #eceff1; | ||
| color: #eceff1; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| #about-me { | ||
| margin-top: 9px; | ||
| padding-top: 2px; | ||
| padding-bottom: 10px; | ||
| clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%); | ||
| clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%); | ||
| margin-top: 9px; | ||
| padding-bottom: 10px; | ||
| padding-top: 2px; | ||
| } | ||
|
|
||
| #skills { | ||
| padding-top: 10px; | ||
| clip-path: polygon(0 1%, 100% 0, 100% 100%, 0% 100%); | ||
| clip-path: polygon(0 1%, 100% 0, 100% 100%, 0% 100%); | ||
| padding-top: 10px; | ||
| } | ||
|
|
||
| #about-me, | ||
| #skills { | ||
| background-color: #fff; | ||
| margin-left: 8px; | ||
| margin-right: 8px; | ||
| background-color: #fff; | ||
| margin-left: 8px; | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| .skill-photo { | ||
| margin-top: 2%; | ||
| margin-left: 30%; | ||
| width: 45%; | ||
| margin-left: 30%; | ||
| margin-top: 2%; | ||
| width: 45%; | ||
| } | ||
|
|
||
| .social-media { | ||
| display: grid; | ||
| grid-template-columns: repeat(12, auto); | ||
| text-align: center; | ||
| display: grid; | ||
| grid-template-columns: repeat(12, auto); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .social-media img { | ||
| width: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| @media (min-width: 768px) and (max-width: 1023px) { | ||
| .col { | ||
| width: 50%; | ||
| } | ||
|
|
||
| .social-media { | ||
| padding: 0 25%; | ||
| } | ||
|
|
||
| .social-media img { | ||
| width: 50%; | ||
| } | ||
|
|
||
| ul { | ||
| margin-top: -6%; | ||
| margin-left: 70%; | ||
| padding-bottom: 13px; | ||
| } | ||
|
|
||
| ul li { | ||
| display: inline-flex; | ||
| font-size: 1.7rem; | ||
| margin-left: 5%; | ||
| } | ||
|
|
||
| h1 { | ||
| padding-bottom: -21%; | ||
| margin-right: 64%; | ||
| } | ||
|
|
||
| .about-me-photo { | ||
| width: 28%; | ||
| margin-left: 37.5%; | ||
| } | ||
|
|
||
| #about-me { | ||
| clip-path: polygon(0 0, 100% 0, 100% 97.3%, 0% 100%); | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px){ | ||
| .col { | ||
| width: 25%; | ||
| } | ||
|
|
||
| .social-media { | ||
| padding: 0 25%; | ||
| } | ||
|
|
||
| .social-media img { | ||
| width: 50%; | ||
| } | ||
|
|
||
| ul { | ||
| margin-top: -5%; | ||
| margin-left: 70%; | ||
| padding-bottom: 13px; | ||
| } | ||
|
|
||
| ul li { | ||
| display: inline-flex; | ||
| font-size: 1.7rem; | ||
| margin-left: 5%; | ||
| } | ||
|
|
||
| h1 { | ||
| padding-bottom: -21%; | ||
| margin-right: 64%; | ||
| } | ||
|
|
||
| .about-me-photo { | ||
| width: 18%; | ||
| margin-left: 42%; | ||
| } | ||
|
|
||
| .container { | ||
| width: 940px; | ||
| } | ||
|
|
||
| #about-me { | ||
| clip-path: polygon(0 0, 100% 0, 100% 94%, 0% 100%); | ||
| } | ||
|
|
||
| #skills { | ||
| clip-path: polygon(0 6%, 100% 0, 100% 100%, 0% 100%); | ||
| } | ||
|
|
||
| #about-me, | ||
| #skills { | ||
| margin-left: 25px; | ||
| margin-right: 25px; | ||
| } | ||
| } | ||
| .col { | ||
| width: 50%; | ||
| } | ||
|
|
||
| .social-media { | ||
| padding: 0 25%; | ||
| } | ||
|
|
||
| .social-media img { | ||
| width: 50%; | ||
| } | ||
|
|
||
| ul { | ||
| margin-left: 70%; | ||
| margin-top: -6%; | ||
| padding-bottom: 13px; | ||
| } | ||
|
|
||
| ul li { | ||
| display: inline-flex; | ||
| font-size: 1.7rem; | ||
| margin-left: 5%; | ||
| } | ||
|
|
||
| h1 { | ||
| margin-right: 64%; | ||
| padding-bottom: -21%; | ||
| } | ||
|
|
||
| .about-me-photo { | ||
| margin-left: 37.5%; | ||
| width: 28%; | ||
| } | ||
|
|
||
| #about-me { | ||
| clip-path: polygon(0 0, 100% 0, 100% 97.3%, 0% 100%); | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .col { | ||
| width: 25%; | ||
| } | ||
|
|
||
| .social-media { | ||
| padding: 0 25%; | ||
| } | ||
|
|
||
| .social-media img { | ||
| width: 50%; | ||
| } | ||
|
|
||
| ul { | ||
| margin-left: 70%; | ||
| margin-top: -5%; | ||
| padding-bottom: 13px; | ||
| } | ||
|
|
||
| ul li { | ||
| display: inline-flex; | ||
| font-size: 1.7rem; | ||
| margin-left: 5%; | ||
| } | ||
|
|
||
| h1 { | ||
| margin-right: 64%; | ||
| padding-bottom: -21%; | ||
| } | ||
|
|
||
| .about-me-photo { | ||
| margin-left: 42%; | ||
| width: 18%; | ||
| } | ||
|
|
||
| .container { | ||
| width: 940px; | ||
| } | ||
|
|
||
| #about-me { | ||
| clip-path: polygon(0 0, 100% 0, 100% 94%, 0% 100%); | ||
| } | ||
|
|
||
| #skills { | ||
| clip-path: polygon(0 6%, 100% 0, 100% 100%, 0% 100%); | ||
| } | ||
|
|
||
| #about-me, | ||
| #skills { | ||
| margin-left: 25px; | ||
| margin-right: 25px; | ||
| } | ||
| } |