API tools faq
paste
vonko1988

SliceAndDice_PSD_to_HTML_homework_task2.css

vonko1988
Apr 15th, 2014
146
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.66 KB | None | 0 0
raw download clone embed print report
  1. /*The usual resets*/
  2. html,
  3. body,
  4. div,
  5. header,
  6. img,
  7. nav,
  8. ul,
  9. li,
  10. a,
  11. p,
  12. time,
  13. aside,
  14. section,
  15. h1,
  16. h2,
  17. footer,
  18. span {
  19.   margin: 0;
  20.   padding: 0;
  21. }
  22. header,
  23. nav,
  24. section,
  25. footer,
  26. article,
  27. aside {
  28.   display: block;
  29. }
  30. div,
  31. header,
  32. nav,
  33. section,
  34. footer,
  35. article,
  36. aside {
  37.   -moz-box-sizing: border-box;
  38.   -webkit-box-sizing: border-box;
  39.   box-sizing: border-box;
  40. }
  41. a {
  42.   display: inline-block;
  43.   text-decoration: none;
  44.   color: black;
  45. }
  46. html,
  47. body,
  48. div#wrapper,
  49. div#background {
  50.   min-height: 100%;
  51. }
  52. ul {
  53.   list-style-type: none;
  54. }
  55. /*Some variables*/
  56. /*some mixins*/
  57. .clearfix {
  58.   zoom: 1;
  59. }
  60. .clearfix:after {
  61.   display: block;
  62.   content: "";
  63.   height: 0;
  64.   clear: both;
  65. }
  66. body div#wrapper {
  67.   width: 100%;
  68.   overflow-x: hidden;
  69.   background: #ffffff;
  70.   /* Old browsers */
  71.   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  72.   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  73.   background: -moz-linear-gradient(top, #ffffff 0%, #dfd3b5 100%);
  74.   /* FF3.6+ */
  75.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfd3b5));
  76.   /* Chrome,Safari4+ */
  77.   background: -webkit-linear-gradient(top, #ffffff 0%, #dfd3b5 100%);
  78.   /* Chrome10+,Safari5.1+ */
  79.   background: -o-linear-gradient(top, #ffffff 0%, #dfd3b5 100%);
  80.   /* Opera 11.10+ */
  81.   background: -ms-linear-gradient(top, #ffffff 0%, #dfd3b5 100%);
  82.   /* IE10+ */
  83.   background: linear-gradient(to bottom, #ffffff 0%, #dfd3b5 100%);
  84.   /* W3C */
  85.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@from_color', endColorstr='@to_color', GradientType=0);
  86.   /* IE6-8 */
  87. }
  88. body div#wrapper div#background {
  89.   position: relative;
  90.   width: 90%;
  91.   margin: 0 auto;
  92.   background: #c1ab75;
  93.   /* Old browsers */
  94.   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  95.   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  96.   background: -moz-linear-gradient(top, #c1ab75 0%, #9a8a65 100%);
  97.   /* FF3.6+ */
  98.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1ab75), color-stop(100%, #9a8a65));
  99.   /* Chrome,Safari4+ */
  100.   background: -webkit-linear-gradient(top, #c1ab75 0%, #9a8a65 100%);
  101.   /* Chrome10+,Safari5.1+ */
  102.   background: -o-linear-gradient(top, #c1ab75 0%, #9a8a65 100%);
  103.   /* Opera 11.10+ */
  104.   background: -ms-linear-gradient(top, #c1ab75 0%, #9a8a65 100%);
  105.   /* IE10+ */
  106.   background: linear-gradient(to bottom, #c1ab75 0%, #9a8a65 100%);
  107.   /* W3C */
  108.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@from_color', endColorstr='@to_color', GradientType=0);
  109.   /* IE6-8 */
  110.   padding: 1%;
  111.   border-radius: 15px;
  112.   zoom: 1;
  113.   /*The header including the two logo images*/
  114.   /*This div contains everything but the header. I put it,
  115.                 so to make white the spaces at the bottom that are not with
  116.                 white background.*/
  117.   /*The footer of the page*/
  118. }
  119. body div#wrapper div#background:after {
  120.   display: block;
  121.   content: "";
  122.   height: 0;
  123.   clear: both;
  124. }
  125. body div#wrapper div#background header {
  126.   padding-bottom: 18%;
  127.   border-top-right-radius: 10px;
  128.   /*The left logo pic*/
  129.   /*The right logo pic*/
  130. }
  131. body div#wrapper div#background header img#logo {
  132.   position: absolute;
  133.   width: 29%;
  134.   top: 0;
  135. }
  136. body div#wrapper div#background header img#header_pic {
  137.   position: absolute;
  138.   z-index: 4;
  139.   right: 1.1%;
  140.   top: 0.3%;
  141.   float: right;
  142.   width: 66.2%;
  143. }
  144. body div#wrapper div#background div#inner_wrapper {
  145.   position: relative;
  146.   height: 80%;
  147.   z-index: 1;
  148.   padding-bottom: 0.1%;
  149.   background: #ffffff;
  150.   border-top-left-radius: 15px;
  151.   zoom: 1;
  152.   /*The right section containing the articles*/
  153.   /*This container groups the navigation and sidebar
  154.                   at the left. I put it because they will be positioned
  155.                    absolutely so better they are positioned together.*/
  156. }
  157. body div#wrapper div#background div#inner_wrapper:after {
  158.   display: block;
  159.   content: "";
  160.   height: 0;
  161.   clear: both;
  162. }
  163. body div#wrapper div#background div#inner_wrapper section {
  164.   margin-top: 2.8%;
  165.   position: relative;
  166.   background: #ffffff;
  167.   padding: 16% 0 5% 0;
  168.   width: 63%;
  169.   float: right;
  170.   /*The main heading in the section*/
  171.   /*Article needs to be clearfixed because the image is floated*/
  172. }
  173. body div#wrapper div#background div#inner_wrapper section h1 {
  174.   color: #bc8801;
  175.   font-size: 1.8em;
  176.   font-weight: normal;
  177.   padding-bottom: 1.6%;
  178.   border-bottom: 3px solid #cfbd93;
  179. }
  180. body div#wrapper div#background div#inner_wrapper section article {
  181.   padding: 2% 0 3% 0;
  182.   zoom: 1;
  183.   /*The heading below h1*/
  184.   /*The paragraphs in the first article are grouped in a div
  185.                             so the can be correctli positioned around the floated picture*/
  186.   /*The image holders will create the borders around
  187.                           the pictures*/
  188.   /*The images and paragraphs in the second article
  189.                           have different styles*/
  190. }
  191. body div#wrapper div#background div#inner_wrapper section article:after {
  192.   display: block;
  193.   content: "";
  194.   height: 0;
  195.   clear: both;
  196. }
  197. body div#wrapper div#background div#inner_wrapper section article h2 {
  198.   color: #d0b671;
  199.   font-size: 1.5em;
  200.   font-weight: normal;
  201.   padding-bottom: 1.6%;
  202.   border-bottom: 3px solid #cfbd93;
  203.   margin-bottom: 2.6%;
  204. }
  205. body div#wrapper div#background div#inner_wrapper section article:first-of-type div#paragraphs {
  206.   display: inline-block;
  207.   width: 55%;
  208.   text-align: justify;
  209.   margin-left: 3%;
  210. }
  211. body div#wrapper div#background div#inner_wrapper section article a {
  212.   display: block;
  213.   clear: left;
  214.   color: #5a491a;
  215.   font-size: 1.1em;
  216.   font-weight: bold;
  217.   text-decoration: underline;
  218.   text-align: right;
  219.   margin-right: 6%;
  220. }
  221. body div#wrapper div#background div#inner_wrapper section article div.image_holder1 {
  222.   display: inline-block;
  223.   float: left;
  224.   width: 35%;
  225.   background: #e7e0ce;
  226.   padding: 4px;
  227.   border-radius: 10px;
  228.   border: 1px solid #c6b387;
  229. }
  230. body div#wrapper div#background div#inner_wrapper section article div.image_holder1 div.image_holder2 {
  231.   display: block;
  232.   background: #ffffff;
  233.   padding: 4px;
  234.   border-radius: 10px 10px 0 0;
  235. }
  236. body div#wrapper div#background div#inner_wrapper section article div.image_holder1 div.image_holder2 img {
  237.   display: block;
  238.   border-radius: 5px 5px 0 0;
  239.   width: 100%;
  240. }
  241. body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2) {
  242.   zoom: 1;
  243. }
  244. body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2):after {
  245.   display: block;
  246.   content: "";
  247.   height: 0;
  248.   clear: both;
  249. }
  250. body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2) div.image_holder1 {
  251.   width: 20%;
  252.   margin-right: 3%;
  253. }
  254. body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2) div.image_holder1 span {
  255.   display: block;
  256.   width: 100%;
  257.   text-align: center;
  258.   color: #958149;
  259.   background: white;
  260.   border-top: 2px solid #b8b19d;
  261.   border-radius: 0 0 10px 10px;
  262. }
  263. body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2) p {
  264.   display: inline-block;
  265.   width: 22%;
  266.   font-size: 0.9em;
  267.   margin-right: 3%;
  268. }
  269. body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2) p,
  270. body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2) div.image_holder1 {
  271.   float: left;
  272. }
  273. body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2) a {
  274.   clear: both;
  275. }
  276. body div#wrapper div#background div#inner_wrapper div#left_container {
  277.   position: absolute;
  278.   margin-top: -2.3%;
  279.   float: left;
  280.   width: 32.3%;
  281.   zoom: 1;
  282.   /*The sidebar below the navigation*/
  283. }
  284. body div#wrapper div#background div#inner_wrapper div#left_container:after {
  285.   display: block;
  286.   content: "";
  287.   height: 0;
  288.   clear: both;
  289. }
  290. body div#wrapper div#background div#inner_wrapper div#left_container nav {
  291.   width: 100%;
  292.   border-radius: 15px 15px 0 0;
  293.   background: #cdc4aa;
  294.   padding: 8% 0 6% 0;
  295. }
  296. body div#wrapper div#background div#inner_wrapper div#left_container nav ul li {
  297.   position: relative;
  298.   background: #2a2a2a;
  299.   border-bottom: 1px solid #717171;
  300.   padding: 0.8% 0 0 3.68%;
  301.   background-position: 80% center;
  302.   background-repeat: no-repeat;
  303.   /*This span will create the borders left of
  304.                                     the links. That's why we positioned the li
  305.                                     relatevely*/
  306. }
  307. body div#wrapper div#background div#inner_wrapper div#left_container nav ul li:last-of-type {
  308.   border-bottom: none;
  309. }
  310. body div#wrapper div#background div#inner_wrapper div#left_container nav ul li span.border_span {
  311.   position: absolute;
  312.   bottom: 0;
  313.   width: 5%;
  314.   height: 50%;
  315.   border-right: 1px solid #717171;
  316. }
  317. body div#wrapper div#background div#inner_wrapper div#left_container nav ul li a {
  318.   width: 80%;
  319.   font-size: 1.2em;
  320.   color: white;
  321.   padding: 0.6% 0 0.6% 8%;
  322.   /*The right arrow right from the links'text*/
  323. }
  324. body div#wrapper div#background div#inner_wrapper div#left_container nav ul li a:hover {
  325.   color: #e5c077;
  326. }
  327. body div#wrapper div#background div#inner_wrapper div#left_container nav ul li a span {
  328.   float: right;
  329.   font-size: 0.5em;
  330.   margin-top: 4px;
  331. }
  332. body div#wrapper div#background div#inner_wrapper div#left_container aside {
  333.   width: 100%;
  334.   background: #fdfbf2;
  335.   color: #6f5f36;
  336.   /*The picture at the bottom of the sidebar*/
  337. }
  338. body div#wrapper div#background div#inner_wrapper div#left_container aside ul {
  339.   padding: 7% 5% 4% 9%;
  340. }
  341. body div#wrapper div#background div#inner_wrapper div#left_container aside ul li {
  342.   padding: 6% 8% 8% 0;
  343.   font-size: 1.1em;
  344.   text-align: justify;
  345.   /*Weput this tag to stress semantic meaning
  346.                                   on the date*/
  347. }
  348. body div#wrapper div#background div#inner_wrapper div#left_container aside ul li:first-of-type {
  349.   border-bottom: 1px dotted #ceccc7;
  350. }
  351. body div#wrapper div#background div#inner_wrapper div#left_container aside ul li time {
  352.   display: inline-block;
  353.   font-weight: bold;
  354.   margin-bottom: 4.5%;
  355. }
  356. body div#wrapper div#background div#inner_wrapper div#left_container aside ul li a {
  357.   color: #6f5f36;
  358.   font-weight: bold;
  359.   text-decoration: underline;
  360.   float: right;
  361. }
  362. body div#wrapper div#background div#inner_wrapper div#left_container aside img {
  363.   width: 100%;
  364. }
  365. body div#wrapper div#background footer {
  366.   position: relative;
  367.   background: #dfd4b5;
  368.   color: #7d6b44;
  369.   clear: both;
  370.   width: 100%;
  371.   text-align: center;
  372.   height: 40px;
  373.   line-height: 40px;
  374. }
  375. /*Some media queries for responsive design*/
  376. @media only screen and (max-width: 960px) {
  377.   body div#wrapper div#background {
  378.     width: 100%;
  379.   }
  380. }
  381. @media only screen and (max-width: 540px) {
  382.   body div#wrapper div#background header {
  383.     padding: 0;
  384.   }
  385.   body div#wrapper div#background header img#header_pic,
  386.   body div#wrapper div#background header img#logo {
  387.     display: none;
  388.   }
  389.   body div#wrapper div#background div#inner_wrapper section {
  390.     float: none;
  391.     width: 100%;
  392.     padding-top: 56%;
  393.   }
  394.   body div#wrapper div#background div#inner_wrapper div#left_container {
  395.     top: 0;
  396.     width: 100%;
  397.     margin-bottom: 5%;
  398.   }
  399.   body div#wrapper div#background div#inner_wrapper div#left_container aside {
  400.     display: none;
  401.   }
  402. }
  403. @media only screen and (max-width: 440px) {
  404.   body div#wrapper div#background div#inner_wrapper section {
  405.     padding-top: 63%;
  406.   }
  407. }
  408. @media only screen and (max-width: 380px) {
  409.   body div#wrapper div#background div#inner_wrapper section {
  410.     padding-top: 66%;
  411.   }
  412. }
  413. @media only screen and (max-width: 350px) {
  414.   body div#wrapper div#background div#inner_wrapper section {
  415.     padding-top: 70%;
  416.   }
  417. }
  418. @media only screen and (max-width: 320px) {
  419.   body div#wrapper div#background {
  420.     padding: 0;
  421.   }
  422.   body div#wrapper div#background div#inner_wrapper section {
  423.     padding: 0;
  424.     padding-top: 90%;
  425.   }
  426.   body div#wrapper div#background div#inner_wrapper section article {
  427.     padding-right: 0;
  428.   }
  429.   body div#wrapper div#background div#inner_wrapper section article div.image_holder1 {
  430.     display: none;
  431.   }
  432.   body div#wrapper div#background div#inner_wrapper section article:first-of-type div#paragraphs {
  433.     width: 90%;
  434.   }
  435.   body div#wrapper div#background div#inner_wrapper section article:nth-of-type(2) p {
  436.     width: 46%;
  437.   }
  438.   body div#wrapper div#background div#inner_wrapper section a {
  439.     display: inline;
  440.     margin-right: 0;
  441.   }
  442. }
  443. /*# sourceMappingURL=task2.css.map */
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!