API tools faq
paste
Advertisement
NeroShade

Shizaya web template (purple,lavender)

NeroShade
Jul 28th, 2017
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.23 KB | None | 0 0
raw download clone embed print report
  1. <---! SHIZAYA WEB TEMPLATE MAIN PAGE -->
  2. <--! Art not mine- coding is mine though -->
  3. <--! NEROSHADE (c) 2017--->
  4. <--! Please do not use commercially. Personal projects only ^v^ as respect for all artists works here :D -->
  5. <--! Contains 15 links button on side , 3 on bottom -->
  6. <html>
  7. <style>
  8.  header {
  9.  width: 100%;
  10.  display: block;
  11.  position: fixed;
  12.  border-top: 1px solid black;
  13.  }
  14.  .backgroundtransa {
  15.  height:100px;
  16.  width: 100%;
  17.  background: url("http://img3.wikia.nocookie.net/__cb3/shizaya/images/5/50/Wiki-background");
  18. overflow:hidden;
  19. background-repeat: repeat-x;
  20. border-bottom: 2px solid white;
  21. }
  22. .innertrans {
  23. max-width:200px;
  24. background-color:rgba(98, 53, 130,0.5);
  25. height:50px;
  26. margin:auto;
  27. outline: 2px solid white;
  28. }
  29. header h1 {
  30. text-align:center;
  31. font-family:"Palatino Linotype", serif;
  32. font-size:28px;
  33. color:white;
  34. }
  35.  
  36.  nav {
  37.   display: inline-block;
  38.  background-color: rgba(98, 53, 130,0.3);
  39.  float:left;
  40.  border: 2px solid white;
  41.  max-width:75px;
  42.  position:fixed;
  43.  
  44.  
  45.  
  46.  }
  47.  ul {
  48.  list-style-type: none;
  49.  margin: 0;
  50.  padding:0;
  51.  display: inline-block;
  52.  padding: 15px  0 0 0;
  53.  }
  54.  li a {
  55.  text-decoration:none;
  56.  color:#522e70;
  57.  }
  58.  
  59.  li a:hover { color:#fff9fd;}
  60.  li
  61.  {
  62.  padding: 0 15px 0 15px;
  63.  font-family: "Palatino Linotype";
  64.  border-bottom: 1px solid white;
  65.  font-weight:bold;
  66.  color:#522e70;
  67.  background: #cdc4ce;
  68.  text-align:center;
  69.  
  70.  }
  71.  
  72.  li:last-child {
  73.  border-bottom:none;
  74.  }
  75.  
  76.  .fix::after {
  77.  content:"";
  78.  clear: both;
  79.  display: table;
  80.  }
  81.  
  82.  .fix {
  83.  background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZvshu2f_wUagRxdiC7hYq0eQIuCkY0etw1OosmL9mUqxZFd9EKQ");
  84.  border-bottom: 1px solid black;
  85.  border-top: 1px solid black;
  86.  outline: 2px solid white;
  87.  width:100%;
  88.  
  89.  }
  90.  li.active {
  91.  background-color: #522e70;
  92.  color:#ede1e9;
  93.  }
  94.  
  95.  li:hover:not(.active) {
  96.   background-color: #522e70;
  97.  color:#fff9fd;
  98.  }
  99.  div.text {
  100.  border-bottom: 2px solid white;
  101.  padding-bottom: 5px;
  102.  background:#563b4d;
  103.  
  104.  
  105.  
  106.  }
  107.  div.text h4 {
  108.  text-align:center;
  109.  background: #fff9fd;
  110.  font-variant:small-caps;
  111.  border-style: ridge double ridge double;
  112.  border-width: 1px 1px 1px 1px;
  113.  border-color: black;
  114.  font-size:28px;
  115.  }
  116.  div.text p{
  117.  text-align:center;
  118.  color:white;
  119.  }
  120.  div.scroll {
  121.  padding-top:
  122.  100px;
  123.  width:100%;}
  124.  
  125.  
  126. div.x {
  127. margin-left: 78px; }
  128.  
  129. div.image {
  130. border: 2px solid black;
  131. outline: 2px solid white;
  132. max-width:545px;
  133. margin:auto;
  134. }
  135. footer {
  136. max-width: 100%;
  137. height: 150px;
  138. background: url("http://img3.wikia.nocookie.net/__cb3/shizaya/images/5/50/Wiki-background");
  139. border: 2px solid black;
  140. outline: 1px solid white;
  141. )
  142. }
  143. summary {
  144. text-align: center;
  145. max-width: 150px;
  146. margin:auto;
  147. color:#522e70;
  148. background: #cdc4ce;
  149. border: 1px solid white;
  150. outline: 2px solid black;
  151. font-variant:small-caps;
  152.  
  153.  
  154. }
  155. details {
  156.  
  157. padding-left: 85px;
  158.  
  159. }
  160. details p {
  161. background: #efe2da;
  162. max-width: 200px;
  163. margin:auto;
  164. border: 1px solid black;
  165. outline: 2px solid white;
  166. z-index:1;
  167. text-align: center;
  168. font-family"Palatino Linotype";
  169. padding: 5px 5px 5px 5px}
  170.  
  171. div.links {
  172. max-width: 200px;
  173. background:#f0eaf7;
  174. margin-left:600px;
  175. margin-top: 10px;
  176. border: 1px solid black;
  177. padding: 5px 0px 5px 0px;
  178. text-align: center;
  179. }
  180.  
  181. div.links span, div.links a{
  182. padding: 5px 5px 5px 5px;
  183. border-right: 2px solid #9474a8;
  184. text-align: center;
  185. font-family:"Palatino Linotype";
  186. font-size:12px;
  187. color: black;
  188. text-decoration: none;
  189. }
  190.  
  191. div.links a:last-child {border-right:none;}
  192.  
  193. div.links span:hover, div.links a:hover { background:white;}
  194.  
  195. body { background: url("http://img02.deviantart.net/9c6f/i/2013/270/6/7/bang___izaya_orihara_by_dango_yullen_soba-d6o4xqw.jpg"); }
  196.  
  197.  
  198.  </style>
  199.  
  200.  
  201.  
  202. <body>
  203.  <header>
  204.  <div class="backgroundtransa">
  205.  <div class="innertrans">
  206.  <h1> Shizaya City </h1>
  207.  </div>
  208.  </div>
  209.  </header>
  210.  <div class="scroll">
  211.  
  212.  <div class="fix">
  213. <div class="over">
  214.  <nav>
  215.  <ul>
  216.  <li class="active"> Home</li>
  217.  <li> <a href="#">Link</a> </li>
  218.  <li> <a href="#">Link</a> </li>
  219.  <li> <a href="#">Link</a>  </li>
  220.  <li> <a href="#">Link</a>  </li>
  221. <li> <a href="#">Link</a>  </li>
  222.  <li> <a href="#">Link</a>  </li>
  223. <li> <a href="#">Link</a>  </li>
  224. <li> <a href="#">Link</a>  </li>
  225. <li> <a href="#">Link</a>  </li>
  226. <li> <a href="#">Link</a>  </li>
  227. <li> <a href="#">Link</a>  </li>
  228. <li> <a href="#">Link</a>  </li>
  229. <li> <a href="#">Link</a>  </li>
  230. <li> <a href="#">Link</a>  </li>
  231. <li> <a href="#">Link</a>  </li>
  232.  
  233. </ul>
  234. </nav>
  235.  </div>
  236.  <div class="x">
  237.  <div class="text">
  238.  <h4> It's a story of twisted love </h4>
  239.  <p> He breathed into his skin and it was cold as always. Like icy sheets wrapped around red warm flesh, it was almost as if he wasn't alive. Living was a burden for a god. He was always bored, he was always on top, inevitably he would soon get bored of being too good.
  240. Even if he tried to fail. He would always, always find ways to make it right. NOw it just came to the point where he stopped caring. In the world of humans he was a god. He was a deity He could do anything he wanted,
  241. and he could get away with it. Everything was boring and plain until that one certain day. At first he thought it was just some feeling that he could discard later on as time passed by but it became persistent and a tingle
  242. crept itself towards his fragile heart. He was scared, terrified probably. In all of the possible candidates he was left with the worst one. Not that he had a choice. It began to pester him day and night and he couldn't do anything about that but pray and hope that it wouldn't come to a point
  243. where he'd have to stop seeing him. To stop talking. To stop pretending. What kind of god holds such secrets in his lowly heart? <br> <br>
  244. It was the worst feeling possible. He was too distant and yet too close. he was testing the cold waters. His skin shedding, his mask breaking. All he wanted and yearned for was acceptance.
  245. He knew that deep inside the hollow pit he called home that he wanted out. That he wanted freedom from the constant self-loathing. He hated himself.That was true. he wasnt joking.
  246. <br>
  247. For a god who always appeared to be on top, he succumbed to go down from heaven and step into human lands. Just because... <b> Helovedhim. </b> </p>
  248.  </div>
  249.  <div class="image">
  250.  <img src="https://s-media-cache-ak0.pinimg.com/236x/d1/1c/e8/d11ce8772476d2e6e5cd43f1e40787be--anime-art-anime-manga.jpg" height="300" width="280">
  251.  <img src="https://s-media-cache-ak0.pinimg.com/736x/fc/05/31/fc053168f6b68dc7d175fdbe3812dafe--cool-anime-guys-anime-boys.jpg" height="300" width="260">
  252.  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbsWzU8jM8OIl_WuZkDnnB3bT8UkaKSBO7AhJ3386jkboFfo0b" height="300"
  253. width="280">
  254.  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHjt6ZJIruhc6lDhAaaMGRK1VgMVZ8dA2YvIgGTsnwKsWgYv7LaA" height="300" width="260">
  255.   </div>
  256.   </div>
  257.   </div>
  258.  
  259.   <footer>
  260.   <details> <summary> Nero-shade &copy; 2017 </summary>  <p> <a href="http://www.nero-shade.deviantart.com">WEBSITE</a> <br>
  261.   <strong>You must know, I really love shizaya. Is editable, just don't remove base credit.</strong></details>
  262.   <div class="links"> <a href="#">Link one</a> <a href="#"> Link 2 </a> <a href= "#"> Link 3</a> </div></footer>
  263.   </div>
  264.   </body>
  265.   </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!