Skip to content

Commit

Permalink
create articles section
Browse files Browse the repository at this point in the history
  • Loading branch information
@sul-devs
sul-devs committed May 5, 2024
1 parent a8c5d6c commit cdf3e01
Show file tree
Hide file tree
Showing 2 changed files with 348 additions and 13 deletions.
277 changes: 273 additions & 4 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@
</nav>

<!------------ Hero ------------>
<header id="hero" class="section-padding">
<div class="container wrap gap-4">
<div class="hero-text basis-500">
<header id="hero" class="section-padding align-center">
<div class="container wrap flex-between-center gap-4">
<hgroup class="hero-text basis-500">
<h1 class="hero-heading">My Top Web Development Projects</h1>
<p class="hero-description vm-05">See my best project work below.</p>
<a href="#projects" class="hero-btn btn block p-1 mt-2 text-center"
>See Projects</a
>
</div>
</hgroup>
<img
src="assets/img/hero-img.svg"
alt="Computer and the internet"
Expand All @@ -73,5 +73,274 @@ <h1 class="hero-heading">My Top Web Development Projects</h1>
/>
</div>
</header>

<main id="main">
<section id="projects">
<div class="container">
<h2 class="section-heading">Projects</h2>
<!-- Projects -->
<ul class="projects">
<!-- Project Card -->
<li class="project-card card">
<article>
<!-- image -->
<a href="https://sul-devs.github.io/prioritasker">
<img
class="project-img"
src="assets/img/prioritasker-screenshot.png"
alt="Prioritasker homepage."
/>
</a>
<!-- text -->
<div class="project-text vm-2">
<h3 class="project-title section-sub-heading">
<a
class="link"
href="https://sul-devs.github.io/prioritasker"
>
Prioritasker
</a>
</h3>
<p class="project-description vp-05">
A task prioritisation web application. Enter your list of
todos and get them ranked by priority.
</p>
</div>
<!-- buttons -->
<div class="project-buttons">
<a
class="card-btn btn block p-1"
href="https://sul-devs.github.io/prioritasker"
>Live Site</a
><br />
<a
href="https://github.com/sul-devs/prioritasker"
class="card-btn btn block p-1"
>Source Code</a
><br />
<a
href="https://github.com/sul-devs/prioritasker"
class="card-btn btn block p-1"
>Documentation</a
>
</div>
</article>
<br /><br /><br />
<hr />
<br /><br /><br />
</li>

<!-- Project Card -->
<li class="project-card card">
<article>
<!-- image -->
<a href="https://sul-devs.github.io/pimoky">
<img
class="project-img"
src="assets/img/prioritasker-screenshot.png"
alt="Prioritasker homepage."
/>
</a>
<!-- text -->
<div class="project-text vm-2">
<h3 class="project-title section-sub-heading">
<a
class="link"
href="https://sul-devs.github.io/prioritasker"
>
Pimoky
</a>
</h3>
<p class="project-description vp-05">
An ecommerce website selling technology devices and gadgets
such as Phones, Laptops, TVs, Drones, Cameras, etc.
</p>
</div>
<!-- buttons -->
<div class="project-buttons">
<a
class="card-btn btn block p-1"
href="https://sul-devs.github.io/prioritasker"
>Live Site</a
><br />
<a
href="https://github.com/sul-devs/prioritasker"
class="card-btn btn block p-1"
>Source Code</a
><br />
<a
href="https://github.com/sul-devs/prioritasker"
class="card-btn btn block p-1"
>Documentation</a
>
</div>
</article>
<br /><br /><br />
<hr />
<br /><br /><br />
</li>

<!-- Project Card -->
<li class="project-card card">
<article>
<!-- image -->
<a href="https://sul-devs.github.io/prioritasker">
<img
class="project-img"
src="assets/img/prioritasker-screenshot.png"
alt="Prioritasker homepage."
/>
</a>
<!-- text -->
<div class="project-text vm-2">
<h3 class="project-title section-sub-heading">
<a
class="link"
href="https://sul-devs.github.io/prioritasker"
>
TNN
</a>
</h3>
<p class="project-description vp-05">
A site that people would follow to get the latest news,
trends and talking points in the technology industry.
</p>
</div>
<!-- buttons -->
<div class="project-buttons">
<a
class="card-btn btn block p-1"
href="https://sul-devs.github.io/prioritasker"
>Live Site</a
><br />
<a
href="https://github.com/sul-devs/prioritasker"
class="card-btn btn block p-1"
>Source Code</a
><br />
<a
href="https://github.com/sul-devs/prioritasker"
class="card-btn btn block p-1"
>Documentation</a
>
</div>
</article>
<br /><br /><br />
<hr />
<br /><br /><br />
</li>

<!-- Project Card -->
<li class="project-card card">
<article>
<!-- image -->
<a href="https://sul-devs.github.io/prioritasker">
<img
class="project-img"
src="assets/img/prioritasker-screenshot.png"
alt="Prioritasker homepage."
/>
</a>
<!-- text -->
<div class="project-text vm-2">
<h3 class="project-title section-sub-heading">
<a
class="link"
href="https://sul-devs.github.io/prioritasker"
>
Opidur
</a>
</h3>
<p class="project-description vp-05">
A digital marketing agency landing page or single page
website.
</p>
</div>
<!-- buttons -->
<div class="project-buttons">
<a
class="card-btn btn block p-1"
href="https://sul-devs.github.io/prioritasker"
>Live Site</a
><br />
<a
href="https://github.com/sul-devs/prioritasker"
class="card-btn btn block p-1"
>Source Code</a
><br />
<a
href="https://github.com/sul-devs/prioritasker"
class="card-btn btn block p-1"
>Documentation</a
>
</div>
</article>
<br /><br /><br />
<hr />
<br /><br /><br />
</li>
</ul>
</div>
</section>

<section id="articles">
<div class="container">
<h2 class="section-heading">Recent posts</h2>
<ul class="cards-wrapper">
<!-- Post -->
<li class="post">
<a href="#">
<article>
<h3 class="post-title">Day 7 - Building a full stack blog</h3>
<p class="post-date">05/05/24</p>
<br />
<p class="post-description">
In this article, I explain how I created the 'Recent posts'
section and footer to complete the homepage for my website.
</p>
</article>
<br /><br />
</a>
<hr />
<br /><br />
</li>

<!-- Post -->
<li class="post">
<a href="#">
<article>
<h3 class="post-title">Day 6 - Building a full stack blog</h3>
<p class="post-date">03/05/24</p>
<br />
<p class="post-description">
In this article, I explain how I created the navigation bar,
hero section, and projects section of this blog site.
</p>
</article>
<br /><br />
</a>
<hr />
<br /><br />
</li>

<!-- Post -->
<li class="post">
<a href="#">
<article>
<h3 class="post-title">Day 5 - Building a full stack blog</h3>
<p class="post-date">02/05/24</p>
<br />
<p class="post-description">
In this article, I explain how I created the navigation bar,
hero section, and projects section of this blog site.
</p>
</article>
</a>
</li>
</ul>
<a href="#" class="btn w-100 text-center vm-2">View all articles +</a>
</div>
</section>
</main>
</body>
</html>
Loading

0 comments on commit cdf3e01

Please sign in to comment.