Introducing 100DaysOfCode initiative: A way to promote Whaleshares (28)
Hello.
I am pleased to introduce the 100DaysOfCode initiative right on whaleshares. It is an initiative that tends to expose participants to the developer world and also promote Whaleshares on twitter.
Rules
- Carefully read and understand the EXAMPLE given.
- Use the EXAMPLE to solve the given task.
- Publish your completed task on Whaleshares.
- Tweet your post on twitter with the following tags #100DaysOfCode #Whaleshares #HTML5
- Drop your post link and tweet link as a comment under the post for possible reward.
- Post tags should include eternalblue tag
Example of a 100DaysOfCode tweet. You specify the Day and what you accomplished.
Your post will be rewarded by the initiative sponsors. This initiative is sponsored by @kennybll-witness, @dbread-witness, and @ceruleanblue.
Kindly vote for the sponsors as your preferred witness on wallet.whaleshares.io/~witnesses.
Click the vote button beside @kennybll-witness, @dbread-witness, and @ceruleanblue username to vote them as witness.
EXAMPLE
We wrote our twenty-seventh code yesterday and was able to view it in a web browser. Today, we are moving on to CSS Box Model.
All html elements can be likened to a box. The box consists of the content which has a padding before we reach the box border and then a margin that separates it from external element.
Content - The content of the box. The texts or images that you put in your code to be displayed in the browser.
Padding - It clears an area around the content. The area cleared is based on your specified value. The padding is transparent and cannot be seen. However, with the border you will be able to see the effect.
Border -The border covers the content and the padding and can be seen.
Margin - It clears an area outside the border and it is transparent.
Let's put it into practice.
Box Model.
` <div class="box">This is a box model sample</div>`
.box {
background-color: cyan;
width: 400px;
border: 10px solid red;
padding: 20px;
margin: 20px;
}
You can see that we have new CSS properties of border, padding, and margin. They have been explained above. The border
property has a value of 10px solid red
as seen in the image. It means the width style color
.
You can see the effect of both the margin
and padding
. I removed them from the CSS file and you can see the browser output.
Task
Using the examples given so far in the 100daysofcode tutorial, solve the task below. Use External CSS.
Show your codes and also the output in the browser
Hint
- Both the margin and padding is 50px each.
- The border width is 10px.
- Use any text or colour of your choice.
Goodluck.
Feel free to leave a comment if you do not understand any process
All completed tasks will be rewarded by the sponsors. Please follow the rules to be eligible for reward.
Series
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-wwhaleshares
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-2
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-3
https://whaleshares.io/@zoneboy/25nreu-introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-3
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-5
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-6
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-7
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-8
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-9
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-10
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-11
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-12
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-13
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-14
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-15
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-16
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-17
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-18
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-19
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-20
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-21
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-22
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-23
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-24
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-25
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-26
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-27
Your opinion is celebrated and welcomed, not banned or censored!