daily pastebin goal
49%
SHARE
TWEET

My Blog (HTML/CSS)

a guest Feb 13th, 2018 101 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <head>
  3.   <link href="/normalize.css" rel="stylesheet">
  4.   <style>
  5.     header {
  6.       text-align: center;
  7.       background: url("images/sky.jpg");
  8.       background-size: cover;
  9.       color: #DAE2DE;
  10.     }
  11.     body {
  12.       background: #1D1B22;
  13.       color: #DAE2DE;
  14.       font-family: sans-serif;
  15.     }
  16.     a {
  17.       color: white;
  18.       text-decoration: none;
  19.       -webkit-transition: color .3s;
  20.       transition: color .3s;
  21.     }
  22.     a:hover {
  23.       color: #A1A1BE;
  24.     }
  25.     h1 {
  26.       font-size: 70px;
  27.       text-shadow: 5px 5px 5px black
  28.     }
  29.     h2 {
  30.       letter-spacing: 1px;
  31.       text-shadow: 5px 5px 5px black
  32.     }
  33.     p {
  34.       letter-spacing: 2px;
  35.       text-align: justify;
  36.       text-indent: 50px;
  37.     }
  38.     img {
  39.       margin: 40px 0px 0px 0px;
  40.       border: 7px solid white;
  41.       border-radius: 20px;
  42.       -webkit-transition: opacity .3s;
  43.       transition: opacity .3s;
  44.     }
  45.     img:hover {
  46.       opacity: .7;
  47.     }
  48.     ul {
  49.       padding: 10px;
  50.       background: rgba(0,0,0,0.5);
  51.     }
  52.     li {
  53.       display: inline;
  54.       padding: 0px 10px 0px 10px;
  55.     }
  56.     article {
  57.       max-width: 500px;
  58.       padding: 15px;
  59.       margin: 0 auto;
  60.       border: 2px solid white;
  61.       border-radius: 25px;
  62.       background: #242331
  63.       -webkit-transition: background .5s;
  64.       transition: background .5s;
  65.     }
  66.     article:hover {
  67.       background: #2B2938;
  68.     }
  69.     div {
  70.       padding: 10px;
  71.     }
  72.     @media (max-width: 500px) {
  73.       h1 {
  74.         font-size: 36px;
  75.         padding: 5px;
  76.       }
  77.       li {
  78.         padding: 5px;
  79.         display: block;
  80.       }
  81.     }
  82.   </style>
  83. </head>
  84. <body>
  85.   <header>
  86.     <img src="images/profilepic.jpg" alt="profilepic" width="150" height="150">
  87.     <h1><a href="#">Karine's Blog</a></h1>
  88.     <ul>
  89.       <li><a href="#">About Me</a></li>
  90.       <li><a href="#">Good Poems</a></li>
  91.       <li><a href="#">Better Poems</a></li>
  92.     </ul>
  93.   </header>
  94.   <div>
  95.   <article>
  96.     <h2><a href="#">About Me</a></h2>
  97.     <p>My name is Karine Shaver. I'm a Junior this year, and last year I was the second baseman on the school's softball team. I'm taking this class because coding interests me, and I hope to learn more about making original websites this year.</p>
  98.     <p>Some of my hobbies include playing music, playing video games (Dragon Age), writing, and watching anime.</p>
  99.     <p><a href="#">#about me</a> <a href="#">#CIS111</a>
  100.       <a href="#">#blog</a></p>
  101.     <button onclick="myFunction()">Like</button>
  102.   </article>
  103.   </div>
  104.   <div>
  105.   <article>
  106.     <h2><a href="#">Sartorial synth Echo Park, roof party</a></h2>
  107.     <p>chambray you probably haven't heard of them pour-over viral selvage umami skateboard VHS post-ironic selfies. Wes Anderson gentrify fanny pack twee, bicycle rights bitters blog keffiyeh plaid flannel. Tonx irony cliche sustainable mlkshk bitters. Four loko leggings chambray Vice.</p>
  108.     <p><a href="#">#tag1</a> <a href="#">#tag2</a>
  109.       <a href="#">#tag3</a></p>
  110.     <button onclick="myFunction()">Like</button>
  111.   </article>
  112.   </div>
  113.   <div>
  114.   <article>
  115.     <h2><a href="#">Forage food truck keytar master cleanse</a></h2>
  116.     <p>ethical thundercats sustainable locavore quinoa Neutra. Aesthetic Cosby sweater single-origin coffee, bicycle rights organic lo-fi street art american apparel ennui four loko ethnic Brooklyn small batch. Forage YOLO polaroid</p>
  117.     <p><a href="#">#tag1</a> <a href="#">#tag2</a>
  118.       <a href="#">#tag3</a></p>
  119.     <button onclick="myFunction()">Like</button>
  120.   </article>
  121.   </div>
  122.   <script>
  123.     function myFunction() {
  124.     alert("Liked!");
  125.   }
  126.   </script>
  127. </body>
RAW Paste Data
Top