css code example


/ Published in: CSS
Save to your folder(s)

CSS3 code from portfolio site


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.