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

Projects Challenge Projects
1316

Hi everyone, Vincent will appreciate corrections and comments on this solution.
Thanks in advance

1317

Hey everyone :slight_smile: Will be happy to have comments/feedbacks on my code <3

1 Like
1318

Website: https://preeminent-entremet-6adcb1.netlify.app/
git: GitHub - mlars03/website-design-system-starting

Here’s my project. Open to any comments. Thanks

1319

This is so pleasant to look at <3. Great job!

1 Like
1320

here’s my project! Codecademy export · GitHub

1321

Hi:)
Here’s my little Style Guide.
I appreciate your comments!

4 Likes
1322

Hey!
doing this is hard, but i’ll preveil!

Link: Style Guide

1323

Here is a link to the github files! Please review my code and let me know how I can improve! Thank you

1324

https://www.codecademy.com/workspaces/6658dde37dc27a5c688e60e8

SpaceCrafts Website 
<!-- Main Content -->
<div class="main-content">
  <!-- About Us Section -->
  <section id="about-us">
    <h2>About Us</h2>
    <img src="about_us.jpg" alt="About Us Photo" />
    <p>
      SpaceCrafts is a leading provider of space exploration technology. We
      specialize in designing and manufacturing state-of-the-art spacecraft
      for various missions, including satellite deployment, space
      exploration, and scientific research. Our team of experienced
      engineers and scientists is dedicated to pushing the boundaries of
      space exploration, enabling humanity to reach new frontiers and unlock
      the mysteries of the universe. With a commitment to innovation and
      excellence, we strive to deliver cutting-edge solutions that
      revolutionize the way we explore and understand the cosmos.
    </p>
    <!-- Add more content to make it at least 40 lines -->
  </section>

  <!-- Products Section -->
  <section id="products">
    <h2>Products</h2>
    <img src="products.jpg" alt="Products Photo" />
    <p>
      Our product lineup includes a wide range of spacecraft solutions
      tailored to meet the diverse needs of our clients. From small CubeSats
      to large interplanetary probes, we have the expertise and capabilities
      to deliver innovative and reliable spacecraft for any mission. Our
      products are designed with precision engineering and cutting-edge
      technology, ensuring optimal performance and reliability in the harsh
      environment of space. Whether it's launching satellites into orbit,
      exploring distant planets, or conducting scientific research in
      microgravity, our spacecraft are at the forefront of space
      exploration, driving innovation and progress in the field.
    </p>
    <!-- Add more content to make it at least 40 lines -->
  </section>

  <!-- Surprise Section -->
  <section id="surprise">
    <h2>Surprise</h2>
    <img src="surprise.jpg" alt="Surprise Photo" />
    <p>
      At SpaceCrafts, we are constantly pushing the boundaries of space
      exploration. Stay tuned for exciting announcements and groundbreaking
      projects that will shape
    </p>
  </section>
</div>
1325

/* Reset CSS */
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}

/* Global Styles /
body {
font-family: Arial, sans-serif;
background-color: #fff; / White background /
color: #333; / Dark text color */
}

/* Header Styles /
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: orange; / Orange header background /
padding: 10px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); / Shadow effect /
z-index: 1000; / Ensure header is on top of other content */
}

header h1 {
font-size: 24px;
color: #fff; /* White text color */
}

/* Main Content Styles /
.main-content {
margin-top: 80px; / Ensure content starts below fixed header */
padding: 20px;
}

/* Section Styles */
section {
margin-bottom: 40px;
}

section h2 {
font-size: 20px;
margin-bottom: 10px;
color: goldenrod; /* Golden yellow text color */
}

section p {
line-height: 1.6;
}

1326

Here is my Website Design System: K&S Conservatory of Music Website Design System

1327

Here’s my project!
https://dazm153.github.io/Web-Design-Guide/

1 Like
1328

Hi,
this is my work done for Website Style Guide Challenge Project (HTML, CSS)

1330

Hello, here is my code:

1331
1332

Project repository link : cy4adil/styleguide.github.io

See project live here: Document (cy4adil.github.io)

1333

Professional Work :+1:

1334

:tada: I just finished the Challenge Project: Build a Website Design System and would love to get your feedback. You can view my project here: https://stackblitz.com/edit/web-platform-sxv7eh?file=index.html. Thanks in advance for your insights!

Capture d'écran 2024-06-10 001551
Capture d'écran 2024-06-10 001551615×693 22.5 KB

1 Like
1335

Here is mine! Please give me your opinions on this (in a nice way).

PS: Do you know how I can upload it to GitHub as a project? I want to start making my portfolio but I’m stuck on it (I’ve never used GitHub before hahahaha)
My Website Style Guide!

2 Likes
1336

pls check mine!
yours looks great :smiley:

1 Like