I'm having a little trouble using flex in CSS to align my divs the way that I'd like them to be. The diagram below shows how I'd like it all to be set out
Here's all my CSS and HTML uploaded as a fiddle and as a snippet:
@font-face {
font-family: Comfortaa;
src: url("Comfortaa-Light.ttf") format("truetype");
}
@font-face {
font-family: Neue;
src: url("HelveticaNeue-Thin.otf") format("opentype");
}
body {
position: absolute;
margin: 0px;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow-y: scroll;
overflow-x: hidden;
background-color: white;
}
#topSegment {
position: relative;
display: flex;
flex-flow: row wrap;
width: 100%;
height: 600px;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: purple; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* Standard syntax */
}
#frontLogo {
width: 369.9px;
height: 350px;
margin: 125px;
}
#searchBar {
flex: 1;
margin-right: 125px;
margin-left: 0px;
margin-top: 75px;
margin-bottom: 75px;
background-color: rgb(74,74,74);
height: 50px;
border-radius: 25px;
}
#weatherInformation {
flex: 1;
margin: 125px;
margin-left: 0px;
}
#weatherInformation p{
margin: 0px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: white;
font-size: 2em;
}
#underline {
margin: 0px;
padding: 0px;
width: 0%;
visibility: hidden;
animation-name: expand;
animation-delay: 0.75s;
animation-duration: 0.8s;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
@keyframes expand {
from {
width: 0%;
}
to {
width: 100%;
visibility: visible;
}
}
#gradient {
position: absolute;
width: 100%;
height: 10px;
bottom: 0px;
left: 0px;
background: white; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0)); /*Standard*/
}
#content {
display: flex;
width: 100%;
height: 900px;
background-color: white;
}
/* Custom Scrollbar CSS */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgba(255,255,255,1);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
-webkit-border-radius: 50px;
border-radius: 50px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(150,150,150,1);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(150,150,150,0.6);
}<body>
<div id="topSegment">
<a href="index.html">
<img src="Weather%20Icon.svg" alt="CGS Weather Icon" id="frontLogo" >
</a>
<div id="searchBar">
<div id="outer">
</div>
</div>
<div id="weatherInformation">
<p>CAMBERWELL, MELBOURNE</p>
<hr id="underline">
<p>28°</p>
</div>
<div id="gradient"></div>
</div>
<div id="content"></div>
</body>I'm sure it has some really simple solution using a couple of lines to do with flex but I can't seem to work out what they are..
Aucun commentaire:
Enregistrer un commentaire