My Dasmoto project

[newbydood]

I went into this thinking it was gonna be a walk in the park. After several hours of wondering why this wouldn’t go where I wanted and why that didn’t work, several hours of googling snippits, tips and tricks, I finally got the Dasmoto student project “finished.”

Every time I decided I was done I noticed something I forgot or thought of something else different to do. There’s still one thing I’m not happy with, but I’m ok enough to let it go because I’m ready to move on.

At the very bottom is an “Attribute” button; click it and “credit” text appears. Click the button again and it disappears. I wanted the button center and the “credit” text to replace the button and add a new button at the end of the sentence to re-hide the text (just a novelty thing.) But, I ended up with it this way. Moving on…

Is there someplace I can post it as a webpage to share the link to show off my project to people who don’t really care but would say something nice like “wow… that’s great… good job… I could never do something like that… keep up the good work,” like my kids or parents or that one friend?

Here’s the git repo … I think. I still don’t understand Github that well. When I pushed it from VS Code it took my other test/tut projects too. I deleted them in one place but still see them in another.

GitHub - NewbyDood/DasmotosArtsandCrafts_Codecademy: Student project from Codecademy building an arts and crafts website for a fictional artist. Dasmoto’s Arts and Crafts

Thanks for taking the time to check it. Hope it’s somewhat satisfactory. Have a great day, yall!
Screenshots…

[usernamegiapreso]

Hey newbydood! How is it going?

went into this thinking it was gonna be a walk in the park.

haha this makes me chuckle, as I feel you, working with CSS is often full of twists and turns.

There’s still one thing I’m not happy with, but I’m ok enough to let it go because I’m ready to move on.
At the very bottom is an “Attribute” button; click it and “credit” text appears. Click the button again and it disappears. I wanted the button center and the “credit” text to replace the button and add a new button at the end of the sentence to re-hide the text (just a novelty thing.) But, I ended up with it this way. Moving on…

If you post a code snippet of the element and its style maybe I can help you to work out what’s the issue

Is there someplace I can post it as a webpage to share the link to show off my project to people who don’t really care but would say something nice like “wow… that’s great… good job… I could never do something like that… keep up the good work,” like my kids or parents or that one friend?

So in your case there’s Github pages, which I never used, but it should be free. I can link to you three articles from one of the Codeacademy Career Paths:

• what-is-github-pages

• Deploy a website to Github Pages

• Github Pages docs

Or you could just buy a shared hosting service for about 10-20$/year usually they also come with a custom domain name, and practice on how to deploy on servers. It’s quite easy, so in case do not worry.

There are also another ton of ways, both free and freemium, but it’s complicated.

[newbydood]

Hi back at ya @usernamegiapreso ! I appreciate your time and input very much!

Here’s the html and css you requested… It’s the entire footer section, because, well, that’s the only thing in my footer.

<div class="footer"> 

    <label for="toggle">Attribute</label>

    <input type="checkbox" id="toggle" class="visually-hidden">

    <div class="control-me"></div>

</div>

---

/Footer section/

#footer a:link{

color: black;

text-shadow: blueviolet;

font-size: 30px;

}

#footer a:hover {

opacity: .70;

text-decoration: none;

font-family: cursive;

}

.footer {

background-image: url("C:/Users/jessi/Documents/Codecademy Projects/Dasmoto_Art_Craft/Resources_Dasmoto/pattern.webp");

width: 101%;

height: 75px;

margin-bottom: 5px;

filter: drop-shadow(1px 1px 1px black);

}

.control-me::after {

content: "";

font-size: 25px;

}

#toggle:checked ~ .control-me::after {

content: "Created by NewbyDood thanks to Codecademy";

margin-left: 35%;

padding-bottom: 20%;

}

label {

background: cornflowerblue;

padding: 0.5rem 1rem;

border-radius: 0.5rem;

opacity: .60;

margin-top: 20%;

margin-left: 50%;

margin-bottom: 50%;

}

[usernamegiapreso]

So just to be clear, the expected behaviour should be:

• user click on button “attribute”

• text appears

• button “attribute” disappears

• button “hide attribute” appears

Correct?

I think you forgot to shared one rule of your css related to the footer, this should be it, correct?

