Build a Website Style Guide Challenge Project (HTML, CSS)

Projects Challenge Projects
#847

Thank you, appreciate it! Nice work on yours as well :slightly_smiling_face:

#848

Hey Hey Everyone! :wave:

For my solution I went with a basic design guide. I hope you like it!

I’ve been looking to some of your work for this project and let me say great job to all of you! I really liked what I saw :smile:

:arrow_right: Live Solution

:arrow_right: Github Repository

#849

here is my solution, still working on making it more responsive but just thought i would share my basic guide so far.

#850

Here is my attempt:

:arrow_right: Live
:arrow_right: Repository

Would love some feedback!

#851

Here is my Website Style Guide.

Would love to get some feedbacks

image
image972×518 27.7 KB

#852

please check out my code.

#854

Any tips would be much appreciated! Couldn’t quite remember how to center content in the divs automatically, so I tried my best manually adjusting the margins to make it look centered.

#855

It does indeed, thank you!

1 Like
#856

I really like the overall page design. It’s very modern and minimalist. I like how you styled the CSS for the color palette to keep the page free of extra text. The color palette itself is bold and really pops with the minimalist design.
Your code is really clean too.
I’m just starting this challenge. Thanks for the inspiration.

#857

Here’s mine:
:small_blue_diamond: Live site
:small_blue_diamond: Code gist

Let me know what you think. :slight_smile:

#858

The projects posted here are very impressive. Good job everyone.

Here’s mine:
Github: Repository
Live: Github Page

I do have a question about how to properly use CSS position with internal links. I have styled the page to have a fixed header at the top and a fixed Navigation column on the left side of the page.

I tried to used position:absolute on the main container to position the content where it’s visible. However when you click on the internal link, the part of the page that the link points to displays at the top of the page, behind the header.

image
image1736×1204 85.1 KB

The HTML, Navbar links section:

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-btn"><a class="nav-link" href="#color-section">Colors</a></li>
        <li class="nav-btn"><a class="nav-link" href="#font-section">Typography</a></li>
        <li class="nav-btn"><a class="nav-link" href="#style-section">Styles</a></li>
    </ul>
</nav>

<main>
    <div class="container" id="color-section">
        <h2>Colors</h2>
        <div class="color-container">
           ...
        </div>
    </div>

    <!--  Fonts  -->
    <div class="container" id="font-section">
        <h2>Fonts</h2>
        <div class="font-container">
          ...
        </div>
    </div>

This is how I styled the main in the CSS:

main {
position: absolute;
top: 84px;
left: 200px;
margin: 0;
border: 0;
padding: 5px;
}

#859

Hello. Check this out pls.
GitHub
Web

#860

Hello everyone, here’s my Website Style Guide looking forward to hear some feedback, i wanted to put some extra touch with the interactive part but I’m proud of the result! :smiley:

2 Likes
#861

This is my attempt toward this projects, feel free to check it out!

Github Repo For Code Refer

Github Page for Preview

I deployed the page on my github repository.
In css, I also refer this page for this very cool button “Click Me” as you can see it on my page.

2 Likes
#862

Thank you so much for the feedback, I really appreciate it! Looking forward to seeing yours when it’s done :slight_smile:

#863

I definitely feel like I overcomplicated this but if someone could review mine that’d be great!
[Projects/index.html at main · JEastham2/Projects · GitHub][Projects/styles.css at main · JEastham2/Projects · GitHub]

#864

Hello everyone, here is my website style guide project Challenge project
Looking forward for feedback from you guys :smile:

#865

Really nice buttons :slight_smile: