API tools faq
paste
Advertisement
Guest User

HTML

a guest
Oct 16th, 2019
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <title>W3.CSS Template</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  7. <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  9. <style>
  10. html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
  11. </style>
  12. <body class="w3-light-grey">
  13.  
  14. <!-- Page Container -->
  15. <div class="w3-content w3-margin-top" style="max-width:1400px;">
  16.  
  17. <!-- The Grid -->
  18. <div class="w3-row-padding">
  19.  
  20. <!-- Left Column -->
  21. <div class="w3-third">
  22.  
  23. <div class="w3-white w3-text-grey w3-card-4">
  24. <div class="w3-display-container">
  25. <img src="C:\Users\Owner\Desktop\FP.png" style="width:100%" alt="Avatar">
  26. <div class="w3-display-bottomleft w3-container w3-text-black">
  27. <h2>FivePixels.minehut.gg</h2>
  28. </div>
  29. </div>
  30. <div class="w3-container">
  31. <p><i><b>Discord Server Link:</b></i></p>
  32. <p><i><img src="C:\Users\Owner\Desktop\discord.png" height=10% width=10% </i>Discord Link</p>
  33. <p><i><b>Server Ip Adress:</b></i></p>
  34. <p><i><img src="C:\Users\Owner\Desktop\FP.png" height=10% width=10%</i>FivePixels.minehut.gg</p>
  35. <p><i><b>COMING SOON:</b></i></p>
  36. <p><i><img src="C:\Users\Owner\Desktop\FP.png" height=10% width=10%</i>COMING SOON</p>
  37. <hr>
  38.  
  39. <p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>
  40. <p>Adobe Photoshop</p>
  41. <div class="w3-light-grey w3-round-xlarge w3-small">
  42. <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div>
  43. </div>
  44. <p>Photography</p>
  45. <div class="w3-light-grey w3-round-xlarge w3-small">
  46. <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">
  47. <div class="w3-center w3-text-white">80%</div>
  48. </div>
  49. </div>
  50. <p>Illustrator</p>
  51. <div class="w3-light-grey w3-round-xlarge w3-small">
  52. <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:75%">75%</div>
  53. </div>
  54. <p>Media</p>
  55. <div class="w3-light-grey w3-round-xlarge w3-small">
  56. <div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
  57. </div>
  58. <br>
  59.  
  60. <p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Server Chat Language</b></p>
  61. <p>English</p>
  62. <p>You Can Message Your Friends PRIVATELY Using Another Lanuage</p>
  63.  
  64. <div class="w3-light-grey w3-round-xlarge">
  65. </div>
  66. <br>
  67. </div>
  68. </div><br>
  69.  
  70. <!-- End Left Column -->
  71. </div>
  72.  
  73. <!-- Right Column -->
  74. <div class="w3-twothird">
  75.  
  76. <div class="w3-container w3-card w3-white w3-margin-bottom">
  77. <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Data Information</h2>
  78. <div class="w3-container">
  79. <h4 class="w3-opacity"><b>Server Information</b></h4>
  80. <h6><b>Date When The Server Was Released</b></h6>
  81. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>NOT SPECIFIED YET- <span class="w3-tag w3-teal w3-round">Current</span></h6>
  82. <p><b><i>This is the date when Five Pixels 'FP' was released, 'Season I', every one-two months a new season comes out with its own features
  83. <hr>
  84. </div>
  85. <div class="w3-container">
  86. <h5 class="w3-opacity"><b>Countdown For The New Season!</b></h5>
  87. <h5 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>COMING SOON</h5>
  88. <h6><b><i>Season II</i></b></h6>
  89. <p>XXX Days Left Until New Season!!
  90. <hr>
  91. </div>
  92. <div class="w3-container">
  93. <h5 class="w3-opacity"><b>Sneak Peak (Images Or Typing)</b></h5>
  94. <p>Writing</p>
  95. <p><img src="IMAGE"></p>
  96. </div>
  97. </div>
  98.  
  99. <div class="w3-container w3-card w3-white">
  100. <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>
  101. <div class="w3-container">
  102. <h5 class="w3-opacity"><b>W3Schools.com</b></h5>
  103. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6>
  104. <p>Web Development! All I need to know in one place</p>
  105. <hr>
  106. </div>
  107. <div class="w3-container">
  108. <h5 class="w3-opacity"><b>London Business School</b></h5>
  109. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 - 2015</h6>
  110. <p>Master Degree</p>
  111. <hr>
  112. </div>
  113. <div class="w3-container">
  114. <h5 class="w3-opacity"><b>School of Coding</b></h5>
  115. <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 - 2013</h6>
  116. <p>Bachelor Degree</p><br>
  117. </div>
  118. </div>
  119.  
  120. <!-- End Right Column -->
  121. </div>
  122.  
  123. <!-- End Grid -->
  124. </div>
  125.  
  126. <!-- End Page Container -->
  127. </div>
  128.  
  129.  
  130. <!DOCTYPE html>
  131. <html lang="en">
  132. <title>W3.CSS Template</title>
  133. <meta charset="UTF-8">
  134. <meta name="viewport" content="width=device-width, initial-scale=1">
  135. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  136. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
  137. <style>
  138. body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
  139. body {font-size:16px;}
  140. .w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
  141. .w3-half img:hover{opacity:1}
  142. </style>
  143. <body>
  144.  
  145. </div>
  146. </nav>
  147.  
  148. <!-- Top menu on small screens -->
  149. <header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
  150. <a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
  151. <span>Company Name</span>
  152. </header>
  153.  
  154. <!-- Overlay effect when opening sidebar on small screens -->
  155. <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
  156.  
  157. <!-- !PAGE CONTENT! -->
  158. <div class="w3-main" style="margin-left:340px;margin-right:40px">
  159.  
  160. <!-- Header -->
  161. <div class="w3-container" style="margin-top:80px" id="showcase">
  162. <h1 class="w3-jumbo"><b>Five Pixels</b></h1>
  163. <h1 class="w3-xxxlarge w3-text-red"><b>About Me.</b></h1>
  164. <hr style="width:50px;border:5px solid red" class="w3-round">
  165. </div>
  166.  
  167. <!-- Photo grid (modal) -->
  168. <div class="w3-row-padding">
  169. <div class="w3-half">
  170. </div>
  171.  
  172. <p><i>I am a teenager (BEGGINING OF TEEN AGE) who loves Minecraft, I decided to make a Minecraft server where people could enjoy chatting in our discord serrver or ingame, You Can Find About What The Server Does In The Below Paragprahs.</i></p>
  173. <p><b>BY THE WAY</b></P>
  174. None of my classmates know about this :) and it will stay a secret no matter what LOL, I dont know if they will discover what i am doing</p>
  175. </div>
  176.  
  177. <!-- Modal for full size images on click-->
  178. <div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
  179. <span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
  180. <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
  181. <img id="img01" class="w3-image">
  182. <p id="caption"></p>
  183. </div>
  184. </div>
  185.  
  186. <!-- Services -->
  187. <div class="w3-container" id="services" style="margin-top:75px">
  188. <h1 class="w3-xxxlarge w3-text-red"><b>About The Server.</b></h1>
  189. <hr style="width:50px;border:5px solid red" class="w3-round">
  190. <br>
  191. <p>This server is called "Five Pixels", where you start off with basic tools, with these tools you fight mobs in the Generator located in /Warp, as you collect enough loot you visit the market in /Warp, where you can sell the loot you got in order to upgrade your tools to fight harder mobs.</p>
  192. <p>in Season II
  193. there will be a mjor update where the server will be seeing a city which unlocks more adventure if you are bored from killing mobs, in the city you will see a bank where you can sell your mob loot for ingame money, with the money you can buy lands in order
  194. to construct buildings to make the server look nicer.</p>
  195. <p>In Season III there will be a huge update to the server, i cant say much about it FIND OUT ON YOUR OWN!!</p>
  196.  
  197. </div>
  198.  
  199. <!-- Designers -->
  200. <div class="w3-container" id="designers" style="margin-top:75px">
  201. <h1 class="w3-xxxlarge w3-text-red"><b>Staff List.</b></h1>
  202. <hr style="width:50px;border:5px solid red" class="w3-round">
  203. <p>The best team in the world.</p>
  204. <p>We are lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  205. dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
  206. incididunt ut labore et quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  207. </p>
  208. </div>
  209.  
  210. <!-- The Team -->
  211. <div class="w3-row-padding w3-grayscale">
  212. <div class="w3-col m4 w3-margin-bottom">
  213. <div class="w3-light-grey">
  214. <div class="w3-container">
  215. </div>
  216. </div>
  217. </div>
  218. <div class="w3-col m4 w3-margin-bottom">
  219. <div class="w3-light-grey">
  220. <div class="w3-container">
  221. </div>
  222. </div>
  223. </div>
  224. <div class="w3-col m4 w3-margin-bottom">
  225. <div class="w3-light-grey">
  226. <div class="w3-container">
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231.  
  232. <!-- Packages / Pricing Tables -->
  233. <div class="w3-container" id="packages" style="margin-top:75px">
  234. <h1 class="w3-xxxlarge w3-text-red"><b>Packages.</b></h1>
  235. <hr style="width:50px;border:5px solid red" class="w3-round">
  236. <p>Some text our prices. Lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
  237. </div>
  238.  
  239. <div class="w3-row-padding">
  240. <div class="w3-half w3-margin-bottom">
  241. <ul class="w3-ul w3-light-grey w3-center">
  242. <li class="w3-dark-grey w3-xlarge w3-padding-32">Basic</li>
  243. <li class="w3-padding-16">Floorplanning</li>
  244. <li class="w3-padding-16">10 hours support</li>
  245. <li class="w3-padding-16">Photography</li>
  246. <li class="w3-padding-16">20% furniture discount</li>
  247. <li class="w3-padding-16">Good deals</li>
  248. <li class="w3-padding-16">
  249. <h2>$ 199</h2>
  250. <span class="w3-opacity">per room</span>
  251. </li>
  252. <li class="w3-light-grey w3-padding-24">
  253. <button class="w3-button w3-white w3-padding-large w3-hover-black">Sign Up</button>
  254. </li>
  255. </ul>
  256. </div>
  257.  
  258. <div class="w3-half">
  259. <ul class="w3-ul w3-light-grey w3-center">
  260. <li class="w3-red w3-xlarge w3-padding-32">Pro</li>
  261. <li class="w3-padding-16">Floorplanning</li>
  262. <li class="w3-padding-16">50 hours support</li>
  263. <li class="w3-padding-16">Photography</li>
  264. <li class="w3-padding-16">50% furniture discount</li>
  265. <li class="w3-padding-16">GREAT deals</li>
  266. <li class="w3-padding-16">
  267. <h2>$ 249</h2>
  268. <span class="w3-opacity">per room</span>
  269. </li>
  270. <li class="w3-light-grey w3-padding-24">
  271. <button class="w3-button w3-red w3-padding-large w3-hover-black">Sign Up</button>
  272. </li>
  273. </ul>
  274. </div>
  275. </div>
  276.  
  277. <!-- Contact -->
  278. <div class="w3-container" id="Visit The Store" style="margin-top:75px">
  279. <h1 class="w3-xxxlarge w3-text-red"><b>Visit The Server Store.</b></h1>
  280. <hr style="width:225px;border:5px solid red" class="w3-round">
  281. <h4>Copy The Link Below And Paste It In A New Tab</h4>
  282. <br>
  283. <br>
  284. <h1><b>http://fivepixels.buycraft.net/</b></h1>
  285. <br>
  286. <br>
  287. <br>
  288. <br>
  289. <!-- End page content -->
  290. </div>
  291.  
  292. <!-- W3.CSS Container -->
  293.  
  294. <script>
  295. // Script to open and close sidebar
  296. function w3_open() {
  297. document.getElementById("mySidebar").style.display = "block";
  298. document.getElementById("myOverlay").style.display = "block";
  299. }
  300.  
  301. function w3_close() {
  302. document.getElementById("mySidebar").style.display = "none";
  303. document.getElementById("myOverlay").style.display = "none";
  304. }
  305.  
  306. // Modal Image Gallery
  307. function onClick(element) {
  308. document.getElementById("img01").src = element.src;
  309. document.getElementById("modal01").style.display = "block";
  310. var captionText = document.getElementById("caption");
  311. captionText.innerHTML = element.alt;
  312. }
  313. </script>
  314.  
  315. </body>
  316. </html>
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!