I'm attempting to recreate a header that has a similar appearance to the following:
https://i.stack.imgur.com/uVXs3.png
However, I am facing challenges in generating the repeating diamond design beneath the black bar. The diamond pattern resembles this:
https://i.stack.imgur.com/bisH4.png
Below is the current HTML and CSS code I have written for this test version:
figure {
background: black;
border-radius: 3px;
height: 50px;
margin: 0px;
}
html {
background-color: grey;
width: 1212px;
height: 1476px;
margin: auto;
}
img {
border-radius: 100%;
position: relative;
vertical-align: middle;
left: 50px;
bottom: 30px;
}
figcaption {
display: inline-block;
vertical-align: middle;
}
li {
display: inline-block;
text-decoration: none;
overflow: hidden;
margin-bottom: 50px;
}
a {
list-style: none;
text-decoration: none;
text-align: center;
color: white;
}
ul:first-child {
float: left;
margin-left: 100px;
}
ul:last-child {
float: right;
margin-left: 550px;
}
div {
background-color: blue;
width: 100%;
height: 70px;
}<div></div>
<figure>
<img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" />
<figcaption>
<ul>
<li>
<a href="">test</a>
<a href="">test</a>
</li>
</ul>
<ul>
<li><a href="">test</a>
</li>
<li><a href="">test</a>
</li>
<li><a href="">test</a>
</li>
<li><a href="">test</a>
</li>
</ul>
</figcaption>
</figure>