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
+221 −9
Closed

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

Show file tree
Hide file tree
Changes from all 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
138 changes: 138 additions & 0 deletions Wireframe/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
/* 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: 200px;
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 {
display: inline-block;
padding: 10px 20px;
margin-top: 15px;
background-color: #0000CC; /* GitHub blue */
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
text-decoration: none;
}
.read-more-button a{
color: #fff;
text-decoration: none;
}
.read-more-button:hover{
color: #0000CC;
background-color: #111;
}

/* Hover effect on the link within the button */
.read-more-button {
background-color: #0056b3; /* Darker blue on hover */
}
/* choose first child in sub section button */
.subsection-second .subsection:first-child h2{
color: red
}


/* Footer Section */
.footer-section {
height: 5vh;
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;
}
92 changes: 83 additions & 9 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,87 @@
<!DOCTYPE html>
®<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wireframe</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Git Wire-frame</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html
<!-- 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">
<a
href="https://docs.github.com/en/get-started/start-your-journey/about-github-and-git"
target="_blank"
>Read More</a
>
</button>
</section>
<!-- Sub-Section-main -->
<section class="subsection-second">
<!-- Subsection 2 -->
<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">
<a
href="https://docs.github.com/en/get-started/start-your-journey/about-github-and-git"
target="_blank"
>Read More</a
>
</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">
<a
href="https://docs.github.com/en/get-started/start-your-journey/about-github-and-git"
target="_blank"
>Read More</a
>
</button>
</section>
</section>
</main>

<!-- Footer Section -->
<footer class="footer-section">
<p>&copy; 2024 Git Tutorial</p>
</footer>
</body>
</html>