Blog Concept 2

Ideas * Could perhaps have the image aside be a video. The containing div will play only a slither of the video shot on a phone in a vertical mode. The video inside will be centered. Height of the video will be restricted to the fixed height of the div. The width will not be constrained, but rather you will only see a certain amount. Or it could be a gif of that same video, cropped down to fit the container. What is a blog concept 2 How do you make a blog concept 2? This script and codes were developed by Juan Gallardo on 22 October 2021, Friday.

How do I make an blog concept 2?
  1. Blog Concept 2 Previews
  2. Blog Concept 2 HTML Codes
  3. Blog Concept 2 CSS Codes
Blog Concept 2 Previews

Blog Concept 2 HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Blog Concept 2 </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrapper">
  <div class="container">
    
    <div class="content">
      <h1>
        <a href="/">DOGE</a>
      </h1>
    
      <ul class="posts">
        <li>
          <h5>February 14, 2014</h5>
          <hr>
          <div class="postContent">
            <h2>Keep Watch on Doge Coin</h2>
            <p>Literally trust fund Helvetica dreamcatcher selfies. Pinterest aesthetic organic Echo Park artisan meggings tousled Tumblr, Pitchfork gentrify raw denim yr you probably haven't heard of them banjo. Street art Wes Anderson ethnic ethical authentic, High Life swag ennui. Wolf cardigan fingerstache gentrify, PBR&B cray XOXO vegan deep v tote bag ethnic. Banh mi you probably haven't heard of them seitan meh Austin iPhone. High Life wolf Tonx, dreamcatcher lo-fi seitan ethnic pop-up fingerstache whatever. Trust fund Portland ethnic church-key, Tumblr squid hoodie dreamcatcher +1 seitan.</p>
            <p>Etsy PBR church-key twee Wes Anderson. Authentic beard blog, irony occupy deep v ugh retro cred Portland. YOLO 3 wolf moon keytar, authentic pork belly pug Wes Anderson hoodie artisan before they sold out. Food truck selfies typewriter ethnic shabby chic Banksy, drinking vinegar salvia Truffaut YOLO DIY Williamsburg Marfa sustainable. Shabby chic VHS Truffaut ennui seitan locavore. High Life bitters dreamcatcher before they sold out beard, seitan pork belly. Kogi American Apparel cardigan, pug Marfa put a bird on it Truffaut artisan hella Schlitz mixtape.</p>
            
            <div class="notes">
              <a href="#">
                666 notes
              </a>
              <a href="#">
                Permalink
              </a>
            </div> <!--/ .notes -->
            
          </div>
        </li>
      </ul>
    
    </div>
  
    <aside>
      <div class="banner"></div>
    </aside>
  
  </div>
</div>
  
  
</body>
</html>

Blog Concept 2 CSS Codes

/* == resets == */
body { margin: 0; padding: 0;}
/* == project == */
body {
  border-top: 3px #333 solid;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  color: rgb(34,34,34);
}
p {
  font-size: 17px;
  line-height: 1.5;
}
hr { 
  color: rgb(170, 170, 170);
}
.wrapper {
  
}
.container {
  max-width: 720px;
  margin: 0 auto;
}
h1 {
  font-size: 50px;
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}
h1 a { 
  color: rgb(18, 18, 18);
  text-decoration: none;
}

aside {
  min-width: 20%;
  float:right;
  padding-left: 3px;
}
aside .banner {
  width: 144px;
  height: 568px;
  background: #333;
}
/* for testing only */
aside .banner {
  background-image: url('http://24.media.tumblr.com/7b4a4370f39162bc29afd3e111078613/tumblr_mphzkjU2yg1qcnxbbo1_500.jpg');
  background-position: -219px 0;
  background-repeat:no-repeat;
}

.content {
  float: left;
  width: 76%;
}

.posts { list-style-type: none; }

.posts h5 {
  color: rgb(170, 170, 170);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}
h2{
  color: rgb(53, 53, 53);
  font-size: 24px;
  letter-spacing: 0.13px;
}

.notes { margin: 0px; }
.notes a {
  color: rgb(170,170,170);
  font-size: 11px;
  line-height: 1.5;  
  margin: 4px;
}

@media (max-width: 580px) {
  .content { 
    width: 100%; 
  }
  .posts { 
    padding: 0 18px; 
  }
  aside { 
    width: 100%; 
  }
  .banner {
    margin-left: 22px; 
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.