SHARE
TWEET

Untitled

a guest Jan 24th, 2020 106 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* http://meyerweb.com/eric/tools/css/reset/
  2.    v2.0 | 20110126
  3.    License: none (public domain)
  4. */
  5.  
  6. html, body, div, span, applet, object, iframe,
  7. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  8. a, abbr, acronym, address, big, cite, code,
  9. del, dfn, em, img, ins, kbd, q, s, samp,
  10. small, strike, strong, sub, sup, tt, var,
  11. b, u, i, center,
  12. dl, dt, dd, ol, ul, li,
  13. fieldset, form, label, legend,
  14. table, caption, tbody, tfoot, thead, tr, th, td,
  15. article, aside, canvas, details, embed,
  16. figure, figcaption, footer, header, hgroup,
  17. menu, nav, output, ruby, section, summary,
  18. time, mark, audio, video {
  19.     margin: 0;
  20.     padding: 0;
  21.     border: 0;
  22.     font-size: 100%;
  23.     font: inherit;
  24.     vertical-align: baseline;
  25. }
  26. /* HTML5 display-role reset for older browsers */
  27. article, aside, details, figcaption, figure,
  28. footer, header, hgroup, menu, nav, section {
  29.     display: block;
  30. }
  31. body {
  32.     line-height: 1;
  33. }
  34. ol, ul {
  35.     list-style: none;
  36. }
  37. blockquote, q {
  38.     quotes: none;
  39. }
  40. blockquote:before, blockquote:after,
  41. q:before, q:after {
  42.     content: '';
  43.     content: none;
  44. }
  45. table {
  46.     border-collapse: collapse;
  47.     border-spacing: 0;
  48. }
  49.  
  50. /** This is my CSS **/
  51. /* The defaulf setting is for mobile viewport. min-width: 500px */
  52.  
  53. * {
  54.     margin: 0;
  55.     padding: 0;
  56.     box-sizing: border-box;
  57. }
  58.  
  59. body {
  60.     background-color: #E4D0FF;
  61.     margin: auto;
  62.     width: 100%;
  63. }
  64.  
  65. /* This part of the code adds the new Font to the new page */
  66. nav#nav,
  67. section#home,
  68. section#about,
  69. section#contact,
  70. footer {
  71.     font-family: 'Proxima Nova', Georgia, sans-serif;
  72.     font-size: 1rem;
  73.     color: #000000;
  74. }
  75.  
  76. /** The styles bellow belong to the Nav menu **/
  77. nav#nav {
  78.     background-color: #BBB3E8;
  79.     margin: auto;
  80.     width: 100%;
  81.     padding: 0px;
  82.     /* The other style file has a border in this part of the layout. I added this line of code to erase it from my css */
  83.     border: none;
  84.     /* Flexbox will allow the menu to change from "row" to "column" when the browser reaches the first breakpoint */
  85.     display: flex;
  86.     flex-direction: column;
  87.     flex-wrap: nowrap;
  88.     justify-content: space-around;
  89. }
  90.  
  91. a.nav-link {
  92.     display: flex;
  93.     justify-content: center;
  94.     padding: 10px;
  95.     margin: 0;
  96. }
  97.  
  98. a.nav-link:link,
  99. a.nav-link:visited {
  100.     background-color: #C4CBFF;
  101. }
  102.  
  103. a.nav-link:hover,
  104. a.nav-link:active {
  105.     background-color: #D8B3E8;
  106. }
  107.  
  108. /** The styles bellow belong to the Content **/
  109. #main {
  110.     margin: auto;
  111.     width: 100%;
  112. }
  113.  
  114. section#home {
  115.     width: 100%;
  116.     height: auto;
  117.     background-color: #FEC4FF;
  118.     padding: 10% 5%;
  119. }
  120.  
  121. section#about {
  122.     width: 100%;
  123.     height: auto;
  124.     background-color: #C4CBFF;
  125. }
  126.  
  127. section.about .about-image {
  128.     width: 20%;
  129.     height: auto;
  130.     margin: .5rem;
  131. }
  132.  
  133. section#contact {
  134.     width: 100%;
  135.     height: auto;
  136.     background-color: #D8B3E8;
  137. }
  138.  
  139. /** The styles bellow belong to the Text **/
  140. section h1,
  141. section h2 {
  142.     margin-bottom: 20px;
  143. }
  144.  
  145. section p {
  146.     font-size: .9rem;
  147.     line-height: 1.2rem;
  148.     margin: auto 20px;
  149. }
  150.  
  151. /** The styles bellow belong to the Form **/
  152. form.contact-form {
  153.     width: auto;
  154.     background-color: #D8B3E8;
  155. }
  156.  
  157. .contact-form{
  158.     width: 100%;
  159.     /* Flexbox will resize the form when the browser reaches the breakpoint */
  160.     display: flex;
  161.     flex-direction: row;
  162.     flex-wrap: wrap;
  163.     align-items: center;
  164.     justify-content: flex-end;
  165. }
  166.  
  167. .contact-form label {
  168.     width: 100%;
  169. }
  170.  
  171. .contact-form-section{
  172.     flex: 1 0 61%;
  173.     margin: .2rem;
  174. }
  175.  
  176. .contact-form-section:nth-child(1),
  177. .contact-form-section:nth-child(2){
  178.     flex-basis: 60%;
  179.     /* This line of code resizes the input for Name and E-mail on the form */
  180.     flex-wrap: nowrap;
  181. }
  182.  
  183. button {
  184.     flex-basis: 60%;
  185.     width: 50px;
  186.     height: 60px;
  187. }
  188.  
  189. button:link,
  190. button:visited {
  191.     background-color: rgb(107, 107, 107);
  192. }
  193.  
  194. button:hover,
  195. button:active {
  196.     text-decoration: underline;
  197.     font-weight: bold;
  198. }
  199.  
  200. /** The styles bellow belong to the Footer **/
  201. footer {
  202.     background-color: #BBB3E8;
  203.     text-align: center;
  204.     font-size: .8rem;
  205.     padding: .75em;
  206. }
  207.  
  208. /* I used the nth-child in this case to add the styles only on the first line of text, the firs p tag*/
  209. footer p:nth-child(1) {
  210.     font-weight: 600;
  211.     font-style: italic;
  212. }
  213.  
  214. /** Breakpoints for different viewports **/
  215. /* First Breakpoint */
  216. @media screen and (min-width: 768px) {
  217.     /** Styles for the Nav menu **/
  218.     nav#nav{
  219.         /* This will change the menu from "row" to "column" when it reaches the breakpoint */
  220.         display: flex;
  221.         flex-wrap: nowrap;
  222.         justify-content: space-around;
  223.         flex-direction: row;
  224.         position: fixed;
  225.         z-index: 100;
  226.     }
  227.    
  228.     a.nav-link {
  229.         display: flex;
  230.         justify-content: space-around;
  231.         align-items: center;
  232.         width: 100%;
  233.     }
  234.  
  235.     /** Styles for the Text in the second section ("About Me") **/
  236.     /* section#about {
  237.         display: flex;
  238.         flex-direction: row;
  239.     }
  240.  
  241.    
  242.     section.p:nth-child(1),
  243.     section.p:nth-child(2) {
  244.         flex-basis: 50%;
  245.     } */
  246.    
  247.     /* section#about{
  248.         padding-left: 100px;
  249.         padding-right: 250px;
  250.     }
  251.    
  252.     */
  253.     section#about{
  254.         padding-left: 30px;
  255.         padding-right: 30px;
  256.     }
  257.     section#about .section-title{
  258.         display: inline-block;
  259.     }
  260.     section#about .about-image {
  261.         transform: translateY(-30%);
  262.  
  263.     }
  264.     /** Styles for the Contact Form **/
  265.     .contact-form-section:nth-child(1),
  266.     .contact-form-section:nth-child(2){
  267.         flex-basis: 40%;
  268.         /* This line of code resizes the input for Name and E-mail on the form */
  269.         flex-wrap: nowrap;
  270.     }
  271.  
  272.     button{
  273.         flex-basis: 40%;
  274.         flex-wrap: nowrap;
  275.         order: 1;
  276.         width: 40px;
  277.         height: 50px;
  278.     }
  279. }
RAW Paste Data
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
Top