Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
22 changes: 14 additions & 8 deletions Wireframe/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,20 @@ <h1>Wireframe</h1>
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
<article class="article-one">
<h2>Article One: What is the purpose of a README file?</h2>
<p>The ReadMe file provides a quick overview and any essential instructions for user or developer.</p>
<a href="#">Read more</a>
</article>
<article class="article-two">
<h2>Article Two: What is the purpose of a wireframe?</h2>
<p> The wireframe acts as a skeleton of a website or an application user interface.</p>
<a href="#">Read more</a>
</article>
<article class="article-three">
<h2>Article Three: What is a branch in Git?</h2>
<p>Branch is a seperated environment of your repositories where you can make commits and push to different branche to isloate changes and for version control</p>
<a href="#">Read more</a>
</article>
</main>
<footer>
Expand Down
17 changes: 17 additions & 0 deletions Wireframe/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,20 @@ article {
grid-column: span 3;
}
}
.article-one {
height: 220px;
background-size: cover;
background-position: center;
}

.article-one {
background-image: url("https://images.unsplash.com/photo-1591608516485-a1a53df39498?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

.article-two {
background-image: url("https://images.unsplash.com/photo-1680016661694-1cd3faf31c3a?fm=jpg&q=60&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d2lyZWZyYW1lfGVufDB8fDB8fHww");
}

.article-three {
background-image: url("https://plus.unsplash.com/premium_photo-1742560146448-86ff6f51c5e7?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}