Added left class to all images
This commit is contained in:
parent
2a2951461d
commit
2c72ee76c0
|
|
@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
|
|
@ -36,8 +36,8 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
|
|
@ -50,6 +50,6 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
<img class="col one" src="/img/11.jpg"/>
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
|
|
@ -36,20 +36,20 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</div>
|
||||
|
||||
|
||||
<br/><br/><br/>
|
||||
<br/><br/>
|
||||
|
||||
|
||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
<img class="col one" src="/img/11.jpg"/>
|
||||
</div>
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
</div>
|
||||
|
|
@ -19,15 +19,15 @@ To give your project a background in the portfolio page, just add the img tag to
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
|
|
@ -37,20 +37,21 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</div>
|
||||
|
||||
|
||||
<br/><br/><br/>
|
||||
<br/><br/>
|
||||
|
||||
|
||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
<img class="col one" src="/img/11.jpg"/>
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
|
|
@ -36,20 +36,21 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</div>
|
||||
|
||||
|
||||
<br/><br/><br/>
|
||||
<br/><br/>
|
||||
|
||||
|
||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
<img class="col one" src="/img/11.jpg"/>
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
|
|
@ -36,20 +36,21 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</div>
|
||||
|
||||
|
||||
<br/><br/><br/>
|
||||
<br/><br/>
|
||||
|
||||
|
||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
<img class="col one" src="/img/11.jpg"/>
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@ To give your project a background in the portfolio page, just add the img tag to
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
|
|
@ -36,17 +36,20 @@ You can also put regular text between your rows of images. Say you wanted to wri
|
|||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
</div>
|
||||
<div class="col three caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</div>
|
||||
|
||||
|
||||
<br/><br/>
|
||||
|
||||
|
||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col two" src="/img/6.jpg"/>
|
||||
<img class="col one" src="/img/11.jpg"/>
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue