Skip to content

Commit

Permalink
Did Responsives Adjustments into a Bootstrap Project
Browse files Browse the repository at this point in the history 
Close #21
  • Loading branch information
@Riverfount
Riverfount committed Mar 4, 2019
1 parent da465d3 commit e504656
Showing 1 changed file with 143 additions and 115 deletions.
258 changes: 143 additions & 115 deletions bootstrap4/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,131 +43,159 @@ <h1><a href="index.html" class="navbar-brand"><img src="img/40x40.png" alt="Bran
</div>
</form>
<h2>Most read articles</h2>
<div class="card">
<div class="card-body">
<img src="img/80x80.png" alt="">
<h3 class="card-title h5"><a href="article.html">Article Heading</a></h3>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit semper ullamcorper mus, nam ridiculus leo id
donec lacus at tempus.
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<img src="img/80x80.png" alt="">
<h3 class="card-title h5"><a href="article.html">Article Heading</a></h3>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit semper ullamcorper mus, nam ridiculus leo
id
donec lacus at tempus.
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<img src="img/80x80.png" alt="">
<h3 class="card-title h5"><a href="article.html">Article Heading</a></h3>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit semper ullamcorper mus, nam ridiculus leo id
donec lacus at tempus.
<div class="col-12 col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<img src="img/80x80.png" alt="">
<h3 class="card-title h5"><a href="article.html">Article Heading</a></h3>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit semper ullamcorper mus, nam ridiculus leo
id
donec lacus at tempus.
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<img src="img/80x80.png" alt="">
<h3 class="card-title h5"><a href="article.html">Article Heading</a></h3>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit semper ullamcorper mus, nam ridiculus leo id
donec lacus at tempus.
<div class="col-12 col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<img src="img/80x80.png" alt="">
<h3 class="card-title h5"><a href="article.html">Article Heading</a></h3>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit semper ullamcorper mus, nam ridiculus leo
id
donec lacus at tempus.
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<img src="img/80x80.png" alt="">
<h3 class="card-title h5"><a href="article.html">Article Heading</a></h3>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit semper ullamcorper mus, nam ridiculus leo id
donec lacus at tempus.
<div class="col-12 col-sm-6 col-lg-3">
<div class="card">
<div class="card-body">
<img src="img/80x80.png" alt="">
<h3 class="card-title h5"><a href="article.html">Article Heading</a></h3>
<div class="card-text">
Lorem ipsum dolor sit amet consectetur adipiscing elit semper ullamcorper mus, nam ridiculus leo
id
donec lacus at tempus.
</div>
</div>
</div>
</div>
</div>
<h2>Categories</h2>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque scelerisque
porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim convallis. Porta sociis
litora enim molestie posuere dis scelerisque, ridiculus nisl vitae rutrum natoque primis lobortis phasellus,
turpis dictumst ante faucibus blandit class.
</p>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h3 class="h5"><a href="category.html">Category Heading</a></h3>
<p>
Dapibus eget praesent facilisi sagittis litora malesuada nostra velit fusce, senectus pellentesque
scelerisque porta hac aliquam dis accumsan aliquet, luctus tellus vel sociosqu inceptos donec enim
convallis.
</p>
</div>

</div>
<footer class="small bg-light">
<div class="container">
Expand Down

0 comments on commit e504656

Please sign in to comment.