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

View File

@ -99,4 +99,84 @@ footer * {
footer > a { footer > a {
display: block; 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;
}
} }

View File

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