Hello ! I wanted to thank the freeCodeCamp community. creating stuff with CSS is theraputic to me .
I wanted to share my code but I’m not aware of the syntax.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
1 Like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>General</title>
<link rel="stylesheet" href="/Css/general.css">
</head>
<body>
<div class="frame">
<div class="character" id="character">
<div id="head" class="head">
<div class="character-hair">
<div id="star-five"></div>
</div>
<div id="character-left-eye" class="character-left-eye"></div>
<div id="character-right-eye" class="character-right-eye"></div>
<div id="character-nose" class="character-nose"></div>
<div id="character-mouth" class="character-mouth"></div>
<div class="character-neck"></div>
</div>
<div class="character-body">
<div class="badge2">
<div id="star-five"></div>
<div id="star-five"></div>
<div id="star-five"></div>
</div>
<div class="badge-3">
<div id="star-five"></div>
<div id="star-five"></div>
<div id="star-five"></div>
</div>
<div class="buttons">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<div class="character-left-arm">
<div class="character-left-forearm"></div>
</div>
<div class="character-right-arm">
<div class="rolex">
<div class="rolex-circle"></div>
</div>
</div>
<div class="character-belt">
<div class="belt-buckle"></div>
</div>
<div class="character-legs">
<div class="leg-divider"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<p>How To share with css?</p>
you share css in the same way, that is code too
1 Like
*{
box-sizing: border-box;
}
body{
background-color: rgb(0, 0, 0);
overflow: hidden;
color: white;
}
.frame{
height: 50vh;
background-color: rgb(224, 149, 52);
width: 80%;
margin: 15% auto;
}
.character{
height: 400px;
width: 500px;
background-color: rgb(77, 135, 194);
margin: auto;
}
.head{
width: 30px;
height: 35px;
background-color: rgb(0, 0, 0);
position: relative;
left: 50%;
top: 18%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 80%;
border-top-left-radius: 20%;
border-top-right-radius: 50%;
}
.character-hair{
width: 30px;
background-color: rgb(207, 7, 7);
height: 8px;
border-top-left-radius: 45%;
border-top-right-radius: 45%;
border-bottom-right-radius: 75%;
top: -4px;
position: relative;
}
.character-left-eye{
width: 8px;
height: 4px;
background-color: rgba(255, 0, 0, 0.703);
margin-left: 4px;
filter: blur(1px);
}
.character-right-eye{
width: 8px;
height: 4px;
background-color: red;
top: -4px;
left: 18px;
position: relative;
filter: blur(1px);
}
.character-nose{
height: 10px;
width: 2px;
background-color: gold;
border-radius: 2px;
margin: auto;
filter: blur(1px);
top: -3px;
position: relative;
}
.character-mouth{
height: 2px;
width: 20px;
background-color: rgb(255, 0, 0);
margin: auto;
position: relative;
top: 1px;
border-bottom-left-radius: 90%;
border-bottom-right-radius: 5%;
filter: blur(1px);
transform: rotate(180deg);
}
.character-neck{
height: 4px;
width: 5px;
background-color: rgb(255, 0, 0);
margin: auto;
position: relative;
top: 7px;
}
.character-body{
height: 35px;
width: 35px;
top: 75px;
left: 15px;
border: 4px solid rgb(20, 94, 25);
background-color: transparent;
margin: 0 auto;
position: relative;
border-radius: 10%;
background: linear-gradient(to right, rgb(13, 83, 5) 20%, rgb(48, 103, 11) 70%, rgb(39, 101, 11) 20% );
}
.character-left-arm{
height: 5px;
width: 35px;
background-color: rgb(2, 2, 2);
margin: auto;
position: absolute;
left: -32px;
top: -12px;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 25%;
border-top-left-radius: 25%;
transform: rotate(40deg);
}
.character-left-forearm{
height: 5px;
width: 40px;
background-color: black;
margin: auto;
position: relative;
top: -15px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
right: 15px;
transform: rotate(110deg);
}
.badge2{
display: flex;
flex-direction: row;
margin: auto;
position: relative;
left: -12px;
top: -7px;
}
.badge-3{
display: flex;
flex-direction: row;
margin: auto;
position: relative;
left: 10px;
top: -11px;
}
#star-five {
clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%);
background-color: gold;
height: 4px;
width: 4px;
position: relative;
left: 10px;
top: 3px; }
.buttons{
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 2px;
margin: auto;
position: relative;
right: 50%;
left: 50%;
top: -13%;
}
.button{
height: 2px;
width: 2px;
background-color: gold;
border-radius: 100%;
}
.character-right-arm{
height: 5px;
width: 45px;
background-color: rgb(2, 2, 2);
margin: auto;
position: absolute;
left: 18px;
top: 18px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(65deg);
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
.character-belt{
height: 3px; width: 30px;
background-color: brown;
position: relative;
margin: auto;
top: 5px;
left: -2px;
}
.belt-buckle{
height: 2px;
width: 5px;
background-color: gold;
margin: auto;
position: relative;
top: 1px;
}
.character-legs{
height: 38px;
width: 30px;
background-color: rgb(14, 95, 14);
position: relative;
margin: auto;
top: 5px;
left: -2px;
}
.leg-divider{
height: 35px;
width: 2px;
vertical-align: middle;
background-color: black;
margin: auto;
position: relative;
top: 4px;
}
.rolex{
height: 2px;
width: 6px;
background-color: gold;
position: relative;
left: 35px;
border-radius: 2px;
transform: rotate(90deg);
}
.rolex-circle{
height: 2px;
width: 2px;
background-color: red;
margin: auto;
border-radius: 2px;
}
what questions do you have about this code?
1 Like
I wanted to share my code as a gratitude to FreeCodeCamp. I use CSS For recreational purposes.