Advertisement
dylanohelps

Home Page #1

Jun 18th, 2013
3,167
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.24 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <!----------------------
  4.  
  5. HOME PAGE #1 by JAKEHELPS
  6. #1: Do not redistribute & claim as your own.
  7. #2: Do not remove the credit.
  8.  
  9. ---------------------------->
  10.  
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  12. <head>
  13. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}" />
  17.  
  18. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
  23.  
  24. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  25. <script type="text/javascript">
  26. $("#slideshow > div:gt(0)").hide();
  27.  
  28. setInterval(function() {
  29. $('#slideshow > div:first')
  30. .fadeOut(1000)
  31. .next()
  32. .fadeIn(1000)
  33. .end()
  34. .appendTo('#slideshow');
  35. }, 3000);
  36.  
  37. </script>
  38.  
  39. </head>
  40. <style type="text/css">
  41. body {
  42. padding: 0;
  43. margin: 0;
  44. list-style: none;
  45. background-color: #FEFEFE;
  46. background-attachment: fixed;
  47. background-image:url('http://25.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo4_250.jpg');
  48. }
  49.  
  50. a {
  51. text-decoration: none;
  52. color: black;
  53. }
  54.  
  55. ::-webkit-scrollbar-thumb:vertical {
  56. height:10px;
  57. background-color: #303030; }
  58.  
  59. ::-webkit-scrollbar-thumb:horizontal {
  60. height:30px;
  61. background-color: #303030; }
  62.  
  63. ::-webkit-scrollbar {
  64. height: 10px;
  65. width: 4px;
  66. background-color: #505050; }
  67.  
  68. #slideshow {
  69. margin: 0px auto;
  70. position: relative;
  71. width: 100%;
  72. height: 500px;
  73. background-color: #202020;
  74. }
  75.  
  76. #slideshow img {
  77. width: 1366px;
  78. height: 500px;
  79. }
  80.  
  81. #slideshow > div {
  82. position: absolute;
  83. }
  84.  
  85. #navigation {
  86. margin: auto;
  87. width: 100%;
  88. height: 90px;
  89. padding: 10px 0px 10px 0px;
  90. position: relative;
  91. }
  92.  
  93. .logo {
  94. float: left;
  95. margin-top: 20px;
  96. padding: 15px 18px 18px 18px;
  97. background-color: #202020;
  98. margin-left: 30px;
  99. border-radius: 40px;
  100. font-family: cambria;
  101. font-size: 18px;
  102. text-align: center;
  103. color: #FFFFFF;
  104. }
  105.  
  106. .name {
  107. font-family: fjalla one;
  108. font-size: 20px;
  109. color: #202020;
  110. display: inline-block;
  111. text-transform: uppercase;
  112. letter-spacing: 1px;
  113. margin-top: 35px;
  114. margin-left: 5px;
  115. }
  116.  
  117. .nav {
  118. float: right;
  119. font-family: fjalla one;
  120. font-size: 20px;
  121. color: #202020;
  122. background-color: transparent;
  123. width: auto;
  124. height: 20px;
  125. padding: 20px;
  126. margin-top: 15px;
  127. }
  128.  
  129. .nav a {
  130. padding: 10px 15px;
  131. text-transform: uppercase;
  132. color: #202020;
  133. }
  134.  
  135. .nav a:hover {
  136. border-top: 1px groove #202020;
  137. border-bottom: 1px groove #202020;
  138. }
  139.  
  140. #middle {
  141. width: 100%;
  142. height: 250px;
  143. background-image:url('http://api.thumbr.it/whitenoise-361x370.png?background=d8dadbff&noise=757475&density=56&opacity=15');
  144. }
  145.  
  146. .title {
  147. text-align: center;
  148. font-family: fjalla one;
  149. font-size: 36px;
  150. color: #AAAAAA;
  151. padding-bottom: 4px;
  152. padding-top: 20px;
  153. margin-bottom: 5px;
  154. width: auto;
  155. margin: auto;
  156. text-transform: uppercase;
  157. letter-spacing: 2px;
  158. }
  159.  
  160. .description {
  161. margin: auto;
  162. text-align: center;
  163. font-family: cambria;
  164. font-size: 14px;
  165. color: #808080;
  166. width: 800px;
  167. padding: 10px;
  168. }
  169.  
  170. #another {
  171. width: 100%;
  172. height: 500px;
  173. background-color: #DDDDDD;
  174. }
  175.  
  176. .character {
  177. height: 500px;
  178. width: 272px;
  179. background-color: #202020;
  180. float: left;
  181. }
  182.  
  183. .character img {
  184. margin: auto;
  185. width: 272px;
  186. height: 250px;
  187. }
  188.  
  189. .cname {
  190. text-align: center;
  191. font-family: roboto condensed;
  192. font-size: 20px;
  193. color: #CCCCCC;
  194. width: auto;
  195. padding-bottom: 4px;
  196. border-bottom: #CCCCCC;
  197. text-transform: uppercase;
  198. letter-spacing: 1px;
  199. }
  200.  
  201. .biography {
  202. width: 220px;
  203. height: 150px;
  204. padding: 20px;
  205. margin-left: 10px;
  206. background-color: #303030;
  207. font-family: cambria;
  208. font-size: 12px;
  209. color: #CCCCCC;
  210. overflow: auto;
  211. }
  212.  
  213. #bottomnav {
  214. width: 100%;
  215. height: 500px;
  216. background-color: #BBBBBB;
  217. background-image:url('http://api.thumbr.it/whitenoise-361x370.png?background=d8dadbff&noise=757475&density=56&opacity=15');
  218. }
  219.  
  220. .columns {
  221. width: 900px;
  222. columns:180px 3;
  223. -webkit-columns:100px 3;
  224. -moz-columns:100px 3;
  225. margin: auto;
  226. height: 300px;
  227. }
  228.  
  229. .section {
  230. margin-bottom: 25px;
  231. }
  232.  
  233. .section a {
  234. display: block;
  235. font-family: cambria;
  236. font-size: 12px;
  237. color: #202020;
  238. font-style: italic;
  239. padding: 2px 0px 2px 20px;
  240. }
  241.  
  242. .section a:hover {
  243. opacity: 0.8;
  244. }
  245.  
  246. .sectiontitle {
  247. font-family: cambria;
  248. background-color: #FFFFFF;
  249. display: block;
  250. padding: 5px;
  251. font-style: underline;
  252. color: #202020;
  253. font-size: 12px;
  254. text-transform: uppercase;
  255. margin-bottom: 4px;
  256. }
  257.  
  258. </style>
  259. <body>
  260. <div id="navigation">
  261. <div class="logo">&#x2654;</div><div class="name">Models, Inc.</div>
  262. <div class="nav">
  263. <a href="#">Home</a>
  264. <a href="#">Contact</a>
  265. <a href="#">Link 1</a>
  266. <a href="#">Link 2</a>
  267. <a href="#">Link 3</a>
  268. <a href="http://jakehelps.tumblr.com">&copy;</a>
  269. </div>
  270. </div>
  271. <div id="slideshow">
  272. <div>
  273. <!----- SLIDESHOW IMAGE (1366x500) ----->
  274. <img src="http://i93.photobucket.com/albums/l78/andrew_jason12/sfsd.png~original">
  275. </div>
  276.  
  277. <div>
  278. <!----- SLIDESHOW IMAGE (1366x500) ----->
  279. <img src="http://i93.photobucket.com/albums/l78/andrew_jason12/sfd.png~original">
  280. </div>
  281.  
  282. <div>
  283. <!----- SLIDESHOW IMAGE (1366x500) ----->
  284. <img src="http://i93.photobucket.com/albums/l78/andrew_jason12/eww.png~original">
  285. </div>
  286. </div>
  287. <div id="middle">
  288. <div class="title">Welcome to the Agency</div>
  289. <div class="description">
  290. Hello and welcome to Models, Inc! Here at Models Inc, we provide companies with the world's exclusive models to pose for their next incoming series of clothing lines they have in store for the public. From famous faces like Francisco Lachowski to Candice Swanepoel, there is an infinite amount of selections that you are able to choose from. Modeling is everything nowadays. And if you have a pretty face, then you're up for the job. But the question is, can you be one? Can you strut onto the runway with courage and a vivacious attitude enough to handle the crowd and pairs of eyes that are staring at you? Can you handle the pressure of having to get the perfect shot at photoshoots and having to worry about a single zit on your face that can be a sign of your career going down the drain? Are you even ready to handle the paparazzi that are going to be flooding your face with questions if you were to be a model/ambassador for Models Inc?
  291. </div>
  292. </div>
  293. <div id="another">
  294. <!------BOX 1------->
  295. <div class="character">
  296. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/sfddsdsf.png~original" /></a>
  297. <div class="cname">Candice Swanepoel</div>
  298. <div class="biography">
  299. Hello and welcome to Models, Inc! Here at Models Inc, we provide companies with the world's exclusive models to pose for their next incoming series of clothing lines they have in store for the public. From famous faces like Francisco Lachowski to Candice Swanepoel, there is an infinite amount of selections that you are able to choose from. Modeling is everything nowadays. And if you have a pretty face, then you're up for the job. But the question is, can you be one? Can you strut onto the runway with courage and a vivacious attitude enough to handle the crowd and pairs of eyes that are staring at you? Can you handle the pressure of having to get the perfect shot at photoshoots and having to worry about a single zit on your face that can be a sign of your career going down the drain?
  300. </div>
  301. </div>
  302. <!------BOX 2------->
  303. <div class="character">
  304. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/wrwrewe.png~original" /></a>
  305. <div class="cname">Francisco Lachowski</div>
  306. <div class="biography">
  307. Hello and welcome to Models, Inc! Here at Models Inc, we provide companies with the world's exclusive models to pose for their next incoming series of clothing lines they have in store for the public. From famous faces like Francisco Lachowski to Candice Swanepoel, there is an infinite amount of selections that you are able to choose from. Modeling is everything nowadays. And if you have a pretty face, then you're up for the job. But the question is, can you be one? Can you strut onto the runway with courage and a vivacious attitude enough to handle the crowd and pairs of eyes that are staring at you? Can you handle the pressure of having to get the perfect shot at photoshoots and having to worry about a single zit on your face that can be a sign of your career going down the drain?
  308. </div>
  309. </div>
  310. <!------BOX 3------->
  311. <div class="character">
  312. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/sfsfds.png~original" /></a>
  313. <div class="cname">Benjamin Bowers</div>
  314. <div class="biography">
  315. Hello and welcome to Models, Inc! Here at Models Inc, we provide companies with the world's exclusive models to pose for their next incoming series of clothing lines they have in store for the public. From famous faces like Francisco Lachowski to Candice Swanepoel, there is an infinite amount of selections that you are able to choose from. Modeling is everything nowadays. And if you have a pretty face, then you're up for the job. But the question is, can you be one? Can you strut onto the runway with courage and a vivacious attitude enough to handle the crowd and pairs of eyes that are staring at you? Can you handle the pressure of having to get the perfect shot at photoshoots and having to worry about a single zit on your face that can be a sign of your career going down the drain?
  316. </div>
  317. </div>
  318. <!------BOX 4------->
  319. <div class="character">
  320. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/adadss.png~original" /></a>
  321. <div class="cname">Barbara Palvin</div>
  322. <div class="biography">
  323. Hello and welcome to Models, Inc! Here at Models Inc, we provide companies with the world's exclusive models to pose for their next incoming series of clothing lines they have in store for the public. From famous faces like Francisco Lachowski to Candice Swanepoel, there is an infinite amount of selections that you are able to choose from. Modeling is everything nowadays. And if you have a pretty face, then you're up for the job. But the question is, can you be one? Can you strut onto the runway with courage and a vivacious attitude enough to handle the crowd and pairs of eyes that are staring at you? Can you handle the pressure of having to get the perfect shot at photoshoots and having to worry about a single zit on your face that can be a sign of your career going down the drain?
  324. </div>
  325. </div>
  326. <!------BOX 5------->
  327. <div class="character">
  328. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/yh.png~original" /></a>
  329. <div class="cname">Adriana Lima</div>
  330. <div class="biography">
  331. Hello and welcome to Models, Inc! Here at Models Inc, we provide companies with the world's exclusive models to pose for their next incoming series of clothing lines they have in store for the public. From famous faces like Francisco Lachowski to Candice Swanepoel, there is an infinite amount of selections that you are able to choose from. Modeling is everything nowadays. And if you have a pretty face, then you're up for the job. But the question is, can you be one? Can you strut onto the runway with courage and a vivacious attitude enough to handle the crowd and pairs of eyes that are staring at you? Can you handle the pressure of having to get the perfect shot at photoshoots and having to worry about a single zit on your face that can be a sign of your career going down the drain?
  332. </div>
  333. </div>
  334. </div>
  335. <div id="bottomnav">
  336. <div class="title">Models, Inc. &copy; 2013</div>
  337. <div class="columns">
  338. <!-------SECTION-------->
  339. <div class="section">
  340. <div class="sectiontitle">General</div>
  341. <a href="#">Home</a>
  342. <a href="#">Contact</a>
  343. <a href="#">Archive</a>
  344. <a href="#">FAQ</a>
  345. <a href="#">Submit Box</a>
  346. <a href="#">Credit</a>
  347. </div>
  348. <!-------SECTION-------->
  349. <div class="section">
  350. <div class="sectiontitle">About</div>
  351. <a href="#">The Plot</a>
  352. <a href="#">History</a>
  353. <a href="#">Rules</a>
  354. <a href="#">Disclaimer</a>
  355. <a href="#">Admins</a>
  356. <a href="#">Models</a>
  357. <a href="#">The Agency</a>
  358. <a href="#">CEO of Models, Inc.</a>
  359. <a href="#">Contracts</a>
  360. <a href="#">Elite Models</a>
  361. </div>
  362. <!-------SECTION-------->
  363. <div class="section">
  364. <div class="sectiontitle">Characters</div>
  365. <a href="#">All</a>
  366. <a href="#">Open Male</a>
  367. <a href="#">OPen Female</a>
  368. <a href="#">Taken Male</a>
  369. <a href="#">Taken Female</a>
  370. <a href="#">Reserved FCs</a>
  371. <a href="#">Taken FCs</a>
  372. <a href="#">Banned FCs</a>
  373. </div>
  374. <!-------SECTION-------->
  375. <div class="section">
  376. <div class="sectiontitle">Members</div>
  377. <a href="#">Gossip Blog</a>
  378. <a href="#">OOC Blog</a>
  379. <a href="#">Prompts</a>
  380. <a href="#">Challenges & Tasks</a>
  381. <a href="#">Important Dates</a>
  382. <a href="#">Blogroll</a>
  383. <a href="#">Tracked tags</a>
  384. <a href="#">Affiliates</a>
  385. </div>
  386. </div>
  387. </div>
  388.  
  389.  
  390. </body>
  391. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement