API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 24th, 2018
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.61 KB | None | 0 0
raw download clone embed print report
  1. HTML / index.html
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>WAG-8</title>
  6.     <link rel="stylesheet" href="style.css">
  7.     <link rel="stylesheet" href="responsive.css">
  8. </head>
  9. <body>
  10.  
  11. <section class="grid" id="one">
  12.     <img id="logo" src="">
  13. </section>
  14.  
  15. <section class="grid" id="one_3">
  16.     <img id="logo_3" src="logo.png">
  17. </section>
  18.  
  19. <section class="grid"  id="two">
  20.     <div class="hover_img">
  21.         <a href="one.html">1<div><img id="img1" src="img/one.jpg" alt="image" /><h4>Le Pisteur</h4></div></a>
  22.     </div>
  23. </section>
  24.  
  25. <section class="grid" id="three">
  26.     <div class="hover_img">
  27.         <a href="#">7<div><img id="img7" src="img/seven.jpg" alt="image" /><h4>Coming Soon</h4></div></a>
  28.     </div>
  29. </section>
  30.  
  31.  
  32. <section class="grid" id="four">
  33.     <div class="hover_img">
  34.         <a href="two.html">2<div><img id="img2" src="img/two.jpg" alt="image" /><h4>The 8x11x16 Bag</h4></div></a>
  35.     </div>
  36. </section>
  37.  
  38.  
  39. <section class="grid" id="five">
  40.     <div class="hover_img">
  41.         <a href="five.html">5<div><img id="img5" class="image" src="img/five.jpg" alt="image" /><h4>The Falling Water Shirt</h4></div></a>
  42.         <section id="five_eight"></section>
  43.         <a href="#">8<div><img id="img8" src="img/eight.jpg" alt="image" /><h4 id="five_2">Under Development</h4></div></a>
  44.     </div>
  45. </section>
  46.  
  47. <section class="grid" id="six">
  48.     <h1></h1>
  49. </section>
  50.  
  51. <section class="grid" id="seven">
  52.     <div class="hover_img">
  53.         <a href="four.html">4<div><img id="img4" src="img/four.jpg" alt="image" /><h4>The Uniform Jacket</h4></div></a>
  54.     </div>
  55. </section>
  56.  
  57. <section class="grid" id="eight">
  58.     <div class="hover_img">
  59.         <a href="#">(0)<div><img id="img0" src="img/zero.jpg" alt="image" /></div></a>
  60.     </div>
  61. </section>
  62.  
  63. <section class="grid" id="nine">
  64.     <div class="hover_img">
  65.         <a href="six.html">6<div><img id="img6" src="img/six.jpg" alt="image" /><h4>The Japanese Oversized Trench</h4></div></a>
  66.         <section id="img6"></section>
  67.     </div>
  68. </section>
  69.  
  70. <section class="grid" id="ten">
  71.     <div class="hover_img">
  72.         <a href="three.html">3<div><img id="img3" src="img/three.jpg" alt="image" /><h4>The Florentine Jacket</h4></div></a>
  73.     </div>
  74. </section>
  75. <section class="grid" id="eleven">
  76.     <section class="about">
  77.         <a href="index.html"><h3 id="close"></h3></a>
  78.  
  79.         <h3 id="object"></h3>
  80.  
  81.         <a href="#"><h3 id="store">Store</h3></a>
  82.         <a href="about.html"><h3 id="about">About|</h3></a>
  83.         </section>
  84.         </section>
  85.  
  86.     <section class="grid_resp">
  87.         <img id="logo_resp" src="logo.png">
  88.     </section>
  89.  
  90.  
  91.     <section class="grid_resp">
  92.         <a href="one.html">1<span><h4>Le Pisteur</h4></span></a>
  93.     </section>
  94.  
  95.     <section class="grid_resp">
  96.         <a href="two.html">2<span><h4>The 8x11x16 Bag</h4></span></a>
  97.     </section>
  98.     <section class="grid_resp">
  99.         <a href="three.html">3<span><h4>The Florentine Jacket</h4></span></a>
  100.     </section>
  101.     <section class="grid_resp">
  102.         <a href="four.html">4<span><h4>The Uniform Jacket</h4></span></a>
  103.     </section>
  104.     <section class="grid_resp">
  105.         <a href="five.html">5<span><h4>The Uniform Jacket</h4></span></a>
  106.     </section>
  107.     <section class="grid_resp">
  108.         <a href="six.html">6<span><h4>The Japanese Oversized Trench</h4></span></a>
  109.     </section>
  110.     <section class="grid_resp">
  111.         <a href="#">7<span><h4>Coming Soon</h4></span></a>
  112.     </section>
  113.     <section class="grid_resp">
  114.         <a href="#">8<span><h4>Coming Soon</h4></span></a>
  115.     </section>
  116.     <section class="grid_resp">
  117.         <a href="one.html">(0)<span><h4></h4></span></a>
  118.     </section>
  119.  
  120. </section>
  121.  
  122. </body>
  123. </html>
  124.  
  125.  
  126.  
  127. CSS / style.css
  128. body {
  129.     padding-top: 40px;
  130.     -webkit-font-smoothing: antialiased;
  131.     -moz-osx-font-smoothing: grayscale;
  132. }
  133.  
  134. img {
  135.     width:400px;
  136.     z-index: -99999 !important;
  137. }
  138.  
  139. #logo {
  140.  
  141. }
  142.  
  143. @font-face {
  144.     font-family: blairbold;
  145.     src: url(BlairBold.ttf);
  146. }
  147.  
  148. @font-face {
  149.     font-family: atlasreg;
  150.     src: url(AtlasTypewriter-Regular.otf);
  151. }
  152.  
  153. @font-face {
  154.     font-family: atlasbold;
  155.     src: url(AtlasTypewriter-Bold.otf);
  156. }
  157.  
  158. a {
  159.     font-family: blairbold;
  160.     text-decoration: none;
  161.     color: #000;
  162.     font-size: 100pt;
  163.     z-index: 999999 !important;
  164. }
  165.  
  166. p {
  167.     font-family: atlasreg;
  168.     text-transform: uppercase;
  169. }
  170.  
  171. h2 {
  172.     transform: rotate(-90deg);
  173.     font-size: 12px;
  174.     position: relative;
  175.     margin-right:50px;
  176.     color: #fff;
  177.     z-index: 99999;
  178.  
  179. }
  180.  
  181. a h3, h3 {
  182.     font-family: atlasbold;
  183.     transform: rotate(-90deg);
  184.     font-size:12pt;
  185.     padding-top:25px;
  186.     text-transform: uppercase;
  187.     z-index: 99999;
  188.     position: fixed;
  189. }
  190.  
  191. h4 {
  192.     font-size: 14px;
  193.     width: 400px;
  194.     text-align: left;
  195.     font-family: atlasreg;
  196.     text-transform: uppercase;
  197. }
  198.  
  199. .whitetext {
  200.     color: #fff;
  201. }
  202.  
  203.  
  204. .image {
  205.     z-index: -100;
  206. }
  207.  
  208. #back {
  209.     color: #000;
  210. }
  211.  
  212. #landing a h2 {
  213.     color: white !important;
  214. }
  215.  
  216. .grid {
  217.     display: block;
  218.     width: 9%;
  219.     height: 100%;
  220.     float: left;
  221. }
  222.  
  223. #grid_about {
  224.     display: block;
  225.     width: 9.09%;
  226.     height: 100%;
  227.     float: left;
  228. }
  229.  
  230. .grid_click_1 {
  231.     display: block;
  232.     width: 50%;
  233.     float: left;
  234.     display: block;
  235.     padding-bottom: 20px;
  236. }
  237.  
  238. .grid_click_2 {
  239.     display: block;
  240.     width: 50%;
  241.     float: right;
  242.     padding-bottom: 20px;
  243. }
  244.  
  245. .grid_click_3 {
  246.     width: 100% !important;
  247.     display: block;
  248.     float: left;
  249. }
  250.  
  251. .grid_click_1 img, .grid_click_2 img {
  252.     position: relative !important;
  253. }
  254.  
  255.  
  256. #eleven {
  257.     z-index: 9999;
  258. }
  259.  
  260. #grid_click {
  261.     display: block;
  262.     width: 81%;
  263.     height: 100%;
  264.     float: left;
  265. }
  266.  
  267. #grid_click_about {
  268.     display: block;
  269.     width: 9.09%;
  270.     padding-top: 30%;
  271. }
  272.  
  273. #grid_back {
  274.     display: block;
  275.     width: 9%;
  276.     height: 50%;
  277.     float: left;
  278. }
  279.  
  280. #grid_back_index {
  281.     display: block;
  282.     width: 9.09%;
  283.     height: 50%;
  284.     float: left;
  285.     color: white!important;
  286. }
  287.  
  288. #logo {
  289.     z-index: 99999!important;
  290.     padding-top: 200%;
  291.     width: 50%;
  292.     padding-left: 28%;
  293.     position: relative !important;
  294. }
  295.  
  296. #logo_2 {
  297.     z-index: 99999!important;
  298.     padding-top: 17.7%;
  299.     width: 5.05%;
  300.     margin-left: -27.1px!important;
  301.     position: fixed !important;
  302. }
  303.  
  304. #logo_3 {
  305.     z-index: 99999!important;
  306.     padding-top: 17.5%;
  307.     width: 3%;
  308.     margin-left: -120px!important;
  309.     position: fixed !important;
  310. }
  311.  
  312. #logo_click {
  313.     padding-top: 200%;
  314.     width: 50%;
  315.     padding-left: 28%;
  316.     position: relative !important;
  317. }
  318.  
  319. #close {
  320.     margin-top: -10px !important;
  321.     left: 93.4%;
  322. }
  323.  
  324. #object {
  325.     top: 40%;
  326.     width:160px;
  327.     left: 90%;
  328. }
  329.  
  330. #object_click {
  331.     top: 40%;
  332.     width:160px;
  333.     left: 91.5%;
  334. }
  335.  
  336. .object_click {
  337.     margin-top:2px;
  338.     right:-3px;
  339. }
  340. #eleven_click {
  341.     right: -100px !important;
  342. }
  343.  
  344. #about {
  345.     text-align: left;
  346.     top: 86%;
  347.     left: 94%;
  348. }
  349.  
  350. #store {
  351.     top: 79%;
  352.     left: 94.1%;
  353. }
  354.  
  355. #store_link {
  356.     padding-bottom: 50px;
  357.     font-size: 15px;
  358.     width: 100%;
  359.     float: left;
  360. }
  361.  
  362. .about img {
  363.     width:100%;
  364. }
  365.  
  366. #store {
  367.     padding-left: 5px !important;
  368. }
  369.  
  370. #one_logo {
  371.     position: fixed;
  372. }
  373.  
  374. #one {
  375.     width: 9;
  376. }
  377.  
  378. #two {
  379.     font-size: 32pt;
  380. }
  381.  
  382.     #two h4 {
  383.         margin-top:470px;
  384.         padding-left: 100px;
  385.     }
  386.  
  387. #three {
  388.     margin-top: 35%;
  389.     font-size: 32pt;
  390. }
  391.  
  392.     #three h4 {
  393.         margin-top:-20px !important;
  394.     }
  395.  
  396. #four {
  397.     font-size: 32pt;
  398. }
  399.  
  400.     #four h4 {
  401.         margin-top:-35px !important;
  402.         padding-left: 120px;
  403.     }
  404.  
  405. #five {
  406.     margin-top:18%;
  407.     font-size: 32pt;
  408. }
  409.  
  410.     #five h4 {
  411.         margin-top:255px !important;
  412.         margin-left: -50px;
  413.     }
  414.  
  415.     #five_eight h4 {
  416.         margin-top: -700px;
  417.     }
  418.  
  419. #seven {
  420.     margin-top:15%;
  421.     font-size: 32pt;
  422. }
  423.     #seven h4 {
  424.         margin-top:190px;
  425.     }
  426.  
  427. #eight {
  428.     margin-top: 40%;
  429.     font-size: 32pt;
  430. }
  431.  
  432.     #eight h4 {
  433.         margin-top:-550px;
  434.     }
  435.  
  436. #nine {
  437.     margin-top: 30.5%;
  438.     font-size: 32pt;
  439. }
  440.  
  441.     #nine h4 {
  442.         margin-top:-175px !important;
  443.         margin-left: -60px !important;
  444.     }
  445.  
  446.     #nine a {
  447.         z-index: 99999 !important;
  448.     }
  449.  
  450. #ten {
  451.     font-size: 32pt;
  452. }
  453.  
  454.     #ten h4 {
  455.         margin-top:375px;
  456.         margin-left: -175px;
  457.         width: 300px;
  458.     }
  459.  
  460. /* First Image */
  461.  
  462. #imagetwo, #imagethree {   
  463.     display: none;
  464. }
  465.  
  466. #two:hover #imagetwo {
  467.  display: block;
  468. }
  469.  
  470. #two:hover {
  471.     font-size: 0;
  472. }
  473.  
  474. /* First Image */
  475.  
  476. #imagetwo, #imagethree {   
  477.     display: none;
  478. }
  479.  
  480. #two:hover #imagetwo {
  481.  display: block;
  482. }
  483.  
  484. #two:hover {
  485.     font-size: 0;
  486. }
  487.  
  488. .hover_img a { position:relative; }
  489. .hover_img a div {
  490.     position:absolute;
  491.     display:none;
  492.     bottom: 100%;
  493. }
  494. .hover_img a:hover div { display:block;     z-index: -999; }
  495.  
  496. #img1 {
  497.     margin-left: 100px!important;
  498. }
  499.  
  500. #img3 {
  501.     margin-left: -150px;
  502.     position: fixed;
  503.     z-index: -9999 !important;
  504. }
  505.  
  506. #img4 {
  507. }
  508.  
  509. #img6 {
  510.  
  511.         margin-left: 40px !important;
  512.     z-index: -99999;
  513. }
  514.  
  515. #img0 {
  516.     position: relative;
  517.     float: left;
  518.     margin-left: -250px;
  519.     z-index: -99999 !important;
  520. }
  521.  
  522. #img7 {
  523. }
  524.  
  525. #img8 {
  526.     margin-right: -500px !important;
  527. }
  528.  
  529. #img5 {
  530.     z-index: 99999;
  531. }
  532.  
  533. #img2 {
  534.     position: relative;
  535.     margin-right: -540px;
  536.     z-index: -99999999;
  537. }
  538.  
  539. #five_eight {
  540.     padding-bottom: 150px;
  541. }
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!