Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Portfolio_Website/css/style.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
498 lines (464 sloc)
10.9 KB
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
.navbar, .navbar-light { | |
border-radius: 0; | |
border: none; | |
margin-bottom: 0; | |
min-height: 80px; | |
background-color: white; | |
margin-left: 0% !important; | |
margin-right: 0% !important; | |
} | |
.navbar, .navbar-light, .container{ | |
margin-bottom: 20px; | |
margin-right: 0% !important; | |
margin-left: 0% !important; | |
padding: 0% !important; | |
width: 100% !important; | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-pack: end; | |
justify-content: flex-end; | |
} | |
.nav li { | |
display: inline; | |
color: black | |
} | |
.navbar-light .navbar-nav > li > a { | |
color: black; | |
font-size: 25px; | |
padding: 40px 25px 33px 25px; | |
font-family: 'Raleway', sans-serif; | |
font-weight: 300; | |
font-style: normal; | |
} | |
.navbar-light .navbar-nav li a:hover { | |
height: 100%; | |
background-color:#DEBDCE; | |
-webkit-transition: ease-in .75s; | |
transition: ease-in .75s; | |
color: white; | |
} | |
.navbar-toggle .icon-bar { | |
background-color: black; | |
} | |
.nav .navbar-nav .text-right{ | |
align-content: flex-end; | |
} | |
.navbar-brand>img { | |
display: block; | |
max-height: 100px; | |
padding-bottom: 20px; | |
} | |
.navbar-light .navbar-nav{ | |
margin-top: 20px; | |
} | |
.body{ | |
background-image: url("../img/morepink.jpg"); | |
background-position: center top; | |
} | |
.section1{ | |
margin-right: 2em; | |
margin-left: 1.5em; | |
margin-top: 150px; | |
padding-top: 50px; | |
} | |
.h1, h1{ | |
font-size: 59px !important; | |
font-family: 'Abril Fatface', cursive !important; | |
} | |
#meiraImg{ | |
max-height: 500px; | |
max-width: 300px; | |
margin-left: .5em; | |
} | |
.meira{ | |
max-height: 500px; | |
max-width: 300px; | |
border-radius: 100%; | |
} | |
@media (min-width: 1000px){ | |
.section1{ | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-pack: center; | |
justify-content: center; | |
align-content: center; | |
} | |
} | |
@media(max-width: 680px){ | |
#myCarousel{ | |
display: none; | |
} | |
.h1, h1{ | |
font-size: 27px !important; | |
} | |
p{ | |
font-size: 20px !important; | |
} | |
} | |
@media(max-width: 770px){ | |
.navbar-brand{ | |
display: none; | |
} | |
.meira{ | |
max-height: 200px; | |
max-width: 200px; | |
} | |
.card-img-top{ | |
max-height: 300px !important; | |
max-width: 300px !important; | |
} | |
} | |
p{ | |
font-size: 30px; | |
font-family: 'Raleway', sans-serif; | |
font-weight: 300; | |
} | |
a.download{ | |
font-size: 25px; | |
color: black; | |
font-family: 'Raleway', sans-serif; | |
font-weight: 300; | |
border: black 2px solid; | |
padding: 10px; | |
} | |
a.download:hover{ | |
text-decoration: none; | |
color: white; | |
border: #1d9c9f 2px solid; | |
background-color: #1d9c9f; | |
-webkit-transition: ease-in .75s; | |
transition: ease-in .75s; | |
} | |
a.glyphicon { | |
color: black !important; | |
font-size: 36px; | |
border: black 2px solid; | |
padding: 10px; | |
margin-left: 10px; | |
} | |
a.glyphicon:hover{ | |
color: white !important; | |
text-decoration: none; | |
border: #1d9c9f 2px solid; | |
background-color: #1d9c9f; | |
-webkit-transition: ease-in .75s; | |
transition: ease-in .75s; | |
} | |
a.fab { | |
color: black !important; | |
font-size: 36px; | |
border: black 2px solid; | |
padding: 10px; | |
margin-left: 10px; | |
} | |
a.fab:hover{ | |
color: white !important; | |
text-decoration: none; | |
border: #1d9c9f 2px solid; | |
background-color: #1d9c9f; | |
-webkit-transition: ease-in .75s; | |
transition: ease-in .75s; | |
} | |
.box2{ | |
display: -webkit-box; | |
display: flex; | |
align-content: center; | |
-webkit-box-pack: start; | |
justify-content: flex-start; | |
margin-bottom: 15px; | |
} | |
.typewriter h1 { | |
color: black; | |
overflow: hidden; /* Ensures the content is not revealed until the animation */ | |
border-right: .15em solid orange; /* The typwriter cursor */ | |
white-space: nowrap; /* Keeps the content on a single line */ | |
margin: 0 auto; /* Gives that scrolling effect as the typing happens */ | |
letter-spacing: .15em; /* Adjust as needed */ | |
-webkit-animation: | |
typing 3.5s steps(30, end), | |
blink-caret .5s step-end infinite; | |
animation: | |
typing 3.5s steps(30, end), | |
blink-caret .5s step-end infinite; | |
} | |
.typewriter .type { | |
color: black; | |
overflow: hidden; /* Ensures the content is not revealed until the animation */ | |
white-space: nowrap; /* Keeps the content on a single line */ | |
margin: 0 auto; /* Gives that scrolling effect as the typing happens */ | |
letter-spacing: .15em; /* Adjust as needed */ | |
-webkit-animation: | |
typing 3.5s steps(30, end), | |
blink-caret .5s step-end infinite; | |
animation: | |
typing 3.5s steps(30, end), | |
blink-caret .5s step-end infinite; | |
} | |
/* The typing effect */ | |
@-webkit-keyframes typing { | |
from { width: 0 } | |
to { width: 100% } | |
} | |
@keyframes typing { | |
from { width: 0 } | |
to { width: 100% } | |
} | |
/* The typewriter cursor effect */ | |
@-webkit-keyframes blink-caret { | |
from, to { border-color: transparent } | |
50% { border-color:#1d9c9f } | |
} | |
@keyframes blink-caret { | |
from, to { border-color: transparent } | |
50% { border-color:#1d9c9f} | |
} | |
.bounce { | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-pack: center; | |
justify-content: center; | |
align-content: center; | |
animation: bounce .5s infinite; | |
-webkit-animation: bounce 2s infinite; | |
padding-bottom: 9em; | |
padding-top: 3em; | |
} | |
@-webkit-keyframes bounce { | |
0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0);} | |
50% {-webkit-transform: translateY(-5px);transform: translateY(-5px);} | |
} | |
@keyframes bounce { | |
0%, 100%, 0% {-webkit-transform: translateY(0);transform: translateY(0);} | |
50% {-webkit-transform: translateY(-5px);transform: translateY(-15px);} | |
} | |
a.fas{ | |
font-size: 5em; | |
color: black; | |
text-decoration: none; | |
} | |
a.fas:hover{ | |
color: #1d9c9f; | |
-webkit-transition: ease-in .75s; | |
transition: ease-in .75s; | |
text-decoration: none; | |
} | |
a.fas:visited{ | |
color: black; | |
-webkit-transition: ease-in .75s; | |
transition: ease-in .75s; | |
text-decoration: none; | |
} | |
.section2{ | |
padding: 45px; | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
flex-direction: column; | |
margin-bottom: 50px; | |
} | |
@media(min-width: 800px){ | |
.section2{ | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-pack: center; | |
justify-content: center; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
flex-direction: row; | |
} | |
} | |
@media(min-width: 1300px){ | |
.card-group{ | |
display: -webkit-box; | |
display: flex; | |
justify-content: space-around; | |
} | |
} | |
@media(max-width:1460px){ | |
.card{ | |
-webkit-box-align: center !important; | |
align-items: center !important; | |
} | |
} | |
.innerBox{ | |
padding-right: 25px; | |
} | |
.wrapper{ | |
max-width: 700px; | |
max-height: 700px; | |
} | |
.animation{ | |
padding: 45px; | |
} | |
.responsive-video { | |
position: relative; | |
padding-bottom: 56.25%; | |
padding-top: 60px; overflow: hidden; | |
} | |
.responsive-video iframe, | |
.responsive-video object, | |
.responsive-video embed { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
img.img{ | |
max-width: 500px; | |
max-height: 300px; | |
padding-bottom: 20px; | |
vertical-align: middle; | |
opacity: 0.5; | |
-webkit-filter: blur(3px); | |
filter: blur(3px); | |
vertical-align: middle; | |
} | |
img.img:hover { | |
color: white; | |
opacity: 1; | |
-webkit-filter: blur(0); | |
filter: blur(0); | |
} | |
figure { | |
position: relative; | |
display: inline-block !important; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
} | |
.page3{ | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
flex-flow: row wrap !important; | |
} | |
@media(max-width: 900px){ | |
.page3{ | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
flex-flow: row wrap; | |
-webkit-box-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
align-items: center; | |
} | |
} | |
@media(min-width:900px){ | |
.page3{ | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
flex-flow: row wrap; | |
} | |
} | |
.portfolio1{ | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
flex-flow: row wrap; | |
padding-top: 40px; | |
padding-bottom: 40px; | |
} | |
img.img { | |
border-radius: 50%; | |
vertical-align: middle; | |
width:300px; | |
height:300px; | |
padding:30px; | |
opacity: 0.9; | |
-webkit-filter: blur(3px); | |
filter: blur(3px); | |
border-radius: 50%; | |
vertical-align: middle; | |
} | |
img.img:hover { | |
-webkit-filter: blur(0px); | |
filter: blur(0px); | |
-webkit-transition: ease-in .5s; | |
transition: ease-in .5s; | |
} | |
figcaption { | |
border-radius: 10px; | |
position: absolute; | |
top: 50%; | |
width: 100%; | |
margin-top: -1em; | |
line-height: 2em; | |
margin-bottom:10px; | |
color: white; | |
text-align: center; | |
font-family: 'Raleway',sans-serif; | |
font-size: 25px; | |
text-shadow: 2px 2px 5px hotpink; | |
} | |
img.img:hover + figcaption { | |
display: none; | |
} | |
.page3{ | |
background-image: url(../img/pinkmarble.jpg); | |
background-position: center top; | |
-webkit-box-pack: center; | |
justify-content: center; | |
} | |
.foot{ | |
display: -webkit-box; | |
display: flex; | |
justify-content: space-around; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
flex-direction: column; | |
margin-top: 2%; | |
margin-bottom: 2%; | |
} | |
@media(min-width:900px){ | |
.foot { | |
display: -webkit-box; | |
display: flex; | |
justify-content: space-around; | |
-webkit-box-align: center; | |
align-items: center; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
flex-direction: row; | |
} | |
} | |
.info{ | |
padding: 20px; | |
} | |
.buttonorg{ | |
display: -webkit-box; | |
display: flex; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
flex-direction: row; | |
-webkit-box-align: center; | |
align-items: center; | |
align-items: center; | |
} | |
.footer{ | |
font-family: 'Raleway',sans-serif; | |
font-size: 20px; | |
} | |
.portfolio2{ | |
padding: 30px; | |
font-family: 'Raleway',sans-serif; | |
font-size: 20px; | |
} |