Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>wwwBasic</title>
  </head>
​
  <body>
    <div id="logo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    
    <h1>wwwBasic</h1>
    
    <p>Bacon ipsum dolor amet shankle sausage bresaola pancetta landjaeger, shank ribeye pig spare ribs ball tip alcatra bacon. Andouille burgdoggen sirloin strip steak fatback jerky boudin buffalo pork chop filet mignon. Chicken pancetta short loin beef. Meatloaf pork loin fatback, tail picanha sirloin landjaeger swine sausage bresaola venison. Bresaola turducken alcatra andouille beef ribs. Tri-tip pastrami landjaeger, andouille doner kielbasa corned beef pork chop chuck strip steak cupim tail biltong pork belly spare ribs. Pork belly sirloin leberkas short ribs, short loin ball tip strip steak picanha.</p>
    <p>Short ribs flank rump ground round, bacon short loin capicola bresaola beef cupim filet mignon brisket doner t-bone. Meatball shankle salami, biltong pancetta pastrami ball tip alcatra bacon pork belly filet mignon sirloin fatback. Alcatra pork frankfurter meatball, jowl tri-tip jerky filet mignon ham shankle flank pork chop hamburger doner burgdoggen. Shank salami chicken kevin beef shoulder pancetta tri-tip. Venison pork loin frankfurter, swine pork chop beef buffalo porchetta short ribs t-bone fatback. Frankfurter kielbasa beef ribs pork chop biltong chuck meatloaf chicken ham drumstick kevin rump. Ham hock prosciutto landjaeger fatback tri-tip pancetta shoulder swine sausage filet mignon burgdoggen.</p>
    <p>Alcatra filet mignon buffalo sirloin, chuck pig meatball pork loin shankle pork belly drumstick. Jowl landjaeger short ribs porchetta. Sausage shankle picanha, tail spare ribs doner tenderloin drumstick shank meatloaf turkey turducken andouille hamburger. Doner beef ribs rump turducken capicola, short loin pork belly drumstick boudin turkey pork. Ham chicken cupim brisket pork belly, boudin tongue filet mignon burgdoggen pig bacon swine sausage. Chuck tail short ribs ham ground round ham hock spare ribs, swine capicola pig buffalo pork chop pastrami. Salami pork belly chicken, alcatra porchetta ham hock spare ribs.</p>
    <p>Ribeye tongue capicola t-bone beef alcatra, tenderloin buffalo drumstick ground round jowl. Kevin ham spare ribs tongue, beef ribs venison picanha tenderloin chicken doner pig. Andouille tri-tip doner, short ribs leberkas landjaeger picanha burgdoggen. Strip steak ham beef ribs pork drumstick, kevin cupim tri-tip ribeye buffalo prosciutto cow. Shank pork loin porchetta prosciutto kevin, bresaola tail tenderloin ground round pork chop buffalo salami meatball.</p>
    <p>Meatball burgdoggen picanha, ball tip short ribs brisket flank drumstick prosciutto jowl filet mignon kevin porchetta. Meatball chuck pig, ribeye frankfurter pork belly rump turkey tongue sirloin short loin. Bacon pork chop burgdoggen ham hock ham pancetta shoulder chuck drumstick beef ribs swine beef rump tongue cow. Tongue sirloin hamburger beef ribs turducken burgdoggen pork brisket pig meatball corned beef ground round porchetta. Pork sirloin hamburger tri-tip, chicken beef pork chop jowl spare ribs. Turducken brisket porchetta, doner venison bacon corned beef rump t-bone shankle alcatra pork belly tail swine beef ribs. Pig bacon chuck, pork belly sausage andouille prosciutto venison.</p>
  </body>
</html>
 
:root {
  --color1: #006FFF;
  --color2: #009BFF;
  --logoBitSize: 20px;
}
​
* {
  box-sizing: border-box;
}
​
html {
  height: 100%;
}
​
body {
  max-height: 100%;
  margin: 0;
  padding: 10px 30px 0 30px;
  
  background-color: var(--color2);
  font-family: sans-serif;
  color: #FFF;
}
​
body::before {
  content: '';
  
  position: fixed;
  left: calc(100% - 100vw);
  top: 0;
  z-index: -1;
  
  border-top: 50vw solid var(--color1);
  border-left: 50vw solid var(--color1);
  border-right: 50vw solid transparent;
  border-bottom: 50vw solid transparent;
}
​
h1 {
  font-size: 70px;
}
​
#logo {
  content: '';
​
  position: absolute;
  right: 0;
  top: 0;
​
  width: calc(10 * var(--logoBitSize));
  height: calc(10 * var(--logoBitSize));
​
  background-color: white;
​
  transform-origin: right top;
  transform: rotateZ(45deg);
}
​
#logo > div {
  position: absolute;
  width: calc(2 * var(--logoBitSize));
  height: var(--logoBitSize);
}
#logo > div:nth-child(even) {
  background-color: var(--color1);
}
#logo > div:nth-child(odd) {
  background-color: var(--color2);
}
#logo > div:nth-child(3) {
  width: var(--logoBitSize);
}
#logo > div:nth-child(3) ~ div {
  width: var(--logoBitSize);
  height: calc(2 * var(--logoBitSize));
}
#logo > div:nth-child(1) {
  left: calc(4 * var(--logoBitSize));
  bottom: calc(1 * var(--logoBitSize));
}
#logo > div:nth-child(2) {
  left: calc(5 * var(--logoBitSize));
  bottom: calc(2 * var(--logoBitSize));
}
#logo > div:nth-child(3) {
  left: calc(6 * var(--logoBitSize));
  bottom: calc(3 * var(--logoBitSize));
}
#logo > div:nth-child(4) {
  left: calc(7 * var(--logoBitSize));
  bottom: calc(3 * var(--logoBitSize));
}
#logo > div:nth-child(5) {
  left: calc(8 * var(--logoBitSize));
  bottom: calc(4 * var(--logoBitSize));
}
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers