Skip to content

Instantly share code, notes, and snippets.

@thinsoldier

thinsoldier/index.html

Last active November 29, 2018 21:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thinsoldier/f7e4952c83d89c2f19f1ae0b6855b454 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thinsoldier/f7e4952c83d89c2f19f1ae0b6855b454 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thinsoldier revised this gist Nov 29, 2018. 2 changed files with 38 additions and 42 deletions.
    18 changes: 5 additions & 13 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,20 +2,12 @@
    <div class="box big-box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/11/Minecraft-Pillager-Outpost.jpg);">
    <h2>Minecraft 1.14: Pillager Outpost seed</h2>
    </div>
    <div class="container-2">
    <div class="section">
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/10/Minecraft-Bamboo-Jungle-1.jpg);">
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/10/Minecraft-Bamboo-Jungle-1.jpg);">
    <h2>Minecraft 1.14 Bamboo Jungle Seed – The first ever bamboo forest seed for 1.14!</h2></div>
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/09/Minecraft-1.13-Shaders-Comparison.jpg);">
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/09/Minecraft-1.13-Shaders-Comparison.jpg);">
    <h2>Best shaders for Minecraft 1.13 Java (2018)</h2></div>
    </div>
    <div class="section">
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/09/Dimmer-Android-screen-than-minimum.jpg);">
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/09/Dimmer-Android-screen-than-minimum.jpg);">
    <h2>How to make your Android screen dimmer or darker than minimum</h2></div>
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/07/The-best-Reddit-app-alternatives.jpg);">
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/07/The-best-Reddit-app-alternatives.jpg);">
    <h2>The best Reddit app alternatives of 2018 (Android)</h2></div>
    </div>
    </div>
    </div>


    </div>
    62 changes: 33 additions & 29 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,54 +1,58 @@
    * { box-sizing: border-box; }
    html, body { margin:0; padding:0; }

    /* wraps the entire thing */
    .container-1 {
    display: flex;
    max-width: 1170px;
    flex-direction: column;
    margin: 0 auto;
    }

    @media screen and (min-width: 360px){
    .section{
    display: flex;
    }
    display: grid;
    grid-auto-rows: 200px;
    grid-gap: 5px;
    }

    .box {
    flex:1;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    color: white;
    margin: 0 5px 5px 0;
    display:flex;
    align-items: flex-end; /* push text to the bottom */
    padding: 0 0 10px 10px;
    }

    .box:nth-child(2) {
    /* Remove right margin on every even numbered box child*/
    margin-right: 0;
    color: white;
    font-size: 22px;

    /* push text to the bottom */
    display:flex;
    align-items: flex-end;
    }

    .big-box { /* enhances .box */
    min-height: 380px;
    background-size: cover;
    background-position: center;
    grid-row: 1 / span 2;
    font-size: 32px;
    }

    .box > h2 { /* only applies to h2 that are children of .box */
    margin:0;
    color:white;
    font-weight: normal;
    font-size: 22px;
    font-size: inherit;
    text-shadow: 0px 0px 2px black, 0px 0px 5px black;
    }

    @media screen and (min-width: 360px){
    .container-1 {
    grid-template-columns: repeat(2,1fr);
    }
    .big-box {
    grid-column: 1 / -1;
    grid-row: 1;
    }
    }

    @media screen and (min-width: 768px){
    .container-1{
    flex-direction: row;
    }
    .big-box, .container-2 {
    flex: 1;
    max-width: 1170px;
    margin: auto;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,200px);
    }

    .big-box {
    grid-row: 1 / span 2;
    grid-column: 1 / span 2;
    }
    }
  2. thinsoldier created this gist Nov 29, 2018.
    21 changes: 21 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <div class="container-1">
    <div class="box big-box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/11/Minecraft-Pillager-Outpost.jpg);">
    <h2>Minecraft 1.14: Pillager Outpost seed</h2>
    </div>
    <div class="container-2">
    <div class="section">
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/10/Minecraft-Bamboo-Jungle-1.jpg);">
    <h2>Minecraft 1.14 Bamboo Jungle Seed – The first ever bamboo forest seed for 1.14!</h2></div>
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/09/Minecraft-1.13-Shaders-Comparison.jpg);">
    <h2>Best shaders for Minecraft 1.13 Java (2018)</h2></div>
    </div>
    <div class="section">
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/09/Dimmer-Android-screen-than-minimum.jpg);">
    <h2>How to make your Android screen dimmer or darker than minimum</h2></div>
    <div class="box" style="background-image:url(https://tech-ranking.a2hosted.com/wp-content/uploads/2018/07/The-best-Reddit-app-alternatives.jpg);">
    <h2>The best Reddit app alternatives of 2018 (Android)</h2></div>
    </div>
    </div>
    </div>


    7 changes: 7 additions & 0 deletions jere-css-grid-demo.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    jere - css grid demo
    --------------------


    A [Pen](https://codepen.io/thinsoldier/pen/aQQrVQ) by [thinsoldier](https://codepen.io/thinsoldier) on [CodePen](https://codepen.io).

    [License](https://codepen.io/thinsoldier/pen/aQQrVQ/license).
    54 changes: 54 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    * { box-sizing: border-box; }

    /* wraps the entire thing */
    .container-1 {
    display: flex;
    max-width: 1170px;
    flex-direction: column;
    margin: 0 auto;
    }

    @media screen and (min-width: 360px){
    .section{
    display: flex;
    }
    }

    .box {
    flex:1;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    color: white;
    margin: 0 5px 5px 0;
    display:flex;
    align-items: flex-end; /* push text to the bottom */
    padding: 0 0 10px 10px;
    }

    .box:nth-child(2) {
    /* Remove right margin on every even numbered box child*/
    margin-right: 0;
    }

    .big-box { /* enhances .box */
    min-height: 380px;
    background-size: cover;
    background-position: center;
    }

    .box > h2 { /* only applies to h2 that are children of .box */
    margin:0;
    color:white;
    font-weight: normal;
    font-size: 22px;
    }

    @media screen and (min-width: 768px){
    .container-1{
    flex-direction: row;
    }
    .big-box, .container-2 {
    flex: 1;
    }
    }