Hello guys,
We will be with you in the Learn CSS Colors by Building a Set of Colored Markers project at FreeCodeCamp.
Here you can find all solutions
If you need more help, please feel free to contact me.
Thanks,
Cheers,
Step 1
<!DOCTYPE html><html><html lang="en"> </html>
Step 2
<head></head><body></body>
Step 3
<head> <title>Colored Markers</title> </head>
Step 4
<head> <title>Colored Markers</title> <meta charset="utf-8" /> </head>
Step 5
<head> <meta charset="utf-8"> <title>Colored Markers</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head>
Step 6
<body> <h1>CSS Color Markers</h1> </body>
Step 7
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colored Markers</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head>
Step 8
h1 { text-align:center;}
Step 9
<body> <h1>CSS Color Markers</h1> <div class="container"></div> </body>
Step 10
<body> <h1>CSS Color Markers</h1> <div class="container"> <div class="marker"></div> </div> </body>
Step 11
.marker { background-color:red;}
Step 12
.marker { background-color: red; width:200px; height:25px;}
Step 13
.marker { width: 200px; height: 25px; background-color: red; margin:auto;}
Step 14
<div class="container"> <div class="marker"> </div> <div class="marker"> </div> <div class="marker"> </div> </div>
Step 15
.marker { width: 200px; height: 25px; background-color: red; margin:10px auto;}
Step 16
<div class="marker one"> </div> <div class="marker"> </div> <div class="marker"> </div>
Step 17
.marker { width: 200px; height: 25px; margin: 10px auto;}
Step 18
.one { background-color:red;}
Step 19
<div class="marker one"> </div> <div class="marker two"> </div> <div class="marker three"> </div>
Step 20
.two { background-color:green}.three { background-color:blue}
Step 21
.container{ background-color:rgb(0, 0, 0)}
Step 22
.one { background-color: rgb(255, 0, 0)}
Step 23
.two { background-color: rgb(0, 255, 0)} .three { background-color: rgb(0, 0, 255)
Step 24
.two { background-color: rgb(0, 127, 0);}
Step 25
.container { background-color: rgb(0, 0, 0); padding:10px 0;}
Step 26
.two { background-color: rgb(0, 255, 0);}
Step 27
.container { background-color: rgb(255, 255, 255); padding: 10px 0;}
Step 28
.one { background-color: rgb(255, 255, 0);}
Step 29
.two { background-color: rgb(0, 255, 255);}
Step 30
.three { background-color: rgb(255, 0, 255);}
Step 31
.one { background-color: rgb(255, 127, 0);}
Step 32
.two { background-color: rgb(0, 255, 127);}
Step 33
.three { background-color: rgb(127, 0, 255);}
Step 34
.one { background-color: rgb(127, 255, 0);} .two { background-color: rgb(0, 127, 255);} .three { background-color: rgb(255, 0, 127);}
Step 35
.one { background-color: rgb(0, 0, 0);} .two { background-color: rgb(0, 0, 0);} .three { background-color: rgb(0, 0, 0);}
Step 36
.one { background-color: rgb(255, 0, 0);} .two { background-color: rgb(0, 255, 255);}
Step 37
h1 { text-align: center; background-color:rgb(0, 255, 255)}
Step 38
.one { background-color: rgb(0, 0, 0);} .two { background-color: rgb(255, 0, 0);}
Step 39
.two { background-color: rgb(0, 0, 0);}
Step 40
h1 { text-align: center; }
Step 41
<div class="marker red"> </div> <div class="marker two"> </div> <div class="marker three> </div>
Step 42
.red {
background-color: rgb(0, 0, 0);
}
.two { background-color: rgb(0, 0, 0);}
.three { background-color: rgb(0, 0, 0);}
Step 43
.red {
background-color: rgb(255, 0, 0);
}
.two { background-color: rgb(0, 0, 0);}
.three { background-color: rgb(0, 0, 0);}
Step 44
<div class="marker red">
</div>
<div class="marker green">
</div>
<div class="marker blue">
</div>
Step 45
.red {
background-color: rgb(255, 0, 0);
}
green { background-color: rgb(0, 0, 0);}
.blue { background-color: rgb(0, 0, 0);}
Step 46
.green {
background-color: #00FF00
}
Step 47
.green {
background-color: #007F00;
}
Step 48
.blue {
background-color: hsl(240, 100%, 50%);
}
Step 49
.red {
background: rgb(255, 0, 0);
}
Step 50
.red {
background: linear-gradient(90deg);
}
Step 51
.red {
background:linear-gradient(90deg, rgb(255, 0, 0))
}
Step 52
.red {
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0));
}
Step 53
.red {
background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
}
Step 54
.red {
background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
}
Step 55
.red {
background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
}
Step 56
.red {
background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
}
Step 57
.red {
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
}
Step 58
.red {
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%);
}
Step 59
.red {
background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
}
Step 60
.green {
background: #007F00;
}
Step 61
.green {
background:linear-gradient (180 deg,#55680D);
}
Step 62
.green {
background: linear-gradient(180deg, #55680D, #71F53E);
}
Step 63
.green {
background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
}
Step 64
.red {
background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113) , rgb(162, 27, 27));
}
Step 65
.red {
background: linear-gradient( rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}
.green { background: linear-gradient( #55680D, #71F53E, #116C31);}
Step 66
.blue {
background: hsl(240, 100%, 50%);
}
Step 67
.blue {
background:linear-gradient(hsl(186, 76%, 16%));
}
Step 68
.blue {
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%));
}
Step 69
.blue {
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}
Step 70
<div class="marker red">
<div class="sleeve"
</div>
Step 71
.sleeve{
width:110px;
height:25px;
}
Step 72
.sleeve {
width: 110px;
height: 25px;
background-color:white;
}
Step 73
.sleeve {
width: 110px;
height: 25px;
background-color: white;
opacity:0.5;
}
Step 74
.sleeve {
width: 110px;
height: 25px;
background-color: white;
}
Step 75
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255,255,0.5)
}
Step 76
<div class="marker red">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
Step 77
.cap{
width:60px;
height:25px;
}
Step 78
.cap, .sleeve{
display:inline-block;
}
Step 79
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
border-left-width:10px;
}
Step 80
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
border-left-width: 10px;
border-left-style:solid;
}
Step 81
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
border-left-width: 10px;
border-left-style: solid;
border-left-color:black;
}
Step 82
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
border-left:10px solid black;
}
Step 83