im trying to centre the black svg logo in the middle of the pink div surrounded by the 4 coloured divs. Wondering why its not working with the exiting code right now? I tried adding a float on the svg to hopfully move it beside the right brown div but it didnt seem to work. Any ideas on how to center properly?
<style>
ul {
margin:0;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 77%;
}
li {
display: block;
font-size:17px;
text-decoration:none;
}
.navtext{
background-color:orange;
width: 35%;
height:20%;
right:0px;
position:absolute;
display: flex;
align-items: center;
}
body {
margin: 0;
}
.header{
background-color:yellow;
width:100%;
height:20%;
}
.logo{
position:absolute;
left:5%;
background-color:lightblue;
height:20%;
display: flex;
align-items: center;
}
.logotext{
font-size:27px;
font-weight:bold;
}
.front {
background-color:blue;
height: 81vh;
position: relative;
z-index: 2;
width:100%;
}
.video {
background: url(https://picsum.photos/id/107/800/800) center/cover;
height: 100vh;
margin-top: -100vh;
position: sticky;
width:100%;
top: 0;
}
.container {
height:200vh;
}
.right{
right:0px;
width:50%;
Height:91%;
position:absolute;
background-color:pink;
/*display: flex;*/
justify-content: center;
align-items: center;
}
.logoanimecont{
text-align:center;
width:75%;
margin:auto;
}
.left{
width:50%;
Height:91%;
background-color:green;
display: flex;
justify-content: center;
align-items: center;
}
.titlebox {
text-align:center;
width:75%;
background-color:purple;
margin:auto;
}
.title {
font-size:30px;
text-align:center;
}
.hide{ display:none }
.rightbordertop{
width:100%;
height:25%;
background-color:red;
}
.rightborderbottom{
width:100%;
height:25%;
bottom:0px;
position:absolute;
background-color:darkgrey;
}
.rightborderleft{
width:25%;
height:75%;
background-color:brown;
}
.rightborderright{
right:0px;
height:75%;
width:25%;
background-color:blue;
position:absolute;
}
svg {position:absolute; width:50%; height:50%;}
</style>
<div class="container">
<div class="front">
<div class="header">
<div class="logo">
<span class="logotext">f-e</span>
</div>
<div class="nav">
<div class="navtext">
<ul>
<li><a href="#home">About</a></li>
<li><a href="#news">Services</a></li>
<li><a href="#contact">Clients</a></li>
<li><a href="#about">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="left">
<div class="titlebox">
<span class="title">Random text, centered v and h.</span>
</div>
<div class="right">
<div class="rightbordertop"></div>
<div class="rightborderright"></div>
<div class="rightborderleft"></div>
<div class="rightborderbottom"></div>
<div class="logoanimacont">
<div class="logoanime">
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
<path id="technique" class="hide" d="M0,0v72h72V0H0z M40.05,36.57c0,0.22-0.11,0.33-0.33,0.33h-8.62c-0.22,0-0.33-0.11-0.33-0.33V35
c0-0.2,0.11-0.3,0.33-0.3h8.62c0.22,0,0.33,0.1,0.33,0.3V36.57z"/>
<path id="digital" class="hide" d="M0,0v72h72V0H0z M45.89,36.15c0,0.19-0.09,0.29-0.28,0.3l-16.83,1.48c0.47,1.7,1.41,3.1,2.81,4.2
c1.44,1.11,3.06,1.66,4.88,1.66c1.38,0,2.66-0.34,3.87-1.01c1.19-0.66,2.15-1.56,2.88-2.72c0.11-0.19,0.26-0.23,0.45-0.12
l1.36,0.77c0.19,0.12,0.23,0.28,0.12,0.47c-0.94,1.48-2.18,2.66-3.73,3.52c-1.53,0.86-3.18,1.29-4.95,1.29
c-2.81,0-5.21-0.99-7.2-2.98c-2-2-3-4.41-3-7.22c0-2.86,0.96-5.27,2.88-7.24c1.91-1.97,4.24-2.95,7.01-2.93
c2.69,0.02,4.98,1.01,6.89,2.98c1.89,1.95,2.84,4.3,2.84,7.03V36.15z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="video"></div>
</div>
<div style="height:150vh"> more content later </div>
