CSS Help wanted! I created a website focused on bringing the latest go news to people in English but I am noob at web dev and need some CSS Help!

xiaodaiboy · January 3, 2023, 5:12am

See my post here?

I’ve created the website now

Ok. I made the website. Here it is shoulderhit.com

But I think I need help with CSS.

Can anyone here volunter to help me create some CSS? would be good.

I want to have clearly separated bordereds for the posts like this

But currently my one is like this

Here’s the code GitHub - shoulderhitdotcom/shoulderhit.com.github.io: The website

If you know how to make this work please DM me or ask questions on github

benjito · January 3, 2023, 12:30pm

If you right click, then “Inspect Element” on the page you like, then you can view and/or copy the CSS for that element. Maybe worth a shot?

Gia · January 3, 2023, 1:17pm

Unfortunately I’m useless with anything github, but if you accept comments on the content, I’d suggest adding date stamps.

xiaodaiboy · January 3, 2023, 1:19pm

I already know basic tricks like this I even found how to make bounding styles but the base style seems to overwrite my style so i think i just need to learn css properly so I can fix it or get some quick help.

css and html doesn’t interest me so I wnat to get it done asap without too much hassle.

Uberdude · January 3, 2023, 2:31pm

Whack !important everywhere!

Animiral · January 3, 2023, 2:33pm

You could ask ChatGPT for inspiration. I prompted it for some CSS, and out came almost the same design that you already have, except with boxes around the articles! Isn’t that nice.

I created a website for Go world news. I will provide the HTLM source code of the page with some example content, and you will reply with code for a slick, modern CSS style sheet to match it.

ChatGPT reply and conversation

Sure! Here is an example of a modern CSS stylesheet that you can use to style your Go world news website:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

header {
  background-color: #333;
  color: white;
  padding: 30px;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 40px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 20px;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: white;
  text-decoration: none;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

article {
  width: 30%;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

article img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

article h2 {
  font-size: 24px;
  margin: 10px;
}

article p {
  font-size: 16px;
  margin: 10px;
}

footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

footer p {
  margin: 0;
}

This stylesheet will give your website a modern, clean look with a navigation bar, header, and footer. It also includes styles for articles and images, so you can easily add content to your website.

I hope this helps! Let me know if you have any questions.

(pasted your whole source code here)

To style the website using the CSS stylesheet I provided, you can add the following line of code to the section of your HTML page:

Replace /path/to/styles.css with the actual path to your CSS file. This will apply the styles defined in the stylesheet to your website.

Here is an example of how you can use the styles in the stylesheet to style the different elements on your website:
<body>
  
  <div id="header_wrap" class="outer">
      <header class="inner">
        <h1 id="project_title">shoulderhit.com</h1>
        <h2 id="project_tagline">All your pro Go/Baduk/Weiqi needs</h2>
      </header>
  </div>

  
  <div id="main_content_wrap" class="outer">
    <section id="main_content" class="inner">
      
    </section>
  </div>

  
  <div id="footer_wrap" class="outer">
    <footer class="inner">
      
    </footer>
  </div>
</body>
The header element will be styled using the styles defined in the header section of the stylesheet, the nav element will be styled using the styles defined in the nav section, and so on.

I hope this helps! Let me know if you have any questions.

Please make the stylesheet match the tags in my provided HTML content. I use blockquote, h2 and div elements.

Certainly! Here is an updated version of the CSS stylesheet that includes styles for the blockquote, h2, and div elements:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

header {
  background-color: #333;
  color: white;
  padding: 30px;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 40px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 20px;
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: white;
  text-decoration: none;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

article {
  width: 30%;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

article img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

article h2 {
  font-size: 24px;
  margin: 10px;
}

article p {
  font-size: 16px;
  margin: 10px;
}

article blockquote {
  border-left: 5px solid #333;
  padding: 10px 20px;
  margin: 20px;
}

article blockquote p {
  margin: 0;
  font-style: italic;
}

footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

footer p {
  margin: 0;
}

This stylesheet will give your website a modern, clean look with a navigation bar, header, and footer. It also includes styles for articles and images, as well as styles for the blockquote, h2, and div elements.

I hope this helps! Let me know if you have any questions.

Now, it did insist on using the article tag in the style, so I just changed some of your divs to article.

xiaodaiboy · January 4, 2023, 12:34am

Nicely done. that one is forcing me to try and understand a few things about it. The main div seems to be giving article some padding and giving it a background color of white.