Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 19, 2022 09:52 pm GMT

50 Days of Intermediate HTML CSS Projects | Day 1 | Creating Styled Boxes for Notes, Warnings, Examples, and Tips

Creating Styled Boxes for Notes, Warnings, Examples, and Tips

OBJECTIVE

We will make a parent div of class outside, giving us the background and a child div of class inside having the content.
We will style it by CSS to get attractive boxes.

Process 1

HTML

<div class="outside outside-tip">   <div class="inside inside-tip">      <div id="head">&#128161; Tip : </div>         <ul>             <li>Try this on your own.</li>             <li>Try playing with the CSS.</li>         </ul>    </div></div>

CSS

body{    color: #000000;    font-size: 19px;    font-family: 'Nunito Sans', sans-serif;}#head{    font-weight: 700;    font-family: 'Chivo', sans-serif;    font-size: 20px;    color: #987a00;}.outside-tip{    border: solid 2px #ffd500;    border-radius: 6px;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;    line-height: 25px;    overflow: hidden;    padding: 15px 60px;    background-color: rgb(255, 249, 208);    margin: 60px;}

It will come up as...

Styled Box for Tip

Process 2

HTML

    <div class="outside outside-warning">        <div class="inside inside-warning">            <div id="head">&#128683; Warning : </div>               Stay away from frauds..        </div>    </div>

CSS

body{    color: #ff4444;    font-size: 19px;    font-family: 'Nunito Sans', sans-serif;}#head{    font-weight: 700;    font-family: 'Chivo', sans-serif;    font-size: 20px;    color: #ff0a0a;}.outside-warning{    border: solid 2px #ff4444;    border-radius: 6px;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;    line-height: 28px;    overflow: hidden;    padding: 10px 60px;    background-color: rgb(255, 235, 235);    margin: 60px;}.inside-warning{    border-left: solid 3px #ff4444;    padding-left: 20px;}

It will come up as...

Styled Box For Warning

Process 3

HTML

    <div class="outside outside-note">        <div class="inside inside-note">            <div id="head">Note : </div>            <ul>                <li>This is HTML code.</li>                <li>It is styled by CSS.</li>            </ul>        </div>    </div>

CSS

body{    color: #000000;    font-size: 19px;    font-family: 'Nunito Sans', sans-serif;}#head{    font-weight: 700;    font-family: 'Chivo', sans-serif;    font-size: 20px;    color: #0078c2;}.outside-note{    background-color: #f0f7fb;    border-left: solid 4px #3498db;    line-height: 25px;    overflow: hidden;    padding: 12px;    margin: 60px;}

It will come up as...

Styled Box For Note

Colors and their Visual Symbols
Keep in mind the accessibility while choosing your colors.

  1. Red is used for warnings and to indicate danger
  2. Orange can be used for cautions as well
  3. Notes can be blue
  4. Examples can be green
  5. Tips can be yellow

Try these by Yourself --

1.
Styled Box
2.
Styled Box
3.
Styled Box


Original Link: https://dev.to/koustavdas/100-days-of-intermediate-html-css-projects-day-1-17ld

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To