Advertisement
Guest User

Untitled

a guest
Oct 28th, 2016
59
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.07 KB | None | 0 0
  1.  
  2. * { box-sizing: border-box;
  3. margin: 0;
  4. padding :0;
  5.  
  6. }
  7.  
  8. body {
  9. background: url("../img/pic3.jpg");
  10. padding-top: 60px;
  11. color: #34495e;
  12. }
  13.  
  14. /*navigation bar*/
  15. .nav {
  16. position: fixed;
  17. width: 100%;
  18. top:0;
  19. height:50px;
  20. left:0;
  21. background-color: #000;
  22. }
  23.  
  24. /*home button*/
  25. #home {
  26. position: relative;
  27. top:1px;
  28. height:40px;
  29. left:40px;
  30. padding:1px 20px ;
  31. text-decoration: none;
  32.  
  33. }
  34.  
  35.  
  36. .nav ul {
  37. position: relative;
  38. float:right;
  39. padding-right:40px;
  40. top:3px;
  41. }
  42.  
  43. .nav ul li {
  44. display: inline-block;
  45. padding: 6px 10px ;
  46. }
  47.  
  48. .nav ul li a {
  49. color:#8bacce;
  50. text-transform: uppercase;
  51. letter-spacing: 0.05em;
  52. text-decoration: none;
  53. }
  54.  
  55. .nav li a {
  56. padding:10px ;
  57. }
  58.  
  59. .nav a:hover , #home:hover {
  60. text-decoration: none;
  61. transition: color 600ms;
  62. -webkit-transition: color 600ms;
  63. background-color:#9bb3db;
  64. font-weight: bold;
  65. color: #6f2874;
  66. }
  67.  
  68. /*container styles*/
  69. .container {
  70. margin:0 auto;
  71. width :80%;
  72. }
  73.  
  74. /*main heading*/
  75. #header h1 {
  76. margin: 40px;
  77. text-align: center;
  78. font-size: 30px;
  79. }
  80.  
  81. .image {
  82. display:inline;
  83. float:left;
  84. width:33%;
  85. }
  86.  
  87. .pic1 {
  88. width:100%;
  89. }
  90.  
  91.  
  92. /*Introduction & skills section*/
  93. .column {
  94. display:inline;
  95. float:left;
  96. padding: 0 30px;
  97. margin-left:30px;
  98. margin-bottom: 30px;
  99. width:30%;
  100. }
  101.  
  102. .column h3 ,
  103. .column h2 {
  104. margin-top:20px;
  105. margin-bottom: 5px;
  106. text-align: center;
  107. }
  108.  
  109. .column p {
  110. margin-top: 5px;
  111. }
  112.  
  113. /*More about me paragraph and the pic */
  114. .main-text {
  115. position: relative;
  116. clear: both;
  117. padding:30px 20px;
  118. max-width:50%;
  119. }
  120.  
  121. #pic4 {
  122. position: absolute;
  123. left:700px;
  124. top: 80px;
  125. width:400px;
  126. z-index:-1;
  127. }
  128.  
  129. /*where can I get some paragraph and the pic*/
  130.  
  131. #description {
  132. position: relative;
  133. top:10px;
  134. left: 500px;
  135. max-width:50%;
  136. margin-bottom: 100px;
  137. }
  138.  
  139. #pic5 {
  140. position: absolute;
  141. right:700px;
  142. width:300px;
  143. top:0;
  144. }
  145.  
  146. /*Typography*/
  147.  
  148. #home {
  149. font-family: 'Shadows Into Light', cursive;
  150. font-weight: bold;
  151. font-size:30px;
  152. color: #3182bd;
  153. }
  154.  
  155.  
  156. p ,
  157. li {
  158. font-family: 'Shadows Into Light', cursive;
  159. font-size:20px;
  160. color: #2e406f;
  161. }
  162.  
  163. h1 ,
  164. h2 ,
  165. h3 {
  166. font-size: 28px;
  167. font-family: Papyrus,fantasy;
  168. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement