Hi there,
I am having problems with my css o the Pamodoro Clock.
I want my time selection to be on one side of the circle and the break time on the oder (the clock in the middle) but I try and I can’t figure out how to do it.
My code:
Note: I used the position attribute on the clock to do the filler when the time passes.
That was my first time.Browser converted it to display.
This is HTML:
<div class="text-center" id="header"><h1 id="title">Pomodoro Clock</h1></div>
<hr>
<div id="allignAll">
<div id="timeSelect">
<div id="time">
<h2 >Time</h2>
<button type="button" id="-time" class="btn btn-warning">+</button>
<h3>25</h3>
<button type="button" id="+time" class="btn btn-warning">-</button>
</div>
</div>
<div id="clock">
<div id="fill"></div> <div id="bt">Start</div>
</div>
<div id="btime">
<h2>Break Time</h2>
<button type="button" id="-bTime" class="btn btn-warning">+</button>
<h3>25</h3>
<button type="button" id="+bTime" class="btn btn-warning">-</button>
</div>
</div>
I added some CSS also. Please check and tell if its working for you also. you can further add some margin.
body {
background-color: #666666;
color:white;
padding-right:15%;
padding-left:15%
}
#clock {
margin:auto;
border-radius:50%;
width:300px;
height:300px;
background-color:#1D1F20;
position: relative;
overflow:hidden;
border:5px solid #1D1F20;
bottom:100px;
}
#fill {
margin:auto;
width:300px;
height:100px;
background-color:#EC971F;
position:absolute;
z-index:0;
bottom:0;
}
#bt {
font-size:50px;
text-align:center;
padding-top:100px;
color: white;
position:relative;
z-index:1;
/*position: absolute;
margin-left: auto;
margin-right: auto;
left:30%;
bottom:125px;*/
}
#header {
margin:60px;
}
hr {
margin-bottom:80px;
}
#allignAll {
display: flex;
}
#timeSelect, #btime, #clock{
flex: 1;
}
/*#time {position:relative;
left:40%;}
#btime {position:relative;
left:50%;
bottom:185px;
}
#timeSelect {display: inline;float:left;} */
1 Like
rob9233
October 28, 2017, 12:28pm
5
Thanks, that helped a lot