KP-C

Kevin Powell - Community•4w ago•

4 replies

✴ Miracle ✴

Needs Advice

I was doing a frontend mentor challenge and I got stuck on how to progress further

This is my css code
:root{
--pry_100: #4ABEBD;
--pry_200: hsl(71, 73%, 54%);
--pry_300: #2BB3B1;
--sry_100: hsl(204, 43%, 93%);
--sry_200: hsl(218, 22%, 67%);
--neutral_100: hsl(0, 0%, 100%);
--fs_100: 1rem;
--fs_200: 1.25rem;
--fs_300: 0.75rem;
}
body{
background-color: var(--sry_200);
}
.main{
padding-left: 2rem;
margin: 0%;
font-size: 17px;
position: relative;
border-radius: 0.24rem;
display: grid;
grid-template-columns: auto auto;
grid-row: 2/3fr 1/3fr;
justify-content: center;
}

h1{
font-size: var(--fs_200);
color: var(--pry_100);
}
h2{
font-size: var(--fs_100);
color: var(--neutral_100);
}
h3{
font-size: var(--fs_100);
color: var(--pry_200);
}

.Join-us{
background-color: var(--neutral_100);
grid-column: 1 / span 2;
padding: 1rem;
color: var(--sry_200);
}

.Subscription{
background-color: var(--pry_300);
color: var(--neutral_100);
padding: 1rem;
}
.Why{
background-color:var(--pry_100);
padding: 1rem;
}

.dollar{
font-size: 1.5rem;
color: var(--neutral_100);
padding: 1rem;
}
.small_text{
font-size: 0.75rem;
color: var(--neutral_100);
}
a:link, a:hover, a:visited, a:active{
text-align: center;
padding: 0.15rem 5rem;
font-size: 1rem;
text-decoration: none;
color: var(--neutral_100);
background-color: var(--pry_200);
}
.tiny {
font-size: var(--fs_100);
color: var(--sry_200);
}

button {
position:relative;
text-align: center;
padding: 1.25rem;
}




Any advice would be greatly appreciated