dianaow/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Responsive Flexbox practice. Template could be used for a portfolio page.
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width">
  <head>
    <style>
    body {
      margin: 0;
      padding: 0;
    }
    .wrapper {
      width: 100vw;
      height: 300vh;
      display: flex;
      justify-content: center
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 80%;
    }
    .box {
      box-sizing: border-box;
      border: 10px solid #fff;
    }

    .group-1 {
      width: 100%;
      height: 20%;
    }
    .box-1 {
      background-color: orangered;
      height: 100%;
    }

    .group-2 {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 30%;
    }
    .group-2-nest-2 {
      display: flex;
      flex-direction: column;
      width: 30%;
      height: 100%;
    }
    .box-2 {
      background-color: tomato;
      width: 70%;
      height: 100%;
    }
    .box-3 {
      background-color: coral;
      flex-basis: 100%;
      height: 50%;
    }
    .box-4 {
      background-color: darkorange;
      flex-basis: 100%;
      height: 50%;
    }

    .group-3 {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 25%;
    }
    .box-5 {
      background-color: gold;
      width: 40%;
      height: 100%;
    }
    .box-6 {
      background-color: teal;
      width: 60%;
      height: 100%;
    }

    .group-4 {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      height: 25%;
    }
    .box-7 {
      background-color: mediumaquamarine;
      flex-basis: 50%;
      height: 50%;
    }
    .box-8 {
      background-color: mediumturquoise;
      flex-basis: 50%;
      height: 50%;
    }
    .box-9 {
      background-color: mediumblue;
      flex-basis: 50%;
      height: 50%;
    }
    .box-10 {
      background-color: mediumorchid;
      flex-basis: 50%;
      height: 50%;
    }

    @media screen and (max-width: 420px){
      .container {
        width: 100vw;
      }
      .group-1, .group-2, .group-2-nest-2, .group-3, .group-4 {
        flex-direction: column;
        width: 100%;
      }
      .group-4 {
        flex-wrap: nowrap;
      }
      .box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10  {
        width: 100%;
        flex: 1;
      }
    }

    </style>
  </head>
  <body>
    <div class='wrapper'>
      <div class='container'>

        <div class='group-1'>
          <div class='box box-1'></div>
        </div>

        <div class='group-2'>
          <div class='box box-2'></div>
          <div class='group-2-nest-2'>
            <div class='box box-3'></div>
            <div class='box box-4'></div>
          </div>
        </div>

        <div class='group-3'>
          <div class='box box-5'></div>
          <div class='box box-6'></div>
        </div>

        <div class='group-4'>
          <div class='box box-7'></div>
          <div class='box box-8'></div>
          <div class='box box-9'></div>
          <div class='box box-10'></div>
        </div>

      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<meta charset='utf-8'>
	<meta name="viewport" content="width=device-width">
	<head>
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	.wrapper {
	width: 100vw;
	height: 300vh;
	display: flex;
	justify-content: center
	}
	.container {
	display: flex;
	flex-direction: column;
	width: 80%;
	}
	.box {
	box-sizing: border-box;
	border: 10px solid #fff;
	}

	.group-1 {
	width: 100%;
	height: 20%;
	}
	.box-1 {
	background-color: orangered;
	height: 100%;
	}

	.group-2 {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 30%;
	}
	.group-2-nest-2 {
	display: flex;
	flex-direction: column;
	width: 30%;
	height: 100%;
	}
	.box-2 {
	background-color: tomato;
	width: 70%;
	height: 100%;
	}
	.box-3 {
	background-color: coral;
	flex-basis: 100%;
	height: 50%;
	}
	.box-4 {
	background-color: darkorange;
	flex-basis: 100%;
	height: 50%;
	}

	.group-3 {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 25%;
	}
	.box-5 {
	background-color: gold;
	width: 40%;
	height: 100%;
	}
	.box-6 {
	background-color: teal;
	width: 60%;
	height: 100%;
	}

	.group-4 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	height: 25%;
	}
	.box-7 {
	background-color: mediumaquamarine;
	flex-basis: 50%;
	height: 50%;
	}
	.box-8 {
	background-color: mediumturquoise;
	flex-basis: 50%;
	height: 50%;
	}
	.box-9 {
	background-color: mediumblue;
	flex-basis: 50%;
	height: 50%;
	}
	.box-10 {
	background-color: mediumorchid;
	flex-basis: 50%;
	height: 50%;
	}

	@media screen and (max-width: 420px){
	.container {
	width: 100vw;
	}
	.group-1, .group-2, .group-2-nest-2, .group-3, .group-4 {
	flex-direction: column;
	width: 100%;
	}
	.group-4 {
	flex-wrap: nowrap;
	}
	.box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10 {
	width: 100%;
	flex: 1;
	}
	}

	</style>
	</head>
	<body>
	<div class='wrapper'>
	<div class='container'>

	<div class='group-1'>
	<div class='box box-1'></div>
	</div>

	<div class='group-2'>
	<div class='box box-2'></div>
	<div class='group-2-nest-2'>
	<div class='box box-3'></div>
	<div class='box box-4'></div>
	</div>
	</div>

	<div class='group-3'>
	<div class='box box-5'></div>
	<div class='box box-6'></div>
	</div>

	<div class='group-4'>
	<div class='box box-7'></div>
	<div class='box box-8'></div>
	<div class='box box-9'></div>
	<div class='box box-10'></div>
	</div>

	</div>
	</div>
	</body>
	</html>