xris
February 18, 2023, 2:18pm
1
[https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-63 ]
here’s my code
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}
fieldset:last-of-type {
border-bottom: none;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
#terms-and-conditions {
text-color: #dfdfe2;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
min-width: 300px;
}
input[type="file"] {
padding: 1px 2px;
}
hbar1st
February 18, 2023, 3:51pm
2
hi there, did you have a question?
xris
February 18, 2023, 4:40pm
3
yes, the color of the text link didn’t change after i styled it
hbar1st
February 18, 2023, 5:48pm
4
This code targets this element
<input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" />
It does not target the link.
You should pay attention to the guide. You aren’t targeting your a tag. I don’t see any id in your a tag
xris
February 18, 2023, 6:45pm
6
please how do i do that ?
hbar1st
February 18, 2023, 7:04pm
7
if you reset the code (using the button that has an arrow on it)
and simply click the Check button without typing anything, the hint will tell you what type of selector to write
(it’s the a
selector)
xris
February 21, 2023, 4:36pm
8
i wrote the a selector, it still won’t let me go through.
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}
fieldset:last-of-type {
border-bottom: none;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
#terms-and-conditions {
text-color: #dfdfe2;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
min-width: 300px;
}
input[type="file"] {
padding: 1px 2px;
}
a:link{
color:#dfdfe2;
}
Blockquote
xris:
a:link{
color:#dfdfe2;
}
There is no such pseudo-class named link
. An anchor element is a link. You do not need to add a pseudo-selector to it.
xris
February 21, 2023, 4:51pm
10
it still won’t work even when i removed the “link”
You will need to post your new code so we can see exactly what you have.
xris
February 21, 2023, 5:36pm
12
here’s it:
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}
fieldset:last-of-type {
border-bottom: none;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
}
input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
#terms-and-conditions {
text-color: #dfdfe2;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
min-width: 300px;
}
input[type="file"] {
padding: 1px 2px;
}
a:{
color:#dfdfe2;
}
xris:
a:
That is not a valid anchor selector. I would go back and review how you learned to create anchor selectors in the Learn Basic CSS by Building a Cafe Menu Project
xris
February 22, 2023, 8:57am
14
i tried going back to my the completed of building a cafe menu project.
can you just tell me what to do please, it’s getting frustrating
hbar1st
February 22, 2023, 11:14am
15
The hint (and I) already told you exactly what to do.
Use an a selector
(Not an a: selector)
xris
March 1, 2023, 7:22am
16
thanks much, i got it right finally