-
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; | ||
} | ||
} |