API tools faq
paste
Advertisement
willdoami

teste4

willdoami
Apr 23rd, 2014
41
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><!--
  2. Welcome to My Wall Builder! Create a little corner of the internet, which you can personalise to be totally you.. and pick up a few web making tips along the way.
  3. --><!--
  4. Let's get started.
  5.  
  6. 1) READ THROUGH THE COMMENTS. This is a comment. Everything inside of this tag for HTML or '/*' for CSS, is not processed as code, but instead is just text comments about the code. For this project, the comments will give you instructions, hints and guides to completing the project, so skim down through the comments to get an understanding of what you are being asked to do.
  7.  
  8. 2) GET ORIENTED IN THE CODE. HTML is made up of tags that look like this <p> </p>. The tags tell you something about the information contained between them. Each tag has a beginning defined as <p> and an end defined as </p>
  9. --><html><head>
  10. <!-- Webmaker Metas, don't worry about these lines! -->
  11. <meta charset="UTF-8">
  12. <meta content="beautifulportfolio" name="webmaker:tags">
  13.  
  14. <!--
  15. The text within the <title> </title> tags is what is displayed in the web browser title bar or tab. Think about what you want to name this page and then change the text below.
  16. -->
  17.  
  18. <title>My Beautiful Wall</title>
  19.  
  20. <!--
  21. We use CSS styles to define how things look. There are three ways to include styles:
  22. External - Styles put in an external Cascading Style Sheet (CSS) like this..
  23. -->
  24. <link href="http://fonts.googleapis.com/css?family=Croissant+One" rel="stylesheet" type="text/css">
  25. <!--
  26. Internal - Styles between 'style' tags as you can see below, this is where we'll be doing most of the customisation for this page.
  27. Inline - we'll come to that later.
  28. Note: Internal and external stylesheets are usually kept between the 'head' tags (as it is here). For this page however, we have separated out the more advanced CSS and put it at the bottom of the page.
  29. -->
  30. <style>
  31.  
  32. /* First we will target the 'html' tag, this is the top level tag, which everything else on the page sits within. */
  33. html {
  34.  
  35. /* Choose a background image for your wall. */
  36. background-image:url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/wallpaper_01.jpg);
  37.  
  38. /* Next set a text colour. Colours are typically defined using hexadecimal codes, for more information see https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Color */
  39. color:#d60e7d;
  40.  
  41. /* Choose a font.. If you are naming a specific font, it needs to either be commonly found on peoples computer, or included with the webpage. We have included the Croissant One font for you via http://www.google.com/fonts. A string of fonts are often listed to give fall back options. For more on fonts see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
  42. font-family:'Croissant One', "Helvetica Neue", Helvetica, Arial, sans-serif;
  43.  
  44. /* Choose a font size. Note: All these values can be overridden for other elements on the page, but setting them here gives you a default for the whole page. */
  45. font-size:24px;
  46. }
  47.  
  48. p {
  49. /* Choose a background colour for paragraphs. Make sure it is in contrast to the text colour earlier. */
  50. background-color:#e9e7ea;
  51. }
  52.  
  53. /* This is a 'class'. Classes are defined in CSS with a leading "." */
  54. .window {
  55.  
  56. /* Enter the URL of an image for elements with the window class. Background images allow you to place images behind elements on the page, they can also be more versatile than images in <img> tags. */
  57. background-image: url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/unicorns.jpg);
  58. }
  59.  
  60. /* The below will apply to any element with both the 'frame' and 'myframe' classes. Using two classes here separates the general styles for the frame from the ones you add here. You could add multiple frames to the page, replacing the 'myframe' class with something unique for each one. */
  61. .frame.myframe {
  62. background-image: url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/couple.jpg);
  63. }
  64. </style>
  65. </head>
  66.  
  67. <body>
  68.  
  69. <!-- We will divide the page into columns with the column class (defined in the advanced CSS). -->
  70. <div class="column">
  71.  
  72. <!-- Here we will add the window, with the styles we defined above. -->
  73. <div class="window">
  74. </div>
  75.  
  76. </div>
  77.  
  78. <!-- Ok, next column. -->
  79. <div class="column">
  80.  
  81. <!-- Maybe you'd like to introduce yourself. -->
  82. <p>Hi, Iā€™m Jane. Welcome to my wall!</p>
  83.  
  84. <!-- Let's look at foreground images. Put a URL of an image in the 'src' attribute of the <img> tag. Unlike background images, <img> tags are considered content (as opposed to decoration), for this reason, in case the image cannot be displayed, you should include alternate text for the image in the 'alt' attribute. -->
  85. <div class="poster">
  86. <img alt="Roller Derby Poster" src="http://stuff.webmaker.org.s3.amazonaws.com/sam2/rollerderby.jpg">
  87. </div>
  88. </div>
  89.  
  90. <!-- New column. -->
  91. <div class="column">
  92.  
  93. <!-- Here we'll add the frame with styled earlier. Note how multiple classes are applied, separated by a space. -->
  94. <div class="frame myframe">
  95. </div>
  96.  
  97. <br>
  98.  
  99. <!-- Remember the third method of including styles? Let's have a go at inline styles. Here you can see that the 'style' attribute is used to apply the 'background-image' property directly to these list items (li). Go ahead and change the image URLs.-->
  100. <ul class="instamatic">
  101. <li style=""></li>
  102. <li style=""></li>
  103. <li style=""></li>
  104. </ul>
  105. <p>Check out my Instagrams!</p>
  106. </div>
  107.  
  108. <!-- New column. -->
  109. <div class="column">
  110.  
  111. <!-- Embedding a video from Youtube is easy, let's put one inside this television styled <div>. -->
  112. <div class="tv">
  113.  
  114. <!-- Edit the video ID below (the part after embed/) -->
  115. <iframe allowfullscreen="" src="http://www.youtube.com/embed/COU5T-Wafa4"></iframe>
  116. </div>
  117. <p>So cute!</p>
  118. </div>
  119.  
  120.  
  121.  
  122. <style>
  123. html {
  124. height: 100%;
  125. background-position: left center;
  126. }
  127. body {
  128. padding:0 30px;
  129. margin:0;
  130. display:table;
  131. height:100%;
  132. }
  133. .column {
  134. display:table-cell;
  135. vertical-align:middle;
  136. padding:0 40px;
  137. }
  138. .column > br {
  139. margin:10px;
  140. }
  141. .align-right {
  142. float:right;
  143. }
  144. p {
  145. margin:0 0 10px 0;
  146. padding:1px 5px;
  147. display:inline-block;
  148. }
  149. .window {
  150. width:425px;
  151. height:710px;
  152. position:relative;
  153. margin:82px 72px;
  154. background-color:#FFF;
  155. background-size:cover;
  156. }
  157. .window:after {
  158. content: '';
  159. position: absolute;
  160. top: -110px;
  161. right: -110px;
  162. bottom: -110px;
  163. left: -110px;
  164. background-image: url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/images/window.png);
  165. }
  166. div:first-of-type .window {
  167. margin-left:-200px;
  168. }
  169. .poster {
  170. position:relative;
  171. }
  172. .poster img {
  173. display:block;
  174. max-height:785px;
  175. }
  176. .poster:before {
  177. content: '';
  178. position: absolute;
  179. top: -4px;
  180. right: -4px;
  181. bottom: -15px;
  182. left: -4px;
  183. background-image: url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/images/poster-shadow.png);
  184. background-size:100% 100%;
  185. z-index:-1;
  186. }
  187. .poster:after {
  188. content: '';
  189. position: absolute;
  190. top: 0px;
  191. right: 0px;
  192. bottom: 0px;
  193. left: 0px;
  194. background-image: url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/images/poster.png);
  195. background-size:100% 100%;
  196. }
  197. .frame {
  198. width:300px;
  199. height:229px;
  200. position:relative;
  201. background-size:cover;
  202. background-position:center center;
  203. margin: 78px 104px;
  204. }
  205. .frame:after {
  206. content: '';
  207. position: absolute;
  208. top: -75px;
  209. right: -75px;
  210. bottom: -75px;
  211. left: -75px;
  212. background-image: url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/images/frame.png);
  213. }
  214. .instamatic {
  215. margin:0;
  216. padding:0;
  217. }
  218. .instamatic li {
  219. display:block;
  220. width:164px;
  221. height:168px;
  222. float:left;
  223. background-size:cover;
  224. background-position:center center;
  225. position:relative;
  226. margin:5px 5px 60px 0;
  227. -webkit-box-shadow: inset 0px 0px 2px 7px rgba(0, 0, 0, 0.5);
  228. box-shadow: inset 0px 0px 2px 7px rgba(0, 0, 0, 0.5);
  229. -webkit-transform: rotate(2deg);
  230. -moz-transform: rotate(2deg);
  231. -ms-transform: rotate(2deg);
  232. -o-transform: rotate(2deg);
  233. }
  234. .instamatic li:nth-child(even) {
  235. -webkit-transform: rotate(-2deg);
  236. -moz-transform: rotate(-2deg);
  237. -ms-transform: rotate(-2deg);
  238. -o-transform: rotate(-2deg);
  239. }
  240. .instamatic li:before {
  241. position: absolute;
  242. content: "";
  243. background-image: url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/images/instamatic.png);
  244. bottom: -50px;
  245. left: -9px;
  246. right: -9px;
  247. top: -9px;
  248. }
  249. .tv {
  250. width: 847px;
  251. height: 477px;
  252. background-image: url(http://stuff.webmaker.org.s3.amazonaws.com/sam2/images/tv.png);
  253. background-repeat: no-repeat;
  254. padding:36px 39px 83px 39px;
  255. margin: 0 -20px;
  256. }
  257. .tv iframe {
  258. width:847px;
  259. height:477px;
  260. }
  261. </style>
  262.  
  263.  
  264.  
  265. </body><!-- Advanced CSS --></html><!--
  266. Credits:
  267. This was made by Mint Canary.
  268. Images:
  269. http://cyndernspyro.deviantart.com/art/My-Little-Pony-252920620
  270. http://www.flickr.com/photos/pocheco/4666115363/
  271. http://www.flickr.com/photos/41185766@N03/4664624124/
  272. http://www.flickr.com/photos/84598277@N08/8845851616/
  273. http://www.flickr.com/photos/picsoflife/6123011987/
  274. http://www.flickr.com/photos/kimi-/5080211794/
  275. -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!