Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**** CSS rules for styling portfolio site ****/
- /*
- body
- */
- body {
- background-color: #AFB8C6;
- padding-top: 50px;
- position: relative;
- }
- /*
- Typography
- */
- body p {
- font-family: "EB Garamond", "Hoefler Text", "Times New Roman", serif;
- text-align: center;
- }
- h1, h2, h3, p {
- color: #000;
- }
- h1, h2, h3 {
- font-family: "Quicksand", Verdana, Arial, sans-serif;
- }
- #home .header, #about .header, #work .header,
- #contact .header, #faq .header {
- text-align: center;
- }
- /*
- container-fluid
- */
- .navbar .container-fluid {
- margin: 0 0;
- }
- .container-fluid {
- margin-left: -1.1em;
- margin-right: -1.1em;
- }
- /*
- Navigation Bar
- */
- .anchor {
- padding-top: 60px;
- }
- .navbar {
- background-color: #000;
- opacity: .65;
- z-index: 1;
- }
- .navbar ul {
- margin-right: .005em;
- }
- .navbar ul li a {
- text-transform: uppercase;
- letter-spacing: 0.05em;
- padding-left: 0.715em;
- padding-right: 0.715em;
- }
- .navbar .nav>li>a, .projectName a {
- font-size: 14px;
- }
- .navbar-brand {
- text-decoration: none;
- }
- .navbar-inverse .navbar-nav>li>a, .projectName .navbar-brand {
- color: #2460D8;
- }
- .navbar-inverse .navbar-nav>li>a:hover .projectName a:hover {
- color: #000;
- }
- .navbar-inverse>ul>li>a:visited {
- color: #FFFFF0;
- }
- /*
- Hamburger
- */
- .navbar-inverse .navbar-toggle {
- border-color: #2460D8;
- }
- .navbar-inverse .navbar-toggle .icon-bar {
- background-color: #2460D8;
- }
- /*
- Carousel
- */
- .carousel-caption h3 {
- color: #F4AA90;
- opacity: .85;
- }
- .carousel-caption p {
- color: #000;
- opacity: .6;
- font-family: "Artifika", serif;
- font-style: oblique;
- text-align: center;
- text-shadow: .13em 0 0 #F4AA90, -.13em 0 0 #F4AA90, 0 .13em 0 #F4AA90, 0 -.13em 0 #F4AA90, .06em .06em #F4AA90, -.06em -.06em 0 #F4AA90, .06em -.06em 0 #F4AA90, -.06em .06em 0 #F4AA90;
- }
- /*
- Home Section
- */
- #home .header {
- width: 97%;
- }
- #home .row h2, #home .row .projectGoals p {
- text-align: center;
- }
- #home .btn {
- background-color: #2460D8;
- border-radius: 25px;
- }
- /*
- About Section
- */
- #about .image, .intro, .skills {
- width: 33.3%;
- }
- #about .image img {
- width: 100%;
- }
- #about h2, p, .skills h2, .main-text {
- text-align: center;
- }
- #about .skills h2 {
- margin-left: -.5em;
- }
- .skills {
- background-color: #2460D8;
- }
- #skill-list {
- margin-left: 8em;
- }
- /*
- Work Section
- */
- #work {
- margin-left: 2.95em;
- }
- #work .header {
- width: 95.4%
- }
- #work #work2 {
- margin-top: 0;
- margin-bottom: 50px;
- }
- /*
- Contact Section
- */
- #contact {
- background: url(../img/atlantic-ocean-1.jpg);
- background-attachment: fixed;
- background-size: cover;
- margin: 10px 5px;
- padding: 10px;
- height: 900px;
- }
- #contact .header {
- margin-top: 5.5em;
- }
- #contact .header h1, #contact p, #faq .header h1 {
- color: #FFF5EE;
- }
- #contact .header p, .contact h2, .contact p {
- text-align: center;
- }
- #contact .header p {
- margin-left: 1.88em;
- }
- #contact .contact p {
- margin-left: 2.5em;
- }
- #contact .contact span:hover {
- text-shadow: .5em .5em #FFFFF0;
- }
- /*
- Form on Contact Section
- */
- .form-control {
- width: 80%;
- }
- .line {
- width: 45%;
- display: inline;
- float: left;
- }
- form .btn {
- margin-top: 10px;
- background-color: #FFF5EE;
- border: 2px groove #000;
- border-radius: 15px;
- }
- /*
- FAQ Section
- */
- #faq {
- background-image: url(../img/pb-sunset-1.jpg);
- background-attachment: fixed;
- background-size: cover;
- margin: 10px 5px;
- height: 550px;
- }
- .modal-button {
- float: right;
- padding: 15px;
- }
- .learn-more {
- text-align: left;
- float: left;
- margin-left: 15px;
- }
- #modalembed {
- height: 500px;
- width: 100%;
- padding: 10px;
- }
- .panel-group {
- margin-top: .75em;
- }
- .panel-title a {
- font-family: Quicksand, Verdana, Arial, sans-serif;
- font-weight: 700;
- }
- .panel-body {
- font-family: "EB Garamond", "Hoefler Text", "Times New Roman", serif;
- }
- /*
- Responsive
- */
- .col-md-4 img {
- width: 75%;
- height: 75%;
- margin: .31em;
- }
- .embed-responsive {
- width: 75%;
- margin: 50px auto;
- }
- .embed-responsive-16by9 {
- width: 75%;
- margin: 50px auto;
- }
- /*
- Video
- */
- .videos {
- margin-bottom: 25px;
- }
- .videos h1 {
- margin-left: 75px;
- }
- .videos a:hover {
- color: #FFFF00;
- text-decoration: none;
- }
- .videos a:active {
- font-weight: 750;
- color: #0000FF;
- }
- .videos a:visited {
- color: #00FF00;
- }
- /*
- Footer Section
- */
- footer {
- width: 100%;
- display: inline-block;
- clear: both;
- margin-left: 5px;
- }
- footer .fb-share-button {
- display: inline-block;
- margin-left: 20px;
- }
- /*
- End CSS
- */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement