Advanced Search

css code example

/ Published in: CSS
Save to your folder(s)
CSS3 code from portfolio site

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**********************************
  2. GENERAL
  3. ***********************************/
  4.  
  5. body {
  6.   font-family: 'Open Sans', sans-serif;
  7. }
  8.  
  9. #wrapper {
  10.   max-width: 940px;
  11.   margin: 0 auto;
  12.   padding: 0 5%;
  13. }
  14.  
  15. a {
  16.   text-decoration: none;
  17. }
  18.  
  19. img {
  20.   max-width: 100%;
  21. }
  22.  
  23. h3 {
  24.   margin: 0 0 1em 0;
  25. }
  26.  
  27.  
  28.  
  29. /**********************************
  30. HEADING
  31. ***********************************/
  32.  
  33. header {
  34.   float: left;
  35.   margin: 0 0 30px 0;
  36.   padding: 5px 0 0 0;
  37.   width: 100%;
  38. }
  39.  
  40. #logo {
  41.   text-align: center;
  42.   margin: 0;
  43. }
  44.  
  45. h1 {
  46.   font-family: 'Changa One', sans-serif;
  47.   margin: 15px 0;
  48.   font-size: 1.75em;
  49.   font-weight: normal;
  50.   line-height: 0.8em;
  51. }
  52.  
  53. h2 {
  54.   font-size: 0.75em;
  55.   margin: -5px 0 0;
  56.   font-weight: normal;
  57. }
  58.  
  59.  
  60.  
  61. /**********************************
  62. NAVIGATION
  63. ***********************************/
  64.  
  65. nav {
  66.   text-align: center;
  67.   padding: 10px 0;
  68.   margin: 20px 0 0;
  69. }
  70.  
  71. nav ul {
  72.   list-style: none;
  73.   margin: 0 10px;
  74.   padding: 0;
  75. }
  76.  
  77. nav li {
  78.   display: inline-block;
  79. }
  80.  
  81. nav a {
  82.   font-weight: 800;
  83.   padding: 15px 10px;
  84. }
  85.  
  86.  
  87.  
  88. /**********************************
  89. FOOTER
  90. ***********************************/
  91.  
  92. footer {
  93.   font-size: 0.75em;
  94.   text-align: center;
  95.   clear: both;
  96.   padding-top: 50px;
  97.   color: #ccc;
  98. }
  99.  
  100. .social-icon {
  101.   width: 20px;
  102.   height: 20px;
  103.   margin: 0 5px;
  104. }
  105.  
  106.  
  107.  
  108. /**********************************
  109. PAGE: PORTFOLIO
  110. ***********************************/
  111.  
  112. #gallery {
  113.   margin: 0;
  114.   padding: 0;
  115.   list-style: none;
  116. }
  117.  
  118. #gallery li {
  119.   float: left;
  120.   width: 45%;
  121.   margin: 2.5%;
  122.   background-color: #f5f5f5;
  123.   color: #bdc3c7;
  124. }
  125.  
  126. #gallery li a p {
  127.   margin: 0;
  128.   padding: 5%;
  129.   font-size: 0.75em;
  130.   color: #000
  131. }
  132.  
  133. /**********************************
  134. PAGE: ABOUT
  135. ***********************************/
  136.  
  137. .profile-photo {
  138.   display: block;
  139.   max-width: 150px;
  140.   margin: 0 auto 30px;
  141.   border-radius: 100%;
  142. }
  143.  
  144.  
  145.  
  146. /**********************************
  147. PAGE: CONTACT
  148. ***********************************/
  149.  
  150. .contact-info {
  151.   list-style: none;
  152.   padding: 0;
  153.   margin: 0;
  154.   font-size: 0.9em;
  155. }
  156.  
  157. .contact-info li.phone a {
  158.   background-image: url('../img/phone.png');
  159. }
  160.  
  161. .contact-info li.mail a {
  162.   background-image: url('../img/mail.png');
  163. }
  164.  
  165. .contact-info li.twitter a {
  166.   background-image: url('../img/twitter.png');
  167. }
  168.  
  169.  
  170. .contact-info a {
  171.   display: block;
  172.   min-height: 20px;
  173.   background-repeat: no-repeat;
  174.   background-size: 20px 20px;
  175.   padding: 0 0 0 30px;
  176.   margin: 0 0 10px;
  177. }
  178.  
  179.  
  180.  
  181. /**********************************
  182. COLORS
  183. ***********************************/
  184.  
  185. /* site body */
  186. body {
  187.   background-color: #fff;
  188.   color: #999;
  189. }
  190.  
  191. /* green header */
  192. header {
  193.   background: #0099CC;
  194.   border-color: #00FFFF;
  195. }
  196.  
  197. /* nav background on mobile */
  198. nav {
  199.   background: #0000CC;
  200. }
  201.  
  202. /* logo text */
  203. h1, h2 {
  204.   color: #fff;
  205. }
  206.  
  207. /* links */
  208. a {
  209.   color: #B0B0B0;
  210. }
  211.  
  212. /* nav link */
  213. nav a, nav a:visited {
  214.   color: #fff;
  215. }
  216.  
  217. /* selected nav link */
  218. nav a.selected, nav a:hover {
  219.   color: #B0B0B0;
  220. }

URL: http://www.jschneider88.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.