FreeCodeCamp: Learn CSS Colors by Building a Set of Colored Markers Step 1 -

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

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

Step 15

.marker { width: 200px; height: 25px; background-color: red; margin:10px auto;}

Step 16

Step 17

.marker { width: 200px; height: 25px; margin: 10px auto;}

Step 18

.one { background-color:red;}

Step 19

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

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>

</div>

</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="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>

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

SEMIH is the Software Developer of JS, HTML, CSS & React.