Resize the browser window to see the responsive effect.

My Website

With a flexible layout.

Link Link Link Link

About Me

Photo of me:
Image

Some text about me in culpa qui officia deserunt mollit anim..

More Text

Lorem ipsum dolor sit ame.

Image

Image

Image

TITLE HEADING

Title description, Dec 7, 2017
Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


TITLE HEADING

Title description, Sep 2, 2017
Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Footer


    <!-- Note -->
    <div style="background:yellow;padding:5px">
      <h4 style="text-align:center">Resize ...</h4>
    </div>
    <!-- Header -->
    <div class="header">
      <h1>My Website</h1>
      <p>With a <b>flexible</b> layout.</p>
    </div>
    <!-- Navigation Bar -->
    <div class="navbar">
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>
    <!-- The flexible grid (content) -->
    <div class="row">
      <div class="side">
        <h2>About Me</h2>
        <h5>Photo of me:</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        <h3>More Text</h3>
        <p>Lorem ipsum dolor sit ame.</p>
        <div class="fakeimg" style="height:60px;">Image</div><br>
        <div class="fakeimg" style="height:60px;">Image</div><br>
        <div class="fakeimg" style="height:60px;">Image</div>
      </div>
      <div class="main">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text..</p>
        <p>Sunt in cul...</p>
        <br>
        <h2>TITLE HEADING</h2>
        <h5>Title description, Sep 2, 2017</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text..</p>
        <p>Sunt ....</p>
      </div>
    </div>
    <!-- Photo Grid -->
    <div class="flex_gallery_row">
      <div class="flex_gallery_column">
        <img src="../images/workplace.jpg" style="width:100%">
        <img src="../images/paris.jpg" style="width:100%">
        <img src="../images/rock.jpg" style="width:100%">
        <img src="../images/img_pink_flowers.jpg" style="width:100%">
        <img src="../images/coffee.jpg" style="width:100%">
        <img src="../images/cellphone.jpg" style="width:100%">
      </div>
      <div class="flex_gallery_column">
        <img src="../images/workplace.jpg" style="width:100%">
        <img src="../images/rock.jpg" style="width:100%">
        <img src="../images/paris.jpg" style="width:100%">
        <img src="../images/img_pink_flowers.jpg" style="width:100%">
        <img src="../images/coffee.jpg" style="width:100%">
        <img src="../images/cellphone.jpg" style="width:100%">
      </div>
      <div class="flex_gallery_column">
        <img src="../images/workplace.jpg" style="width:100%">
        <img src="../images/rock.jpg" style="width:100%">
        <img src="../images/paris.jpg" style="width:100%">
        <img src="../images/img_pink_flowers.jpg" style="width:100%">
        <img src="../images/coffee.jpg" style="width:100%">
        <img src="../images/cellphone.jpg" style="width:100%">
      </div>
      <div class="flex_gallery_column">
        <img src="../images/paris.jpg" style="width:100%">
        <img src="../images/coffee.jpg" style="width:100%">
        <img src="../images/cellphone.jpg" style="width:100%">
        <img src="../images/rock.jpg" style="width:100%">
        <img src="../images/workplace.jpg" style="width:100%">
        <img src="../images/img_pink_flowers.jpg" style="width:100%">
      </div>
      <div class="flex_gallery_column">
        <img src="../images/coffee.jpg" style="width:100%">
        <img src="../images/paris.jpg" style="width:100%">
        <img src="../images/workplace.jpg" style="width:100%">
        <img src="../images/img_pink_flowers.jpg" style="width:100%">
        <img src="../images/cellphone.jpg" style="width:100%">
        <img src="../images/rock.jpg" style="width:100%">
      </div>
      <div class="flex_gallery_column">
        <img src="../images/workplace.jpg" style="width:100%">
        <img src="../images/rock.jpg" style="width:100%">
        <img src="../images/paris.jpg" style="width:100%">
        <img src="../images/img_pink_flowers.jpg" style="width:100%">
        <img src="../images/coffee.jpg" style="width:100%">
        <img src="../images/cellphone.jpg" style="width:100%">
      </div>
    </div>
    <!-- Footer -->
    <div class="footer">
      <h2>Footer</h2>
    </div>
  

    * {
      box-sizing: border-box;
    }
    /* Style the body */
    body {
      font-family: Arial;
      margin: 0;
    }
    /* Header/logo Title */
    .header {
      padding: 60px;
      text-align: center;
      background: #1abc9c;
      color: white;
    }
    /* Style the top navigation bar */
    .navbar {
      display: flex;
      background-color: #333;
    }
    /* Style the navigation bar links */
    .navbar a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      text-align: center;
    }
    /* Change color on hover */
    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    /* Column container */
    .row {
      display: flex;
      flex-wrap: wrap;
    }
    /* Create two unequal columns that sits next to each other */
    /* Sidebar/left column */
    .side {
      flex: 30%;
      background-color: #f1f1f1;
      padding: 20px;
    }
    /* Main column */
    .main {
      flex: 70%;
      background-color: white;
      padding: 20px;
    }
    /* Fake image, just for this example */
    .fakeimg {
      background-color: #aaa;
      width: 100%;
      padding: 20px;
    }
    /* Footer */
    .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
    }
    /*
      Responsive layout
        when the screen is less than 700px wide,
        make the two columns stack on top of each other instead of next to each other
    */
    @media screen and (max-width: 700px) {
      .row, .navbar {
          flex-direction: column;
      }
    }
    .flex_gallery_row {
      display: flex;
      flex-wrap: wrap;
      padding: 0 4px;
    }
    /*
      Create four equal columns that sits next to each other
    */
    .flex_gallery_column {
      flex: 16%;
      max-width: 16%;
    }
    .flex_gallery_column img {
      margin-top: 8px;
      vertical-align: middle;
    }
    /*
      Responsive layout
        makes a two column-layout instead of four columns
    */
    @media (max-width: 900px) {
      .flex_gallery_column {
          flex: 32%;
          max-width: 32%;
      }
    }
    /*
      Responsive layout
        makes the two columns stack on top of each other instead of next to each other
    */
    @media (max-width: 700px) {
      .flex_gallery_column {
          flex: 50%;
          max-width: 50%;
      }
    }
    @media (max-width: 500px) {
      .flex_gallery_column {
          flex: 100%;
          max-width: 100%;
      }
    }

Back to Main Page