Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

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

Closed
wants to merge 10 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 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
c5331b7
Using first-child pseudoclass
fmoriyele Oct 27, 2024
daaccae
Centering first article
fmoriyele Oct 27, 2024
387c714
Adding image descriptions to the three article images
fmoriyele Oct 27, 2024
3f60189
Made buttons larger for accessibility (Lighthouse)
fmoriyele Oct 27, 2024
fb2289e
Merge branch 'main' into feature/wireframe
SallyMcGrath Oct 28, 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
49 changes: 49 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,49 @@
.title-section {
margin-bottom: 70px;
text-align: center;
}

article {
margin-bottom: 50px;
}

#article-1 {
width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
}

button {
margin-top: 20px;
padding: 15px 20px;
font-size: 20px;
border-radius: 5px;
border-color: rgb(194, 197, 197);
}

.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;
}
59 changes: 55 additions & 4 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>


<!--Article 1-->

<article id="article-1">
<header>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3w5v3NHCaW5Ig1eG2mWbruAG3_rk_4_tJtg&s" alt="Orange Git logo with 'Git' written alongside the logo.">
<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" alt="Cartoon of a developer sitting with their laptop, looking at CSS and HTML code.">
<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 id="article-3">
<header>
<img id="branch-img" src="https://uploads.sitepoint.com/wp-content/uploads/2019/06/155993572204-gitflow.png" alt="Displaying the Master branch in Git, with 3 additional branches named 'Develop', 'Feature' and 'Feature'">
<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>

<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
</html>