tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

as per end of video, roughly, with tweaks to some of the numbers. More styling required

This commit is contained in:
Robert McGovern 2022-01-03 03:04:54 +00:00
parent 322751f269
commit 1d248e21b6
2 changed files with 101 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
css/style.css
View File

@ -100,3 +100,83 @@ footer * {
footer > a {
display: block;
}
.stacked {
display: grid;
}
.stacked > * {
grid-column: 1/2;
grid-row: 1/2;
}
.card__content {
z-index: 10;
background: white;
align-self: end;
margin: .5rem; /*.5rem 2rem;*/
padding: .5rem;
box-shadow: 0 .25rem 1rem rgba(0 0 0 / 0.1);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: .25rem;
}
.project-card {
/* border: 3px solid hotpink; */
aspect-ratio: 1 / 1.5;
}
.card__img {
width: 100%;
aspect-ratio: 1 / 1.25;
object-fit: cover;
}
.card__techUsed {
list-style: none;
display: flex;
/* align-content: space-evenly; */
justify-content: space-evenly;
font-size: 0.625rem;
}
/* .card__techUsed > li {
margin: 0;
} */
.card__title {
font-size: .75rem;
line-height: 1.1;
color: firebrick;
}
.card__description {
font-size: 0.625rem;
line-height: 1.2;
}
@media (min-width: 38em) {
.card__img {
aspect-ratio: 1 / 1.;
}
.project-card.featured {
grid-row: span 2;
grid-column: span 2;
}
.project-card.featured .card__img {
aspect-ratio: 1 / 1.33;
}
.project-card.featured .card__title {
font-size: 1.25rem;
}
}

36
index.html
View File

@ -25,13 +25,17 @@
</div>
<div class="projectsDiv">
<h2>Frontend Mentor</h2>
<div class="newbieChallenges">
<h3>Newbie Challenges</h3>
<div class="projects-grid">
<div class="project-card">
<div class="project-card stacked featured">
<a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/">
<img class="card__img" src="./screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png" alt="The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section.">
</a>
<div class="card__content">
<h3 class="card__title">The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section.</h3>
<h3 class="card__title">The Huddle Landing Page</h3>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="card__techUsed">
<li>HTML</li>
@ -41,12 +45,12 @@
</div>
</div>
<div class="project-card">
<div class="project-card stacked">
<a href="./FrontendMentor/newbie/ping-coming-soon-page-master/">
<img class="card__img" src="./screenshots/fem-newbie-ping-coming-soon-page.jpeg" alt="Ping Coming-Soon Challenge from FrontendMentor">
</a>
<div class="card__content">
<h3 class="card__title">Ping Coming-Soon Challenge</h3>
<h3 class="card__title">Ping Coming-Soon</h3>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="card__techUsed">
<li>HTML</li>
@ -56,12 +60,12 @@
</div>
</div>
<div class="project-card">
<div class="project-card stacked">
<a href="./FrontendMentor/newbie/single-price-grid-component-master/">
<img class="card__img" src="./screenshots/fem-newbie-single-price-grid-component.jpeg" alt="Single Price Grid Component Challenge from FrontendMentor">
</a>
<div class="card__content">
<h3 class="card__title">Single Price Grid Component Challenge from FrontendMentor</h3>
<h3 class="card__title">Single Price Grid Component</h3>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="card__techUsed">
<li>HTML</li>
@ -70,12 +74,12 @@
</div>
</div>
<div class="project-card">
<div class="project-card stacked">
<a href="./FrontendMentor/newbie/four-card-feature-section/">
<img class="card__img" src="./screenshots/fem-newbie-four-card-feature-section.jpeg" alt="Four Card Feature Section Challenge from FrontendMentor">
</a>
<div class="card__content">
<h3 class="card__title">Four Card Feature Section Challenge from FrontendMentor</h3>
<h3 class="card__title">Four Card Feature Section</h3>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="card__techUsed">
<li>HTML</li>
@ -84,12 +88,12 @@
</div>
</div>
<div class="project-card">
<div class="project-card stacked">
<a href="./FrontendMentor/newbie/article-preview-component/">
<img class="card__img" src="./screenshots/fem-newbie-article-preview-component.jpeg" alt="Article Preview Component Challenge from FrontendMentor">
</a>
<div class="card__content">
<h3 class="card__title">Article Preview Component Challenge from FrontendMentor</h3>
<h3 class="card__title">Article Preview Component</h3>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="card__techUsed">
<li>HTML</li>
@ -98,12 +102,12 @@
</div>
</div>
<div class="project-card">
<div class="project-card stacked">
<a href="./FrontendMentor/newbie/stats-preview-card-component/">
<img class="card__img" src="./screenshots/fem-newbie-stats-preview-card-component.jpeg" alt="Stats Preview Card Component Challenge from FrontendMentor">
</a>
<div class="card__content">
<h3 class="card__title">Stats Preview Card Component Challenge from FrontendMentor</h3>
<h3 class="card__title">Stats Preview Card Component</h3>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="card__techUsed">
<li>HTML</li>
@ -112,12 +116,12 @@
</div>
</div>
<div class="project-card">
<div class="project-card stacked">
<a href="./FrontendMentor/newbie/profile-card-component/">
<img class="card__img" src="./screenshots/fem-newbie-profile-card-component.jpeg" alt="Profile Card Component Challenge from FrontendMentor">
</a>
<div class="card__content">
<h3 class="card__title">Profile Card Component Challenge from FrontendMentor</h3>
<h3 class="card__title">Profile Card Component</h3>
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<ul class="card__techUsed">
<li>HTML</li>
@ -128,6 +132,7 @@
</div>
</div>
</div>
<div class="projectsDiv">
<div class="frontEndMentorChallenges">
@ -177,7 +182,8 @@
</main>
<footer>
<!-- some blurb here -->
<p>All projects are the work of Robert McGovern, 2020. <a href="emailto:work@tarasis.net">Email</a>, <a href="https://tarasis.net">Website/Blog</a></p>
<p>All projects are the work of Robert McGovern, 2020-2022. <br>
<a href="emailto:work@tarasis.net">Email</a>, <a href="https://tarasis.net">Website/Blog</a></p>
<a href='http://www.heropatterns.com/'>Background SVG provided by Steve Schoger @ Hero Patterns</a>
</footer>
</body>