This is an info container. I designed it to be easily implemented anywhere in the html of a page.
HTML:
<div class="module1">
<div class="infocontain">
<div class="icon"></div><div class="infobox"></div>
</div>
<div class="decocontain">
<div class="decoleft"></div><div class="decoright"></div>
</div>
</div>
CSS:
div.module1 {
position: relative;
left: 200px;
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
}
div.infocontain {
display: flex;
flex-direction: row;
}
div.icon {
position: relative;
background-color: #00ff00;
width: 50px;
height: 50px;
border: 2px solid #000000;
border-radius: 10px 0;
}
div.infobox {
position: relative;
left: 7px;
height: 37px;
width: 80px;
background-color: #ff0000;
border: 2px solid #000000;
}
.decocontain{
transform: skew(-45deg);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
position: relative;
bottom: 7px;
left: 25px;
}
.decoleft {
width: 30px;
height: 15px;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
}
.decoright {
width: 45px;
height: 15px;
border-top: 2px solid #000000;
}
This is another style to mess around with. It's not as neatly coded in my opinion, but I do tend to be self-critical.
HTML:
<div class="module2">
<div class="infocontainers2">
<div class="box2 left2"></div><div class="box2 right2"></div>
</div>
<div class="bottomdeco2">
<div class="left2a bottom2"><div class="left2a inner"></div></div><div class="right2a bottom2"><div class="right2a inner"></div></div>
</div>
</div>
CSS:
.module2 {
position: relative;
left: 200px;
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
}
.infocontainers2 {
display: flex;
flex-direction: row;
width: 200px;
height: 100%;
z-index: -7
}
.box2 {
display: flex;
background-color: #0000ff;
border: 1px solid #000000;
flex-direction: row;
margin: 3px;
}
.left2 {
height: 70px;
width: 95px;
border-radius: 10px 0 0 0;
}
.right2 {
position: relative;
height: 48px;
width: 80px;
border-radius: 0 0 10px 0;
}
.bottomdeco {
position: relative;
left: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 25px;
width: 200px;
transform: skew(-45deg);
margin-right: 4px;
}
.bottom2 {
padding: 2px;
transform: skew(-45deg);
}
.left2a {
position: relative;
left: 50px;
bottom: 26px;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
background-color: #ffffff;
height: 18px;
width: 34px;
z-index: -1;
border-radius: 5px 0 0 0;
}
.right2a {
position: relative;
left: 96px;
bottom: 48px;
background-color: #ffffff;
height: 20px;
width: 40px;
z-index: -6;
transform: skew(0deg);
}
.inner {
background-color: #ff6699;
position: static;
margin-left: 2px;
width: 60px;
height: 18px;
border: 1px solid black;
z-index: 3;
border-radius: 5px;
}
.inner.right2a {
position: relative;
bottom: 0px;
left: 20px;
width: 20px;
transform: skew(-45deg);
}
Module 3. This one is a bit more experimental, but cool to look at nonetheless. A lot of math went into aligning the various elements. Once again, position:relative is my favorite CSS rule.
HTML:
<div class="module3">
<div class="left3">
<div class="left3 inner3"></div>
</div>
<div class="right3">
<div class="right3 inner3"></div>
</div>
</div>
CSS:
.module3 {
display: flex;
flex-direction: row;
position: relative;
width: 300px;
height: 300px;
}
.right3 {
position: relative;
width: 200px;
height: 200px;
background-color: #ffffff;
border: 2px solid #000000;
border-radius: 80px 10px 10px 10px; /*60px*/
}
.right3.inner3 {
position: relative;
left: 1px;
top: 1px;
width: 197px;
height: 197px;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-radius: 100px 10px 10px 10px; /*75px*/
}
.left3 {
position: relative;
left: 62px;
top: -22px;
width: 76px;
height: 76px;
background-color: #ffffff;
border-right: 4px solid #000000;
border-bottom: 4px solid #000000;
/*border-top: 4px solid #888888;
border-left: 4px solid #888888;*/
border-radius: 42px;
z-index: 3;
}
.left3.inner3 {
position: relative;
left: 3px;
top: 3px;
width: 66px;
height: 66px;
border: 2px solid #000000;
border-radius: 51px;
}
.inner3 {
background-color: #9f9f9f;
}
The Navbar
HTML:
<div class="navbar">
<div class="navbutton"><a class="navlink" href="index.html">Home</a><div class="navdeco"></div></div>
<div class="navbutton"><a class="navlink" href="resources.html">Resources</a><div class="navdeco"></div></div>
<div class="navbutton"><a class="navlink" href="contact.html">Contact</a><div class="navdeco"></div></div>
<div class="navbutton"><a class="navlink" href="privacy.html">Privacy</a><div class="navdeco"></div></div>
<div class="navbutton"><a class="navlink" href="license.html">License</a><div class="navdeco"></div></div>
<div class="navempty"></div>
</div>
CSS:
.navbar {
display: flex;
background-color: none;
flex-flow: row nowrap;
list-style: none;
justify-content: left;
padding: 7px;
width: 100%;
height: 15px;
margin-bottom: 35px;
}
.navbutton {
position: relative;
background-color: #none;
bottom: 3px;
display: flex;
flex-direction: column-reverse;
height: 40px;
}
.navbar a:link {
position: relative;
bottom: 15px;
background-color: #2d4338;
color: #6ddaa2;
text-align: center;
width: 120px;
height: 35px;
border-left: 2px solid #427e60;
border-right: 2px solid #427e60;
border-top: 2px solid #427e60;
border-bottom: 2px solid #427e60;
transform: skew(-15deg);
margin: 7px;
margin-top: -15px;
padding-top: 6px;
text-decoration: none;
transition: background-color 0.5s, border-right 0.3s, border-left 0.3s, border-top 0.3s, border-bottom 0.3s;
}
.navbar a:visited {
background-color: #2d4338;
color: #6ddaa2;
border-left: 2px solid #427e60;
border-right: 2px solid #427e60;
border-top: 2px solid #427e60;
border-bottom: 2px solid #427e60;
transition: background-color 0.5s, border-right 0.3s, border-left 0.3s, border-top 0.3s, border-bottom 0.3s;
}
.navbar a:hover {
background-color: #478c63;
color: #5de6a2;
border-left: 7px solid #4bbf85;
border-right: 2px solid #4bbf85;
border-top: 2px solid #4bbf85;
border-bottom: 2px solid #4bbf85;
animation-name: ButtonHoverBlink;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 0.5s;
animation-timing-function: linear;
transition: background-color 0.5s, border-right 0.3s, border-left 0.3s, border-top 0.3s, border-bottom 0.3s;
}
/*keyframes for animations*/
@keyframes ButtonHoverBlink {
0% {border-left: 7px solid #4bbf85; border-right: 2px solid #4bbf85; border-top: 2px solid #4bbf85; border-bottom: 2px solid #4bbf85; color: #4bbf85}
24.9% {border-left: 7px solid #4bbf85; border-right: 2px solid #4bbf85; border-top: 2px solid #4bbf85; border-bottom: 2px solid #4bbf85; color: #4bbf85}
25.1% {border-left: 7px solid #6ae791; border-right: 2px solid #6ae791; border-top: 2px solid #6ae791; border-bottom: 2px solid #6ae791; color: #6ae791}
74.9% {border-left: 7px solid #6ae791; border-right: 2px solid #6ae791; border-top: 2px solid #6ae791; border-bottom: 2px solid #6ae791; color: #6ae791}
75.1% {border-left: 7px solid #4bbf85; border-right: 2px solid #4bbf85; border-top: 2px solid #4bbf85; border-bottom: 2px solid #4bbf85; color: #4bbf85}
100% {border-left: 7px solid #4bbf85; border-right: 2px solid #4bbf85; border-top: 2px solid #4bbf85; border-bottom: 2px solid #4bbf85; color: #4bbf85}
}
@keyframes NavdecoHoverBlink {
0% {border-right: 7px solid #4bbf85; border-bottom: 2px solid #4bbf85}
24.9% {border-right: 7px solid #4bbf85; border-bottom: 2px solid #4bbf85}
25.1% {border-right: 7px solid #6ae791; border-bottom: 2px solid #6ae791}
74.9% {border-right: 7px solid #6ae791; border-bottom: 2px solid #6ae791}
75.1% {border-right: 7px solid #4bbf85; border-bottom: 2px solid #4bbf85}
100% {border-right: 7px solid #4bbf85; border-bottom: 2px solid #4bbf85}
}
/*End animation Keyframes*/
.navbar a:active {
color: #67fdb5;
background-color: #478c63;
border-left: 7px solid #67fdb5;
border-right: 2px solid #67fdb5;
border-top: 2px solid #67fdb5;
border-bottom: 2px solid #67fdb5;
transition: background-color 0.5s, border-right 0.3s, border-left 0.3s, border-top 0.3s, border-bottom 0.3s;
}
/*use this to contain breadcrumbs later?*/
.navempty {
flex-grow: 5;
flex-basis: 80%;
background-color: #2a4338;
color: #d3fde9;
text-align: center;
width: 100px;
height: 35px;
border-left: 7px solid #427e60;
border-right: 2px solid #427e60;
border-top: 2px solid #427e60;
border-bottom: 2px solid #427e60;
transform: skew(-15deg);
margin-left: 3px;
margin-bottom: 7px;
margin-top: -15px;
padding-bottom: 5px;
}
.navdeco {
position: relative;
top: 8px;
right: 2px;
background-color: none;
color: #6ddaa2;
text-align: center;
width: 75px;
height: 35px;
border-right: 7px solid #4bbf85;
border-bottom: 2px solid #4bbf85;
transform: skew(-15deg);
margin: 3px;
margin-left: 63px;
margin-top: -15px;
padding-top: 6px;
text-decoration: none;
transition: background-color 0.5s, border-right 0.3s, border-bottom 0.3s;
z-index: -5;
}
.navbar a:hover ~ div {
border-right: 7px solid #4bbf85;
border-bottom: 2px solid #4bbf85;
animation-name: NavdecoHoverBlink;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 0.5s;
animation-timing-function: linear;
transition: border-right 0.3s, border-bottom 0.3s;
}
This could be an article preview, with tags and topics displayed in the small containers at the bottom right.
HTML:
<div class="container3">
<div class="imagecontain3"></div>
<div class="hideoverflow3"></div>
<div class="tagcontain3">
<div class="tag3"></div>
<div class="tag3"></div>
<div class="tag3"></div>
</div>
</div>
CSS:
.container3 {
display: flex;
flex-direction: column;
width: 600px;
height: 300px;
}
.imagecontain3 {
width: 600px;
height: 150px;
background-color: #8888ff;
border: 2px solid black;
}
.tagcontain3 {
display: flex;
flex-direction: row;
width: 285px;
flex-basis: 50px;
max-height: 50px;
position: relative;
bottom: 102px;
left: 310px;
background-color: white;
border-top: 2px solid black;
border-left: 2px solid black;
transform: skew(-15deg);
}
.tag3 {
width: 30%;
height: 40px;
background-color: #8888ff;
border: 2px solid black;
margin: auto;
}
.hideoverflow3 {
position: relative;
bottom: 50px;
left: 596px;
flex-basis: 50px;
max-height: 50px;
width: 31px;
background-color: white;
transform: skew(-15deg);
}