API tools faq
paste
Advertisement
Guest User

html/css

a guest
Oct 9th, 2015
239
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.19 KB | None | 0 0
raw download clone embed print report
  1. <!-- HOME.HTML Start--!>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Home</title>
  8. <link href="stylesheet.css" rel="stylesheet" type="text/css" />
  9. <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
  10. <script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
  11. <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
  12. <script type="text/javascript">
  13. function MM_effectSlide(targetElement, duration, from, to, toggle)
  14. {
  15. Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
  16. }
  17. </script>
  18. </head>
  19.  
  20. <body>
  21. <script src="test.js" type="text/javascript"></script>
  22. <title>MyAnimeList</title>
  23. <div id="logoBar"><h1 style="padding:10px;">MyAnimeList</h1>
  24. </div>
  25. <!-- Closing tag to logoBar div -->
  26.  
  27.  
  28. <div id="menu">
  29. <ul id="MenuBar1" class="MenuBarHorizontal">
  30. <li><a href="#">Home</a> </li>
  31. <li><a href="#">Anime</a></li>
  32. <li><a href="#">Manga</a> </li>
  33. <li><a href="#">About</a></li>
  34. </ul>
  35. </div>
  36. <div id="welcomeBar"><h2 style="font-size:20px; padding-left:13px; padding-top: 6px"><b>Welcome to MyAnimeList.net!</b></h2>
  37.  
  38. </div> <!-- closes welcome bar div -->
  39.  
  40.  
  41. <div id="content">
  42.  
  43. <div id="leftPanel">
  44. <div id ="leftPanelContainer">
  45.  
  46. <div class ="normalHeader">
  47. <h3 style="margin-bottom:5px;">Watch Free Anime Streaming</h3>
  48.  
  49. <div class ="bannerStreamingBlock"> <a href="Profiles/Profile-Clannad.html"><img src="Images/Clannad.jpg" width="320" height="250"/></a>
  50.  
  51.  
  52. <a href="Profiles/Profile-Clannad.html" target="_blank"> <h3>Clannad</h3></a>
  53.  
  54.  
  55. </div>
  56.  
  57.  
  58. <div class ="bannerStreamingBlock"> <a href="Profiles/Profile-Psycho Pass.html"><img src="Images/psychopass 2.jpg" width="270" height="250" /></a>
  59. <a href="Profiles/Profile-Psycho Pass.html" target="_blank"><h3>Psycho Pass</h3></a>
  60. </div>
  61.  
  62.  
  63. <div class ="bannerStreamingBlock"> <a href="Profiles/Profile-Steins;Gate.html"><img src="Images/Steins;gate.jpg" width="250" height="250" /></a>
  64. <a href="Profiles/Profile-Steins;Gate.html" target="_blank"><h3>Steins;Gate</h3></a>
  65. </div>
  66.  
  67. <div class ="bannerStreamingBlock">
  68. <a href="Profiles/Profile-Tokyo Ghoul.html"><img src="Images/tg.jpg" width="250" height="250" /></a>
  69. <a href="Profiles/Profile-Tokyo Ghoul.html" target="_blank"><h3>Tokyo Ghoul</h3></a>
  70.  
  71. </div>
  72.  
  73. <div class ="bannerStreamingBlock">
  74. <a href="Profiles/Profile-SAO.html"><img src="Images/swordartonline.jpg" width="320" height="250" /></a>
  75. <a href="Profiles/Profile-SAO.html" target="_blank"><h3>Sword Art Online</h3></a>
  76. </div>
  77.  
  78. <div class ="bannerStreamingBlock">
  79. <a href="Profiles/Profile-Shokugeki.html"><img src="Images/shokugeki2.jpg" width="320" height="250" /></a>
  80. <a href="Profiles/Profile-Shokugeki.html" target="_blank"><h3>Shokugeki No Soma</h3></a>
  81.  
  82. </div>
  83.  
  84. <div class ="bannerStreamingBlock">
  85. <a href="Profiles/Profile-DeathNote.html"><img src="Images/fma.jpg" width="320" height="250" /></a>
  86. <a href="Profiles/Profile-DeathNote.html" target="_blank"><h3>Death Note</h3></a>
  87.  
  88. </div>
  89.  
  90. <div class ="bannerStreamingBlock">
  91. <a href="Profiles/Profile-PersonaMovie.html"><img src="Images/persona.jpg" width="250px" height="250px" /></a>
  92. <a href="Profiles/Profile-PersonaMovie.html" target="_blank"><h3>Persona 3: Movie(s)</h3></a>
  93.  
  94. </div>
  95.  
  96.  
  97.  
  98. <div class ="bannerStreamingBlock">
  99. <a href="Profiles/Profile-Toradora.html"><img src="Images/toradora.jpg" width="350px" height="250px" /></a>
  100. <a href="Profiles/Profile-Toradora.html" target="_blank"><h3>Toradora</h3></a>
  101.  
  102. </div>
  103.  
  104.  
  105.  
  106.  
  107.  
  108. <!-- insert mangaStreamingBox code here
  109.  
  110.  
  111. <div class ="mangaStreamingBox">
  112.  
  113. <img src="Images/Touka_manga.png" width="150" height="150" /> <a href="http://gogoanime.tv/shokugeki-no-souma-episode-1" target="_blank"><h3>Tokyo Ghoul: Manga</h3></a>
  114.  
  115. </div>
  116.  
  117. <div class ="mangaStreamingBox">
  118.  
  119. <img src="Images/shokugeki_manga.png" width="150" height="150" /> <a href="http://gogoanime.tv/shokugeki-no-souma-episode-1" target="_blank"><h3>Shokugeki: Manga</h3></a>
  120.  
  121. </div>
  122.  
  123.  
  124. <div class ="mangaStreamingBox">
  125.  
  126. <img src="Images/bleach.jpg" width="150" height="150" /> <a href="http://gogoanime.tv/shokugeki-no-souma-episode-1" target="_blank"><h3>Bleach: Manga</h3></a>
  127.  
  128. </div>
  129.  
  130. <div class ="mangaStreamingBox">
  131.  
  132. <img src="Images/Sao.jpg" width="150px" height="150px" /> <a href="http://gogoanime.tv/shokugeki-no-souma-episode-1" target="_blank"><h3>SAO: Manga</h3></a>
  133.  
  134. </div>
  135. -->
  136.  
  137.  
  138.  
  139. </div>
  140.  
  141.  
  142.  
  143.  
  144. <div id="bannerBar">
  145.  
  146. </div>
  147.  
  148.  
  149.  
  150. </div>
  151.  
  152. </div> <!-- closes left panel div -->
  153.  
  154. <div id="rightPanel">
  155. <div id="artworkLogo">
  156. </div>
  157.  
  158. <h4 style="margin:auto; text-align:center; text">Artwork!</h4>
  159.  
  160. <div id="artworkLogo">
  161. </div>
  162.  
  163.  
  164. <div class="artworkBox">
  165. <img src="Images/MangaDrawing3.jpg" width="150px" height="150px" />
  166.  
  167.  
  168.  
  169. </div>
  170.  
  171. <div class="artworkCommentBox">
  172. <h5 style="text-align:center; margin-top:7px">Manga Drawing</h5>
  173. <p style="margin-left:7px; margin-top:10px;">
  174. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
  175.  
  176. </div>
  177.  
  178.  
  179.  
  180. <div class="headerBreak">
  181.  
  182.  
  183.  
  184. </div>
  185. <div class="artworkBox">
  186. <img src="Images/MangaDrawing2.jpg" width="150px" height="150px" /></div>
  187.  
  188. <div class="artworkCommentBox">
  189. <h5 style="text-align:center; margin-top:7px">Manga Drawing</h5>
  190. <p style="margin-left:7px; margin-top:10px;">
  191. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
  192.  
  193. </div>
  194. <div class="headerBreak">
  195.  
  196.  
  197. </div>
  198. <div class="artworkBox">
  199. <img src="Images/MangaDrawing1.jpg" width="150px" height="150px" /></div>
  200.  
  201. <div class="artworkCommentBox">
  202.  
  203. <h5 style="text-align:center; margin-top:7px">Manga Drawing</h5>
  204. <p style="margin-left:7px; margin-top:10px;">
  205. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
  206.  
  207. </div>
  208.  
  209. <div class="headerBreak">
  210. </div>
  211.  
  212. <div class="artworkBox">
  213. <img src="Images/MangaDrawing4.jpg" width="150px" height="150px" />
  214. </div>
  215.  
  216. <div class="artworkCommentBox">
  217.  
  218. <h5 style="text-align:center; margin-top:7px">Manga Drawing</h5>
  219. <p style="margin-left:7px; margin-top:10px;">
  220. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
  221.  
  222. </div>
  223. <div class="headerBreak">
  224.  
  225. </div>
  226. <div class="artworkBox">
  227. <img src="Images/MangaDrawing5.jpg" width="150px" height="150px" /></div>
  228.  
  229. <div class="artworkCommentBox">
  230.  
  231. <h5 style="text-align:center; margin-top:7px">Manga Drawing</h5>
  232. <p style="margin-left:7px; margin-top:10px;">
  233. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  234. </p>
  235.  
  236. </div>
  237.  
  238. <div class="headerBreak">
  239. </div>
  240.  
  241. </div>
  242.  
  243.  
  244.  
  245.  
  246.  
  247.  
  248.  
  249. </div>
  250.  
  251. </div>
  252.  
  253.  
  254.  
  255.  
  256.  
  257. </div>
  258. <div id="footer">
  259. <h4 style="text-align:center;">Copyright Sam Bell 2015</h4>
  260.  
  261.  
  262.  
  263. </div>
  264. <script type="text/javascript">
  265. var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
  266. </script>
  267. </body>
  268. </html>
  269.  
  270. <!-- HOME.HTML END--!>
  271.  
  272.  
  273. <!-- Stylesheet.css Start--!>
  274.  
  275. @charset "utf-8";
  276. /* CSS Document */
  277.  
  278.  
  279. div.normalHeader
  280. {
  281. box-shadow: 0px 1px #888888;
  282. }
  283.  
  284. div.bannerStreamingBlock
  285. {
  286. box-shadow: 2px 2px 2px 2px #888888;
  287. }
  288.  
  289. div.artworkBox
  290. {
  291. box-shadow: 0px 2px 2px 1px #888888;
  292. }
  293.  
  294. div.selectionStreamingBlock
  295. {
  296. box-shadow: 0px 2px 2px 1px #888888;
  297. }
  298.  
  299. div.selectionStreamingBlockDes
  300. {
  301. box-shadow: 0px 2px 2px 1px #888888;
  302. }
  303.  
  304.  
  305.  
  306.  
  307.  
  308. *{
  309. margin:auto;
  310. }
  311.  
  312. body
  313. {
  314. background-image:url(Images/blackBackground2.jpg);
  315. background-repeat:no-repeat;
  316. background-position:center;
  317. margin:0 auto;
  318.  
  319.  
  320.  
  321.  
  322. }
  323.  
  324. #logoBar
  325. {
  326. background-color: white;
  327. background-repeat:repeat;
  328. background-position: 50px 50px;
  329. height: 50px;
  330. width: 80.2%;
  331. border-bottom-width:1px;
  332. border-bottom-style: solid;
  333. border-bottom-color: black;
  334. display:block;
  335. background-image: url(Images/anime_scenery.jpg);
  336. background-position:39.5% 89%;
  337.  
  338.  
  339.  
  340.  
  341.  
  342.  
  343. color:white;
  344.  
  345.  
  346. }
  347.  
  348.  
  349.  
  350. #menu {
  351. background-color: #2e51a2;
  352. background-repeat: no-repeat;
  353. background-position: 20px 20px;
  354. height: 35px;
  355. width: 80.2%;
  356. border-bottom-width: 1px;
  357. border-bottom-style: solid;
  358. border-bottom-color: #CCC;
  359. border: 1px 0px 1px 0px solid black;
  360. }
  361.  
  362.  
  363. #welcomeBar {
  364. background-color: #e1e7f5;
  365. height: 38px;
  366. width: 80.2%;
  367. text-align:left;
  368.  
  369.  
  370. }
  371.  
  372. #bannerBar
  373. {
  374. display: block;
  375. width: 470px;
  376.  
  377. overflow: hidden;
  378. padding-top: 4px;
  379. padding-bottom: 4px;
  380. margin-bottom: 12px;
  381. margin-left:20px;
  382. margin-top: 6px;
  383.  
  384. }
  385.  
  386.  
  387.  
  388. .bannerStreamingBlock
  389. {
  390. float: left;
  391. position: relative;
  392. display: block;
  393. width: 233px;
  394. height: 266px;
  395. margin-left: 11px;
  396. margin-bottom: 11px;
  397. overflow:hidden;
  398. margin-top:30px;
  399. border-bottom:groove;
  400. border-top:groove;
  401. border-left:groove;
  402. border-right:groove;
  403. border-color:black;
  404. border-width:medium;
  405. color: #FFF;
  406. background-image: url(Images/parchment.jpg);
  407. background-position: center 2px;
  408. overflow:hidden;
  409.  
  410.  
  411.  
  412. }
  413.  
  414. .selectionStreamingBlock
  415. {
  416. float: left;
  417. position: relative;
  418. display: block;
  419. width: 700px;
  420. height: 450px;
  421. margin-left: 20px;
  422. margin-bottom: 11px;
  423. overflow:hidden;
  424. margin-top:30px;
  425. border-bottom:groove;
  426. border-top:groove;
  427. border-left:groove;
  428. border-right:groove;
  429. border-radius:15px;
  430. border-color:black;
  431. color: #FFF;
  432.  
  433. }
  434.  
  435. .selectionStreamingBlockDes
  436. {
  437. float: left;
  438. position: relative;
  439. display: block;
  440. width: 700px;
  441. height: 320px;
  442. margin-left: 20px;
  443. margin-bottom: 11px;
  444. overflow:hidden;
  445. margin-top:35px;
  446. border-bottom:groove;
  447. border-top:groove;
  448. border-left:groove;
  449. border-right:groove;
  450. border-color:black;
  451. color:black;
  452. text-align:left;
  453. white-space:normal;
  454. word-wrap: break-word;
  455.  
  456.  
  457.  
  458.  
  459. }
  460.  
  461.  
  462.  
  463. .episodeList
  464. {
  465. float: right;
  466. position:relative;
  467. display: block;
  468. width: 175px;
  469. height: 320px;
  470. border-left:groove;
  471. border-color: Black;
  472. color: black;
  473. overflow:scroll;
  474. overflow-x: hidden;
  475. text-align:center;
  476. font-size:14px;
  477.  
  478.  
  479. }
  480.  
  481. .mangaStreamingBox
  482. {
  483. float: left;
  484. position: relative;
  485. display: block;
  486. width: 150px;
  487. height: 167px;
  488. margin-left: 28px;
  489. margin-bottom: 11px;
  490. overflow:hidden;
  491. margin-top:45px;
  492. border-bottom:groove;
  493. border-top:groove;
  494. border-left:groove;
  495. border-right:groove;
  496. background-color:#e1e7f5;
  497. border-color:black;
  498. background-image: url(Images/anime_stars.jpg);
  499.  
  500. }
  501.  
  502. .bracketStreamingBox
  503. {
  504. float: left;
  505. position: relative;
  506. display: block;
  507. width: 50px;
  508. height: 50px;
  509. margin-left: 28px;
  510. margin-bottom: -20px;
  511. overflow:hidden;
  512. margin-top:30px;
  513. border-bottom:groove;
  514. border-top:groove;
  515. border-left:groove;
  516. border-right:groove;
  517. background-color:#e1e7f5;
  518. border-color:black;
  519.  
  520. }
  521.  
  522. .artworkBox
  523. {
  524. float: left;
  525. position: relative;
  526. display: block;
  527. width: 150px;
  528. height: 150px;
  529. margin-left:5px;
  530. overflow:hidden;
  531. border-bottom:groove;
  532. border-top:groove;
  533. border-left:groove;
  534. border-right:groove;
  535. background-color:#white;
  536. border-color:black;
  537. }
  538.  
  539. .artworkHeader
  540. {
  541. background-color:pink;
  542. float:left;
  543. position:relative;
  544. width: 266px;
  545. height: 35px;
  546. border-bottom:groove;
  547. border-top:groove;
  548. border-left:groove;
  549. border-right:groove;
  550. background-color:#white;
  551. border-color:black;
  552. }
  553.  
  554. .artworkCommentBox
  555. {
  556. float: left;
  557. position:relative;
  558.  
  559. display: block;
  560. width: 100px;
  561. height: 150px;
  562. margin-left:6px;
  563. margin-top:3px;
  564. white-space:normal;
  565. word-wrap: break-word;
  566. font-size:11px;
  567.  
  568.  
  569.  
  570. border-bottom:solid;
  571. border-top:solid;
  572. border-left:solid;
  573. border-right:solid;
  574. border-width: 1px 1px 1px 1px;
  575. text-align:left;
  576.  
  577. background-color:#white;
  578. border-color:black;
  579. }
  580.  
  581. div.artworkCommentBox
  582. {
  583. box-shadow: 1px 1px 1px 1px #888888;
  584. }
  585.  
  586.  
  587.  
  588.  
  589.  
  590.  
  591.  
  592.  
  593. #content
  594. {
  595. background-color: white;
  596. background-repeat: no-repeat;
  597. background-position: 20px 20px;
  598. height: 1020px;
  599. width: 80.2%;
  600.  
  601. float: none;
  602. clear: none;
  603.  
  604.  
  605. }
  606.  
  607. #footer
  608. {
  609. background-color:#e1e7f5;
  610. margin-top:white;
  611. margin-top: solid;
  612. margin-top:0px;
  613.  
  614. background-position: 20px 20px;
  615. height: 30px;
  616. width: 80.2%;
  617. text-align: center;
  618.  
  619.  
  620.  
  621.  
  622. }
  623.  
  624. #leftPanelContainer
  625. {
  626.  
  627. display: block;
  628. Height:725px;
  629. Width:500px;
  630. float:left;
  631.  
  632. }
  633.  
  634. #rightPanelContainer
  635. {
  636. display: block;
  637. Height:725px;
  638. Width:250px;
  639.  
  640. }
  641.  
  642. .normalHeader
  643. {
  644. font-size: 12px;
  645. border-width: 0px 0px 1px 0px;
  646. border-color:#CCC;
  647. color:black;
  648. margin-top: 50px;
  649. margin-bottom: 5px;
  650. margin-left: 20px;
  651. border-style:solid;
  652. width:770px;
  653. }
  654.  
  655. .headerBreak
  656. {
  657. border-width: 0px 0px 1px 0px;
  658. border-color:#CCC;
  659. color:black;
  660. margin-top: 170px;
  661. margin-bottom: 5px;
  662. margin-left: 9px;
  663. border-style:solid;
  664. width:260px;
  665.  
  666. }
  667.  
  668. #artworkLogo
  669. {
  670. border-width: 0px 0px 1px 0px;
  671. border-color:#CCC;
  672. border-style:solid;
  673. color:black;
  674. margin-top: 1px;
  675. margin-bottom: 5px;
  676. margin-left: 10px;
  677.  
  678. width:250px;
  679. }
  680.  
  681.  
  682. .rightHeader
  683. {
  684. font-size: 12px;
  685. border-width: 0px 0px 1px 0px;
  686. border-color:#CCC;
  687. color:black;
  688. margin-top: 50px;
  689. margin-bottom: 5px;
  690. margin-left: 20px;
  691. border-style:solid;
  692. width:225px;
  693. }
  694.  
  695. #leftPanel
  696. {
  697. background-color:white;
  698. background-repeat: no-repeat;
  699. height: 1000px;
  700. width: 800px;
  701.  
  702.  
  703.  
  704. float:left;
  705.  
  706. }
  707.  
  708. #rightPanel
  709. {
  710. background-color:white;
  711.  
  712. background-repeat: no-repeat;
  713. height: 1000px;
  714. width: 276px;
  715. border-right: groove 0px;
  716. border-left: solid 1px #CCC;
  717. margin-top:7px;
  718.  
  719.  
  720. border-color: #CCC;
  721. float:right;
  722. position:static;
  723.  
  724. }
  725.  
  726. a
  727. {
  728. color:white;
  729. }
  730.  
  731.  
  732. <!-- stylesheet.css end --!>
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!