diff --git a/css/style.css b/css/style.css index cd862aa..b0c940a 100644 --- a/css/style.css +++ b/css/style.css @@ -99,4 +99,84 @@ 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; +} } \ No newline at end of file diff --git a/index.html b/index.html index 0556644..2908976 100644 --- a/index.html +++ b/index.html @@ -25,13 +25,17 @@
+

Frontend Mentor

+
+

Newbie Challenges

+
-
+ -
+
Ping Coming-Soon Challenge from FrontendMentor
-

Ping Coming-Soon Challenge

+

Ping Coming-Soon

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • HTML
  • @@ -56,12 +60,12 @@
-
+
Single Price Grid Component Challenge from FrontendMentor
-

Single Price Grid Component Challenge from FrontendMentor

+

Single Price Grid Component

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • HTML
  • @@ -70,12 +74,12 @@
-
+
Four Card Feature Section Challenge from FrontendMentor
-

Four Card Feature Section Challenge from FrontendMentor

+

Four Card Feature Section

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • HTML
  • @@ -84,12 +88,12 @@
-
+
Article Preview Component Challenge from FrontendMentor
-

Article Preview Component Challenge from FrontendMentor

+

Article Preview Component

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • HTML
  • @@ -98,12 +102,12 @@
-
+
Stats Preview Card Component Challenge from FrontendMentor
-

Stats Preview Card Component Challenge from FrontendMentor

+

Stats Preview Card Component

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • HTML
  • @@ -112,12 +116,12 @@
-
+
Profile Card Component Challenge from FrontendMentor
-

Profile Card Component Challenge from FrontendMentor

+

Profile Card Component

Lorem ipsum dolor sit amet consectetur adipisicing elit.

  • HTML
  • @@ -128,6 +132,7 @@
+
@@ -177,7 +182,8 @@