API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 20th, 2019
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.14 KB | None | 0 0
raw download clone embed print report
  1. <div id="container">
  2. <div id="content">
  3. <div id="headerInfo">
  4. <div class="leftLocation">
  5. <p>golden, co</p>
  6. </div>
  7. <div class="rightInfo">
  8. <span class="text">
  9. <a href="about.php">about us</a>
  10. <a href="contact.php">contact</a>
  11. <span class="phone">XXX-XXX-XXXX</span>
  12. </span>
  13. </div>
  14. <div class="rightPic">
  15. <img src="images/facebook.png" alt="facebook" title="facebook" />
  16. <img src="images/yelp.png" alt="yelp" title="yelp" />
  17. </div>
  18. <div class="clear"></div>
  19. </div>
  20. <div id="homeHead">
  21. <img class="logo" src="images/logo.png" alt="logo" />
  22. <img class="paintSplash" src="images/paintSplash.png" alt="paint" />
  23. <span id="nav">
  24. <a href="classes">classes</a>
  25. <a href="classes">calendar</a>
  26. <a href="classes">gallery</a>
  27. <a href="classes">FAQ</a>
  28. <a href="classes">private events</a>
  29. <a href="classes">large-scale</a>
  30. </span>
  31. <span id="word">
  32. ...Paint
  33. </span>
  34. <img src="images/homeSlide1.png" class="pic1" alt="pic1"/>
  35. <img src="images/homeSlide4.png" class="pic1" alt="pic2"/>
  36. <img src="images/homeSlide7.png" class="pic1" alt="pic3"/>
  37.  
  38. <img src="images/homeSlide2.png" class="pic2" alt="pic4"/>
  39. <img src="images/homeSlide5.png" class="pic2" alt="pic5"/>
  40. <img src="images/homeSlide8.png" class="pic2" alt="pic6"/>
  41.  
  42. <img src="images/homeSlide3.png" class="pic3" alt="pic7"/>
  43. <img src="images/homeSlide6.png" class="pic3" alt="pic8"/>
  44. <img src="images/homeSlide9.png" class="pic3" alt="pic9"/>
  45. <div id="step1">
  46. <span class="easy">Easy as</span>
  47. <span class="part">Sign Up</span>
  48. <span class="num">1.</span>
  49. <p style="padding-bottom:5px;">Pick your favorite class and <a href="#">REGISTER ONLINE</a>.</p>
  50. <p class="bottom"><a href="#">Classes</a> Starting at only $25!</p>
  51. </div>
  52. <div id="step2">
  53. <span class="part">Show Up</span>
  54. <span class="num">2.</span>
  55. <p style="padding-bottom:5px;">We supply everything! Check out the <a href="#">FAQ</a>.</p>
  56. <p class="bottom">Limited Seating, <a href="#">Register Now!</a></p>
  57. </div>
  58. <div id="step3">
  59. <span class="part2">Enjoy!</span>
  60. <span class="num2">3.</span>
  61. <img class="wine" src="images/wine.png" alt="wine" />
  62. <p style="padding-bottom:10px;">Sip your drink, paint, play & have fun.</p>
  63. <p class="bottom">See our <a href="#">Gallery</a> for results!</p>
  64. </div>
  65. </div><!--End Header Info -->
  66. <div id="bodyInfo">
  67. <div id="left">
  68. <p>
  69. <span class="bloodHeader">Welcome</span> to Art on the Brix where anyone can unleash their inner artist amidst friends, family and co-workers. Quickly <a href="#">Sign-Up</a> for a class or take your time to enjoy our website!
  70. </p>
  71. <p id="midLeft">
  72. <span class="blueHeader">NO TALENT OR EXPERIENCE IS NECESSARY!</span>Colorful Variety of Themed Classes &#8226; Open Studio Times &#8226; Private Parties &#8226; Corporate Team-Builds &#8226; Charity Events
  73. </p>
  74. <p>
  75. Our casual yet upscale studio is in the heaert of historic Golden, Colorado. Enjoy painting, crafts, wine or beer, music and fun surprises in our low-stress art classes. Our local artists guie all of the <a href="#">CLASSES</a> with easy-to-folow, step-by-step instruction on how to create the featured piece. The experience is playful and light-hearted encouraging you to just follow along or release inhibitions and go outside your lines. Create, taste and play!
  76. </p>
  77. </div>
  78. <div id="right">
  79. </div>
  80. </div><!-- End bodyInfo -->
  81. </div>
  82. </div>
  83.  
  84. #container{
  85. width:100%;
  86. height:100%;
  87. }
  88. #content{
  89. width:900px;
  90. height:100%;
  91. margin:0px auto;
  92. background-color:#FFF;
  93. -moz-border-radius: 10px;
  94. -webkit-border-radius: 10px;
  95. border-radius: 10px; /* future proofing */
  96. -khtml-border-radius: 10px; /* for old Konqueror browsers */
  97. }
  98. /*Header Info*/
  99. #headerInfo{
  100. position: relative;
  101. }
  102. .leftLocation{
  103. float:left;
  104. font-family: HelveticaNeueStd;
  105. font-size:14px;
  106. color:#4d2c0d;
  107. height:30px;
  108. margin-top:10px;
  109. }
  110. .leftLocation p{
  111. padding-right:5px;
  112. }
  113. .rightInfo{
  114. position: relative;
  115. float:right;
  116. width:360px;
  117. }
  118. .rightInfo a{
  119. color:#3397bf;
  120. text-decoration: none;
  121. font-size:14px;
  122. font-family: HelveticaNeueStd;
  123. padding-right:10px;
  124. }
  125. .rightInfo a:hover{
  126. color:#e11b6b;
  127. }
  128. span.text{
  129. position:absolute;
  130. top:-7px;
  131. }
  132. span.phone{
  133. font-family: Lavanderia;
  134. font-size:30px;
  135. color:#4d2c0d;
  136. }
  137. .rightPic{
  138. position: absolute;
  139. right:0px;
  140. }
  141. /*Home Head*/
  142. #homeHead{
  143. background-image:url('../images/homeHead.png');
  144. width:900px;
  145. height:573px;
  146. position:relative;
  147. clear: both;
  148. }
  149. .logo{
  150. position: absolute;
  151. top:-30px;
  152. left:10px;
  153. }
  154. .paintSplash{
  155. position: absolute;
  156. left:350px;
  157. top:-35px;
  158. height:105px;
  159. }
  160. #nav{
  161. position: absolute;
  162. left:245px;
  163. top:70px;
  164. }
  165. #nav a{
  166. color:#FFF;
  167. font-size: 16px;
  168. font-family: HelveticaNeueStd;
  169. padding-right:10px;
  170. text-decoration: none;
  171. }
  172. #nav a:hover{
  173. color:#e11b6b;
  174. }
  175. #word{
  176. position: absolute;
  177. top:90px;
  178. left:235px;
  179. padding:10px;
  180. color:#3397bf;
  181. font-family: Lavanderia;
  182. font-size:35px;
  183. }
  184. #pic1{
  185.  
  186. }
  187. .pic1{
  188. position:absolute;
  189. top:249px;
  190. left:160px;
  191. width:140px;
  192. height:174px;
  193. }
  194. #pic2{
  195. transform: rotate(7deg);
  196. -ms-transform: rotate(7deg); /* IE 9 */
  197. -webkit-transform: rotate(7deg); /* Safari and Chrome */
  198. -o-transform: rotate(7deg); /* Opera */
  199. -moz-transform: rotate(7deg); /* Firefox */
  200. }
  201. .pic2{
  202. position:absolute;
  203. top:263px;
  204. left:424px;
  205. width:102px;
  206. height:150px;
  207. transform: rotate(7deg);
  208. -ms-transform: rotate(7deg); /* IE 9 */
  209. -webkit-transform: rotate(7deg); /* Safari and Chrome */
  210. -o-transform: rotate(7deg); /* Opera */
  211. -moz-transform: rotate(7deg); /* Firefox */
  212. }
  213. #pic3{
  214. transform: rotate(-13deg);
  215. -ms-transform: rotate(-13deg); /* IE 9 */
  216. -webkit-transform: rotate(-13deg); /* Safari and Chrome */
  217. -o-transform: rotate(-13deg); /* Opera */
  218. -moz-transform: rotate(-13deg); /* Firefox */
  219. }
  220. .pic3{
  221. position:absolute;
  222. top:252px;
  223. left:641px;
  224. width:121px;
  225. height:173px;
  226. transform: rotate(-13deg);
  227. -ms-transform: rotate(-13deg); /* IE 9 */
  228. -webkit-transform: rotate(-13deg); /* Safari and Chrome */
  229. -o-transform: rotate(-13deg); /* Opera */
  230. -moz-transform: rotate(-13deg); /* Firefox */
  231. }
  232. #step1{
  233. position:absolute;
  234. font-family: Helvetica;
  235. top:500px;
  236. left:100px;
  237. width:200px;
  238. height:60px;
  239. padding:15px;
  240. text-align: center;
  241. background-color:#f0deba;
  242. -webkit-box-shadow: 0 8px 6px -6px black;
  243. -moz-box-shadow: 0 8px 6px -6px black;
  244. box-shadow: 0 8px 6px -6px black;
  245. -moz-border-radius: 10px;
  246. -webkit-border-radius: 10px;
  247. border-radius: 10px; /* future proofing */
  248. -khtml-border-radius: 10px; /* for old Konqueror browsers */
  249. }
  250. #step1 a{
  251. color:#e11b6b;
  252. }
  253. .bottom{
  254. font-family: HelveticaNeueStd-Italic;
  255. color:#3397bf;
  256. }
  257. .bottom a{
  258. color:#e11b6b;
  259. }
  260. .easy{
  261. font-family: Helvetica;
  262. font-size:14px;
  263. position: absolute;
  264. color:#FFF;
  265. top:-25px;
  266. left:-30px;
  267. }
  268. .num{
  269. font-family: HelveticaNeueStd;
  270. font-size:45px;
  271. color:#FFF;
  272. position: absolute;
  273. top:-45px;
  274. left:20px;
  275. }
  276. .part{
  277. font-family: Lavanderia;
  278. color:#FFF;
  279. font-size:40px;
  280. position: absolute;
  281. top:-45px;
  282. left:60px;
  283. }
  284. .num2{
  285. font-family: HelveticaNeueStd;
  286. font-size:45px;
  287. color:#FFF;
  288. position: absolute;
  289. top:-45px;
  290. left:60px;
  291. }
  292. .part2{
  293. font-family: Lavanderia;
  294. color:#FFF;
  295. font-size:40px;
  296. position: absolute;
  297. top:-45px;
  298. left:100px;
  299. }
  300. #step2{
  301. position:absolute;
  302. font-family: Helvetica;
  303. top:500px;
  304. left:345px;
  305. width:200px;
  306. height:60px;
  307. padding:15px;
  308. text-align: center;
  309. background-color:#f0deba;
  310. -webkit-box-shadow: 0 8px 6px -6px black;
  311. -moz-box-shadow: 0 8px 6px -6px black;
  312. box-shadow: 0 8px 6px -6px black;
  313. -moz-border-radius: 10px;
  314. -webkit-border-radius: 10px;
  315. border-radius: 10px; /* future proofing */
  316. -khtml-border-radius: 10px; /* for old Konqueror browsers */
  317. }
  318. #step2 a{
  319. color:#e11b6b;
  320. }
  321. #step3{
  322. position:absolute;
  323. font-family: Helvetica;
  324. top:500px;
  325. left:590px;
  326. width:200px;
  327. height:60px;
  328. padding:10px;
  329. padding-bottom:20px;
  330. padding-left:50px;
  331. text-align: center;
  332. background-color:#f0deba;
  333. -webkit-box-shadow: 0 8px 6px -6px black;
  334. -moz-box-shadow: 0 8px 6px -6px black;
  335. box-shadow: 0 8px 6px -6px black;
  336. -moz-border-radius: 10px;
  337. -webkit-border-radius: 10px;
  338. border-radius: 10px; /* future proofing */
  339. -khtml-border-radius: 10px; /* for old Konqueror browsers */
  340. }
  341. #step3 a{
  342. color:#e11b6b;
  343. }
  344. .wine{
  345. position:absolute;
  346. top:-30px;
  347. left:5px;
  348. }
  349. /*bodyInfo*/
  350. #holder{
  351. width:900px;
  352. height:573px;
  353. }
  354. #bodyInfo{
  355. width:100%;
  356. }
  357. #left{
  358. width:450px;
  359. float:left;
  360. }
  361. #right{
  362. width:450px;
  363. float:left;
  364. }
  365.  
  366. <div id="bodyInfo">
  367. <div id="left">
  368. <p>
  369. <span class="bloodHeader">Welcome</span> to Art on the Brix where anyone can unleash their inner artist amidst friends, family and co-workers. Quickly <a href="#">Sign-Up</a> for a class or take your time to enjoy our website!
  370. </p>
  371. <p id="midLeft">
  372. <span class="blueHeader">NO TALENT OR EXPERIENCE IS NECESSARY!</span>Colorful Variety of Themed Classes &#8226; Open Studio Times &#8226; Private Parties &#8226; Corporate Team-Builds &#8226; Charity Events
  373. </p>
  374. <p>
  375. Our casual yet upscale studio is in the heaert of historic Golden, Colorado. Enjoy painting, crafts, wine or beer, music and fun surprises in our low-stress art classes. Our local artists guie all of the <a href="#">CLASSES</a> with easy-to-folow, step-by-step instruction on how to create the featured piece. The experience is playful and light-hearted encouraging you to just follow along or release inhibitions and go outside your lines. Create, taste and play!
  376. </p>
  377. </div>
  378. <div id="right"></div>
  379. <div sytle="clear: both;"></div>
  380. </div><!-- End bodyInfo -->
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!