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

Jump to bottom

London | Funmi Moriyele | Wireframe Task | Week 2 #206

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

London | Funmi Moriyele | Wireframe Task | Week 2 #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4969624
Skeleton page code, no styling added
fmoriyele Oct 13, 2024
21cadf3
Adding text information and images to the page title, articles and fo…
fmoriyele Oct 13, 2024
a11287d
Flex-box container added for last two articles.
fmoriyele Oct 13, 2024
be7a0f4
Styling added to page
fmoriyele Oct 13, 2024
03988ef
Fixing footer to bottom of viewport
fmoriyele Oct 13, 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
45 changes: 45 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,45 @@
.title-section {
margin-bottom: 70px;
text-align: center;
}

article {
margin-bottom: 50px;
}
.article-section:first-child {
width: 700px;
display: block;
margin-left: auto;
margin-right: auto;
}

button {
width: 90px;
height: 30px;
padding: 3px 10px;
}

.text-wrap {
width: 400px;
}

#developers-img {
height: 250px;
}

#branch-img {
height: 270px;
margin: 12px 0;

}

.flex-box {
display: flex;
align-items: center;
justify-content: space-around;
}

#footer {
position: fixed;
bottom: 0;
}
57 changes: 54 additions & 3 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,61 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wireframe</title>
<link rel="stylesheet" href="style.css">
<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 -->
<!--Page Title and Introduction-->
<div class="title-section">
<h1>What is Git and why is it so important?</h1>
<p>Git is an important part of coding.
To understand what Git is and why it is important - read the articles below.</p>
</div>

<div class="article-section">
<!--Article 1-->
<article>
<header>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3w5v3NHCaW5Ig1eG2mWbruAG3_rk_4_tJtg&s">
<h1>What is Git?</h1>
</header>
<p class="text-wrap">Git is a modern version control system that is open source.
It is able to track changes of a file system, keeping track of what files are in the repository during different versions of the project.
</p>
<button><a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F">Read More</a></button>

</article>

<div class="flex-box">
<!--Article 2-->
<article>
<header>
<img id="developers-img" src="https://www.yarddiant.com/images/what-do-most-web-developers-use.jpg">
<h1>Why do developers need Git?</h1>
</header>
<p class="text-wrap">Developers can create repositories with branches, commits and code.
Git allows developers to collaborae on projects without it affecting the final project.
</p>
<button><a href="https://tripleten.com/blog/posts/why-knowing-git-as-a-developer-is-crucial">Read More</a></button>
</article>

<!--Article 3-->
<article>
<header>
<img id="branch-img" src="https://uploads.sitepoint.com/wp-content/uploads/2019/06/155993572204-gitflow.png">
<h1>What is a branch in Git?</h1>
</header>
<p class="text-wrap">Git branches provide snapshots of changes made to your code, pointing to commits.
They can be used for small or large features you want to introduce to your code.
The local or remote branches can eventually be merged to the main branch, once you are happy with the features created.
</p>
<button><a href="https://www.atlassian.com/git/tutorials/using-branches">Read More</a></button>
</article>
</div>
</div>

<footer id="footer">
<p>This website was created by Funmi M. For more details, please email:
<a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</body>
</html