#footer a:link{
    color: black;
    text-shadow: blueviolet;
    font-size: 30px;
}
#footer a:hover {
    opacity: .70;
    text-decoration: none;
    font-family: cursive;

}
.footer {
    background-image: url("C:/Users/jessi/Documents/Codecademy Projects/Dasmoto_Art_Craft/Resources_Dasmoto/pattern.webp");
    width: 101%;
    height: 75px;
    margin-bottom: 5px;
    filter: drop-shadow(1px 1px 1px black);
}
.control-me::after {
    content: "";
    font-size: 25px;
}
#toggle:checked ~ .control-me::after {
    content: "Created by NewbyDood thanks to Codecademy";
    margin-left: 35%;
    padding-bottom: 20%;
}

label {
    background: cornflowerblue;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    opacity: .60;
    margin-top: 20%;
    margin-left: 50%;
    margin-bottom: 50%;
}

.visually-hidden {
    position: absolute;
    left: -100vw;
}

[newbydood]

It does appear I cut off the “.visually-hidden” portion.
But it sounds like you understood. If you look back up at the page screenshots, one photo shows “Attribute” without the text. The next photo shows with it.

I wanted the “Attribute” button to be centered then replaced by the text with a new button at the end of the text to re-hide it and allow the “Attribute” button to reappear. But I couldn’t even get the button to center. It’s as if it is all being read as a single text block.

Of course, none of it is important and if it were for a real site would be unnecessary. I just enjoy the cool tricks and wanted to try to make it happen. Of course, for a real site, there may be a time and place this effect could be useful.

-P.S.- How did you get all the code into the box? Is that with the “Codebyte” button?

[usernamegiapreso]

Yes it’s a Codebyte, it’s very cool, right

Later today I’ll check this out and I’ll try to give you a code snippet on how to achieve that, it could be useful to learn some new trick indeed

[usernamegiapreso]

So, I just realized that I didn’t share with you a Codebyte! xD
I simply added all the code inside the “preformatted text” button:

Or you can either add three backticks ``` before and after your code block.

Or you can select all your code and once selected use Ctrl + Shift + C which is the shortcut for the “preformatted text” button.

About your code:
in order to do that only with CSS I think you may want to try using the :target pseudo-element. But CSS is pretty limited about how you can manipulate the html. You can learn about it and try it out anyway.

Basically what the :target does is to attach itself to a recipient element. A bit like what you’re doing with the #toggle check thing.
The target is often used to create side menus CSS only. See this vid:

Thinking on ways to solve a SIDENAV

About the centre thing, I think your button (which is not a button element however) is only slightly decentred because you’re giving it a margin-left: 50%; that is not accounting for the width of the element itself.

The text instead is not centered at all.

I think you may want to try to drop the checkbox and try some other strategy. You could use a button element instead of a label element, add a href attribute to your button, point the href to a div that is initially hidden, inside this div you could put the second button and the text inside a paragraph or span element.

Ideally once the first button is clicked, it points to the href, which is a hidden div, that becomes visible.

The hidden div is going to be also styled with the :target pseudo element, to make it visible. Here you will have to figure out how the new div (containing a new button and the text) should cover the old button.

The new button now could use the same logic, target the previous button that reappears hiding the the div containing the other button and the text.

Doing this with Javascript would be a piece of cake though. With CSS is like trying to hammer a nail with a shoe.

[newbydood]

Ah yeah… I forgot, I made the margins because I couldn’t to get it to center. I just eyeballed it.

Originally it was just going to be a simple “made by” attribute with a “return to top” link just to have something in the footer where most pages have a contact or copyright notice. But then… Believe it or not, I had stumbled across a target pseudo hide tutorial. At first it was just a href link and it worked at first but I had to use the same link to re-hide the text and every time I clicked it the page would jump back to the top (was set to “#” target.)

BUT… the link was styled the same as the nav links. When I began trying to make it it’s own style (and a button instead of text link) it began to break the function. That’s how I ended up with the code it is now.

[usernamegiapreso]

alright, have you learnt about flexbox in this CSS course in Codeacademy?

Because if you did then, centering it’s super easy.

[newbydood]

Negative. I’ve heard the word Flexbox a few times, but no idea what it is yet.
I suppose it has nothing to do with the box bodybuilders stand in to flex their poses?

[usernamegiapreso]

Haha I guess not xD I won’t spoil you anything, I believe you should get to learn it soon enough if you’re following one of the carrer paths.

Cheers

[course8736571896]

Hi! You did an amazing job! I have been working on this and thought I was doing pretty good until I had to put the picture and the header together. Thank you for posting! it really helped me!

[newbydood]

Thank you. No doubt you’ll get it down and do even better.