API tools faq
paste
jrothra

JLR New Design CSS

jrothra
Apr 2nd, 2017
405
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.86 KB | None | 0 0
raw download clone embed print report
  1. /* Custom site by John L. Rothra */
  2.  
  3. /******************************
  4.     UNIVERSAL STYLES
  5. ******************************/
  6.  
  7. html {
  8.    font-size: 18px;
  9.    font-family: 'Montserrat', Arial, sans-serif;
  10. }
  11.  
  12. body {
  13.    width: 100%;
  14.    margin: 0;  
  15.    line-height: 1.5;
  16. }
  17.  
  18. p {
  19.    margin: 0;
  20.    padding-bottom: 1.25em;
  21. }
  22.  
  23. h1,
  24. h2,
  25. h3,
  26. h4,
  27. h5,
  28. h6 {
  29.    font-family: 'Libre Baskerville', Times New Roman, serif;
  30. }
  31.  
  32. h1 {
  33.    font-size: 3rem;
  34. }
  35.  
  36. h2 {
  37.    font-size: 2rem;
  38. }
  39.  
  40. h3 {
  41.    font-size: 1.75rem;
  42. }
  43.  
  44. h4 {
  45.    font-size: 1.5rem;
  46.    margin: 0;
  47.    padding: 15px 0;
  48. }
  49.  
  50. h5 {
  51.    font-size: 1.25rem;
  52. }
  53.  
  54. h6 {
  55.    font-size: 1rem;
  56. }
  57.  
  58. a,
  59. a:visited {
  60.    text-decoration: none;
  61.    color: #2e3e9e;
  62. }
  63.  
  64. a:hover,
  65. a:focus,
  66. a:active {
  67.    text-decoration: underline;
  68. }
  69.  
  70. /******************************
  71.     HEADER
  72. ******************************/
  73.  
  74. #nav-bar {
  75.    display: flex;
  76.    flex-flow: row nowrap;
  77.    justify-content: space-between;
  78.    padding: 0.7rem;
  79. }
  80.  
  81. #hamburger,
  82. #logo {
  83.    height: 32px;
  84. }
  85.  
  86.  
  87.  
  88. /******************************
  89.     MAIN BODY
  90. ******************************/
  91.  
  92. /* ----- FRONT PAGE CONTENT ----- */
  93.  
  94. .fp-body-text {
  95.    font-weight: 200;
  96.    font-size: 1.5rem;
  97.    font-size: 3.4vh;
  98.    line-height: 1.5;
  99.    margin: 0 auto;
  100.    max-width: 800px;
  101. }
  102.  
  103. /* The code for the hover effect is not my own,
  104. but obtained from http://ianlunn.github.io/Hover/.
  105. I did, however, modify the code slightly to fit
  106. my site's color needs. This code us used under the
  107. free personal license. */
  108. a.white-button {
  109.    -webkit-transform: perspective(1px) translateZ(0);
  110.    transform: perspective(1px) translateZ(0);
  111.    box-shadow: 0 0 1px transparent;
  112.    position: relative;
  113.    -webkit-transition-property: color;
  114.    transition-property: color;
  115.    -webkit-transition-duration: 0.3s;
  116.    transition-duration: 0.3s;
  117.    color: #fff;
  118.    line-height: 4rem;
  119.    padding: 0.5rem 2rem;
  120.    border: 1px solid #fff;
  121.    font-family: 'Libre Baskerville', Times New Roman, serif;
  122.    text-decoration: none;
  123.    border-radius: 5px;
  124. }
  125.  
  126. a.white-button:before {
  127.    content: "";
  128.    position: absolute;
  129.    z-index: -1;
  130.    top: 0;
  131.    left: 0;
  132.    right: 0;
  133.    bottom: 0;
  134.    background: #fff;
  135.    -webkit-transform: scaleX(0);
  136.    transform: scaleX(0);
  137.    -webkit-transform-origin: 0 50%;
  138.    transform-origin: 0 50%;
  139.    -webkit-transition-property: transform;
  140.    transition-property: transform;
  141.    -webkit-transition-duration: 0.2s;
  142.    transition-duration: 0.2s;
  143.    -webkit-transition-timing-function: ease-out;
  144.    transition-timing-function: ease-out;
  145.    color: #2E3E9E;
  146. }
  147.  
  148. a.white-button:hover,
  149. a.white-button:focus,
  150. a.white-button:active {
  151.    color: #2E3E9E;
  152. }
  153.  
  154. a.white-button:hover:before,
  155. a.white-button:focus:before,
  156. a.white-button:active:before {
  157.    -webkit-transform: scaleX(1);
  158.    transform: scaleX(1);
  159. /* END HOVER EFFECT CODE */
  160. }
  161.  
  162. a.blue-button {
  163.    -webkit-transform: perspective(1px) translateZ(0);
  164.    transform: perspective(1px) translateZ(0);
  165.    box-shadow: 0 0 1px transparent;
  166.    position: relative;
  167.    -webkit-transition-property: color;
  168.    transition-property: color;
  169.    -webkit-transition-duration: 0.3s;
  170.    transition-duration: 0.3s;
  171.    color: #2e3e9e;
  172.    line-height: 4rem;
  173.    padding: 0.5rem 2rem;
  174.    border: 1px solid #2e3e9e;
  175.    font-family: 'Libre Baskerville', Times New Roman, serif;
  176.    text-decoration: none;
  177.    border-radius: 5px;
  178. }
  179.  
  180. a.blue-button:before {
  181.    content: "";
  182.    position: absolute;
  183.    z-index: -1;
  184.    top: 0;
  185.    left: 0;
  186.    right: 0;
  187.    bottom: 0;
  188.    background: #2e3e9e;
  189.    -webkit-transform: scaleX(0);
  190.    transform: scaleX(0);
  191.    -webkit-transform-origin: 0 50%;
  192.    transform-origin: 0 50%;
  193.    -webkit-transition-property: transform;
  194.    transition-property: transform;
  195.    -webkit-transition-duration: 0.2s;
  196.    transition-duration: 0.2s;
  197.    -webkit-transition-timing-function: ease-out;
  198.    transition-timing-function: ease-out;
  199.    color: #fff;
  200. }
  201.  
  202. a.blue-button:hover,
  203. a.blue-button:focus,
  204. a.blue-button:active {
  205.    color: #fff;
  206. }
  207.  
  208. a.blue-button:hover:before,
  209. a.blue-button:focus:before,
  210. a.blue-button:active:before {
  211.    -webkit-transform: scaleX(1);
  212.    transform: scaleX(1);
  213. /* END HOVER EFFECT CODE */
  214. }
  215.  
  216. /* -- Hero Area -- */
  217.  
  218. #hero-area { /* I used IDs vs classes because these areas will only be used once */
  219.    display: flex;
  220.    flex-flow: column nowrap;
  221.    justify-content: space-between;
  222.    background-image: url(../img/John-BW-ColorShirt-1920x1080.jpg);
  223.    background-position: center;
  224.    background-size: cover;
  225.    width: 100%;
  226.    height: 100vh;
  227. }
  228.  
  229. #down-arrow {
  230.    height: 64px;
  231. }
  232.  
  233. #hero-name-area {
  234.    margin: 0 auto;
  235.    color: #fff;
  236.    font-family: 'Libre Baskerville', Times New Roman, serif;
  237. }
  238.  
  239. #hero-name-area h1 {
  240.    padding-top: 5.5em;
  241.    padding-left: 1rem;
  242.    padding-right; 1rem;
  243.    font-size: 5rem;
  244.    font-size: 7vh;
  245. }
  246.  
  247. #hero-blurb-area {
  248.    padding-left: 1rem;
  249.    padding-right: 1rem;
  250.    color: #fff;
  251.    text-align: center;
  252.    font-weight: 200;
  253.    font-size: 4vh;
  254. }
  255.  
  256. #hero-arrow-area {
  257.    align-self: center;
  258. }
  259.  
  260. /* -- My Story Area -- */
  261.  
  262. #fp-my-story {
  263.    background-image: linear-gradient(
  264.       to right,
  265.       #263382, #5461af
  266.    );
  267.    /*   margin: 0;*/
  268.    padding: 0.1em 4rem 0 4rem;
  269.    text-align: center;
  270.    color: #fff;
  271. }
  272.  
  273. /* -- Latest Blog Area -- */
  274.  
  275. #fp-blogroll {
  276.    background-color: #fff;
  277.    padding: 0.5rem 0.7rem 0.7rem 0.7rem;
  278.    font-weight: 400;
  279.    text-align: center;
  280. }
  281.  
  282. .blogroll-flexbox {
  283.    display: flex;
  284.    flex-flow: row wrap;
  285.    justify-content: center;
  286. }
  287.  
  288. .blog-post {
  289.    min-width: 300px;
  290.    width: 30%;
  291.    padding: 0;
  292.    margin: 20px;
  293. }
  294.  
  295. .entry-thumb img {
  296.    border-radius: 15px;
  297.    width: 90%;
  298. }
  299.  
  300. /* -- YouTube Featured Vid Area -- */
  301.  
  302. #fp-youtube {
  303.     /*  Parallax start */
  304.    background-image: url('../img/SkyGeometric.jpg');
  305.    background-attachment: fixed;
  306.    background-position: center;
  307.    background-repeat: no-repeat;
  308.    background-size: cover;
  309.    /*   Parallax end */
  310.    padding: 0.5rem 0.7rem 0.7rem 0.7rem;
  311.    color: #fff;
  312.    margin: 0 auto;
  313.    text-align: center;
  314. }
  315.  
  316. #youtube-flexbox {
  317.    display: flex;
  318.    flex-flow: row wrap;
  319.    padding: 0 2.5%;
  320. }
  321.  
  322. .video-container {
  323.    position: relative;
  324.    padding-bottom: 50%;
  325.    padding-top: 0;
  326.    height: 0;
  327.    overflow: hidden;
  328.    width: 90%;
  329.    margin: 2.5% auto;
  330.    background-color: #ddd;
  331. }
  332.  
  333. .video-container iframe,
  334. .video-container object,
  335. .video-container embed {
  336.    position: absolute;
  337.    top: 0;
  338.    left: 0;
  339.    width: 100%;
  340.    height: 100%;
  341. }
  342.  
  343. @media all and (min-width: 665px) {
  344.    .video-container {
  345.       width: 480px;
  346.       padding-bottom: 270px;
  347.       justify-content: space-between;
  348.    }
  349. }
  350.  
  351.  
  352. /* -- Multiple IDs on Front Page --*/
  353.  
  354. #fp-my-story h2,
  355. #fp-blogroll h2,
  356. #fp-youtube h2 {
  357.    font-family: 'Libre Baskerville', Times New Roman, serif;
  358.    font-size: 5rem;
  359.    font-size: 5vh;
  360. }
  361.  
  362.  
  363.  
  364. /******************************
  365.     FOOTER
  366. ******************************/
  367.  
  368. footer {
  369.    background-color: #0c0c16;
  370.    padding: 0.5rem 0.7rem 0.7rem 0.7rem;
  371.    color: #fff;
  372. }
  373.  
  374. #footer-container {
  375.    font-size: 0.9rem;
  376.    text-align: center;
  377.    font-weight: 200;
  378. }
  379.  
  380. #footer-container h3 {
  381.    font-family: 'Libre Baskerville', Times New Roman, serif;
  382.    font-size: 1.2rem;
  383. }
  384.  
  385. #footer-flexbox {
  386.    display: flex;
  387.    flex-flow: row wrap;
  388.    justify-content: space-around;
  389.    align-items: flex-start;
  390. }
  391.  
  392. .footer-area {
  393.    flex: 0 1 auto;
  394.    padding: 5px 20px;
  395. }
  396.  
  397. .footer-content {
  398.    display: flex;
  399.    flex-flow: row wrap;
  400.    justify-content: space-around;
  401. }
  402.  
  403. .footer-content-contact {
  404.    padding: 0 15px 15px 15px;
  405. }
  406.  
  407. .footer-social-icons {
  408.    padding: 0 10px 20px 10px;
  409.    height: 2.5rem;
  410. }
  411.  
  412. .footer-contact-icons {
  413.    height: 1.5em;
  414.    vertical-align: middle;
  415.    padding-right: 10px;
  416. }
  417.  
  418. #copyright {
  419.    margin-top: 2rem;
  420.    font-weight: 200;
  421.    font-size: 0.7rem;
  422. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!