Skip to content

Instantly share code, notes, and snippets.

@MrVibe

MrVibe/flexbox training

Created October 22, 2020 07:09
Show Gist options
  • Save MrVibe/6c7824c2896d369522adf66085f1812d to your computer and use it in GitHub Desktop.
Save MrVibe/6c7824c2896d369522adf66085f1812d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flexbox training
<html>
<head>
<title>Assignment 2 Flexbox</title>
<style>
:root{
--border:rgba(0,0,0,0.1);
--background:#fff;
--shadow:rgba(0,0,0,0.2);
}
.container {
width: 1280px;
margin: auto;
}
.container{
display:flex;
flex-wrap:wrap;
}
header .container{
display:flex;
justify-content:space-between;
align-items:center;
}
.hero_image{
min-width:320px;
min-height:320px;
background:var(--shadow);
display:block;
border-radius:5px;
}
header .menu_block ul{
list-style:none;
display:flex;
}
header .icons_block a{
padding:5px;
}
header .menu_block ul li{
padding:10px
}
section .container > .hero_image{
flex:1 0 320px;
}
section .container > .main_block{
flex:2 0 480px;
min-height:120px;
display:flex;
flex-wrap:wrap;
}
section .container > .main_block > div{
flex: 4 0 320px;
display:flex;
flex-direction:column;
padding:1rem;
}
section .container > .main_block > div.right_block{
flex: 1 0 240px;
align-items:flex-end;
display:flex;
flex-wrap: wrap;
flex-direction: row;
}
section .container > .main_block > div.right_block > *{
min-width: 160px;
min-height:120px;
flex:1 0 120px;
background:var(--shadow);
border-radius:5px;
margin: 0.5rem;
}
section .container > .main_block > div.right_block > *+*{
/* margin-top:1rem; */
}
@media (max-width:1280px){
.container { width:100%;}
}
body {
font-family: Roboto;
}
</style>
</head>
<body><link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet">
<header>
<div class="container">
<div class="logo_block">Logo</div>
<div class="menu_block"><ul><li><a>Home</a></li><li><a>Shop</a></li><li><a>About</a></li><li><a>Contact</a></li></ul></div><div class="icons_block"><a><svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></a><a>Icon2</a><a>Icon3</a></div></div></header><section><div class="container"><div class="hero_image"></div><div class="main_block"><div><h1>Heading 1</h1><p>This is description</p></div><div class="right_block"><div class=""></div><div></div></div></div></div></section>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment