Pamodoro Clock, I need help - CSS

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

Thanks, that helped a lot :slight_smile: