Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

London|Phone Naing|Module-User-Focused-Data|Week1 #306

Closed
wants to merge 3 commits into from
Closed

London|Phone Naing|Module-User-Focused-Data|Week1 #306

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
95fe614
add index and style
Mgphone Nov 2, 2024
efd451b
add first child
Mgphone Nov 2, 2024
8eebd8f
align images, use first-child, footer fixed
Mgphone Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git Wireframe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Title Section -->
<header class="title-section">
<h1>Understanding Git</h1>
<p>This is essential to understand git for developer</p>
</header>

<!-- Main Section -->
<main class="main-section">
<!-- Subsection 1 -->
<section class="subsection">
<img src="https://git-scm.com/images/logos/2color-lightbg@2x.png" alt="What is Git">
<h2>What is Git?</h2>
<p>Git is a distributed version control system that allows developers to track changes in their codebase, collaborate, and manage project versions efficiently.</p>
<button class="read-more-button" onclick="window.location.href='https://docs.github.com/en/get-started/start-your-journey/about-github-and-git'">Read More</button>
</section>

<!-- Subsection 2 -->
<section class="subsection-second">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This section structure looks good, but it really helps a lot to read it if you increase the indentation for each section inside a section. It makes it much more readable if you format it this way:

    <section class="subsection-second">
            <section class="subsection">
                <img src=https://i.sstatic.net/e3dd7.jpg" alt="Why do developers need Git?">
                <h2>Why do developers need Git?</h2>
                <p>Git is essential for developers as it facilitates collaboration, allows tracking of code changes, and helps manage different versions of projects.</p>
                <button class="read-more-button" onclick="window.location.href='https://docs.github.com/en/get-started/start-your-journey/about-github-and-git'">Read More</button>
            </section>

            <!-- Subsection 3 -->
            <section class="subsection">
                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240226111013/image-258.webp" alt="What is a branch in Git?">
                <h2>What is a branch in Git?</h2>
                <p>A branch in Git allows developers to create separate lines of development, making it easier to work on features independently before merging them.</p>
                <button class="read-more-button" onclick="window.location.href='https://docs.github.com/en/get-started/start-your-journey/about-github-and-git'">Read More</button>
            </section>
     </section>

This way you have a clear way to know where a section starts and ends.
If you're using and IDE like VS Code, there is always the option to request the IDE to format it for you. In VS Code, the option is called Format Document

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks that idea is lovely :)

<section class="subsection">
<img src=https://i.sstatic.net/e3dd7.jpg" alt="Why do developers need Git?">
<h2>Why do developers need Git?</h2>
<p>Git is essential for developers as it facilitates collaboration, allows tracking of code changes, and helps manage different versions of projects.</p>
<button class="read-more-button" onclick="window.location.href='https://docs.github.com/en/get-started/start-your-journey/about-github-and-git'">Read More</button>

</section>

<!-- Subsection 3 -->
<section class="subsection">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240226111013/image-258.webp" alt="What is a branch in Git?">
<h2>What is a branch in Git?</h2>
<p>A branch in Git allows developers to create separate lines of development, making it easier to work on features independently before merging them.</p>
<button class="read-more-button" onclick="window.location.href='https://docs.github.com/en/get-started/start-your-journey/about-github-and-git'">Read More</button>
Mgphone marked this conversation as resolved.
Show resolved Hide resolved

</section>
</section>
</main>

<!-- Footer Section -->
<footer class="footer-section">
<p>&copy; 2024 Git Tutorial</p>
</footer>
</body>
</html>
131 changes: 131 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Title Section */
.title-section {
width: 100%;
padding: 40px 20px;

text-align: center;

border-bottom: 1px solid #ddd;
}

.title-section h1 {
font-size: 3rem;
color: #333;
margin-bottom: 10px;
font-weight: bold;
}

.title-section p {
font-size: 1.2rem;
color: #555;
}

/* Main Section */
.main-section {
width: 90vw;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}

/* Subsection (Full Width) */
.subsection {
width: 100%;
padding: 20px;
margin: 20px 0;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.subsection img {
width: 300px;
height: auto;
max-height: 250px;
border-radius: 8px;
}

.subsection h2 {
margin-top: 15px;
font-size: 2rem;
color: #333;
}

.subsection p {
margin-top: 10px;
color: #555;
font-size: 1.1rem;
}

/* Subsection-Second (Two Columns) */
.subsection-second {
display: flex;
justify-content: space-between;
width: 100%;
gap: 20px;
margin: 20px 0;
}

.subsection-second .subsection {
width: 48%;
}

.subsection-second .subsection img {
max-height: 200px;
}
/* Read More Button */
.read-more-button {
padding: 10px 20px;
margin-top: 15px;
background-color:#0000CC; /* GitHub blue */
color: #fff;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}


.read-more-button:hover {
background-color: #0056b3; /* Darker blue on hover */
}

.read-more-button:active {
transform: scale(0.98); /* Slightly smaller on click */
}
/* using subsection first child */
.subsection:first-child .read-more-button {
background-color: #28a745; /* Change to a different color */
}

/* Footer Section */
.footer-section {
width: 100%;
padding: 20px;
background-color: #333; /* Dark background color */
color: #fff; /* White text */
text-align: center;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow at the top */
position: relative;
bottom: 0;
}

.footer-section p {
font-size: 1rem;
margin: 0;
}