github-learning-lab[bot]
commented
3 years ago Task 2: Building the background of your clock
In this task, we'll cover some tips and tricks to get your clock shaped and positioned correctly on your page.
- Inside of your HTML file, make sure you have a div with its class set to
"clock".- This div should have already been defined from homework2, but if not, place it after your form ends, but still inside the body tags.
Once you've established your clock div, move to your style.css file.
-
Define a selector for your clock class (
.clock).- This will affect all elements with class = "clock"; therefore, the div we just defined.
-
Set the height and width
- It doesn't matter what you set them to, as long as they are the same value.
- I set my height and width to both be 300px.
-
Set a background color for your clock
- Make sure it differs from the background of the screen so that the clock is visible
If you load your HTML at this point, it should look something like this (give or take depending on what you've set your attributes to):
-
Set the
border-radiusin the.clocksection to 50%- This will completely round the edges of the square, thus making it a circle.
-
Add a border - I suggest solid black
-
Set the position of the items in this class to relative
- This will help us glue together the elements we're going to place on top of the clock.
Now, your clock should look like this:
If your page looks nothing like this, click here for help:
```css .clock{ height: 300px; width: 300px; background-color: white; border-radius: 50%; border: solid black 10px; position: relative; } ```
-
Next, use the after selector on your clock class to define a new block like so:
.clock::after{}
This will create a new element associated with the clock class that we're going to use to design a small button that will sit in the middle of the clock, on top of where the hands are going to overlap..
-
Set the
positiontoabsolute- This ensures the element is anchored to the circle we have on the page
-
Set
contentto''- This will make sure nothing is printed inside this small block
-
Set the
heightandwidthto be a small square - I've set mine to 20px -
Change the
border-radiusto 50%, just as we did with the base of the clock, to make it a circle. -
Set
background-colortoblack -
Set
topto 50% -
Set
leftto 50%
The last two steps move the small circle to the center of the clock.
If you load your page now, you'll notice that the small circle is slightly off center:
This is because the object is aligned with its position relative to the left and top sides, not its center. To fix this,
- Set the
transformattribute inclock::aftertotranslate(-50%, -50%)below the lines that set the top and left positions:
This will translate the item 50% of its width to the left, and 50% of its width upwards. Now your clock should look like this:
If your clock doesn't look right, click here:
```css .clock::after{ position: absolute; content: ''; top: 50%; left: 50%; height: 20px; width: 20px; border-radius: 50%; background-color: black; transform: translate(-50%, -50%); } ```
Open a pull request for your code
Once again, be sure create a new branch, titled [your GitHub username]-[week]-[task number], for your task. For reference, my username is danzelo1 so my branch would be titled danzelo1-3-2 for this task.
After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. Be sure to title and comment your pull request appropriately.
As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 3). A new comment should have appeared for your next task where you'll find the instructions for task 3.
Grouped radio buttons with div class "timezone" Defined .timezone selector in style.css Changed background colour and font family to franklin gothic.