Skip to content

Commit 3ddc7b7

Browse files
kens-visualskens-visuals
committed
add SVG images and mobile layout
1 parent 76bef4d commit 3ddc7b7

File tree

5 files changed

+273
-65
lines changed

5 files changed

+273
-65
lines changed

‎css/style.css

+80-6
Original file line numberDiff line numberDiff line change
@@ -15,30 +15,104 @@ body {
1515
font-size: 1.6rem;
1616
font-family: "Manrope", sans-serif;
1717
background-color: #ecf2f8;
18+
display: grid;
19+
grid-template-rows: 1fr auto; }
20+
21+
.main {
1822
display: flex;
1923
align-items: center;
20-
flex-direction: column;
2124
justify-content: center; }
2225

2326
.container {
2427
width: 85%;
25-
max-width: 450px;
26-
max-height: 600px; }
28+
max-width: 400px; }
2729

2830
.card {
2931
width: 100%;
3032
background-color: white;
3133
border-radius: 1rem;
32-
overflow: hidden; }
34+
overflow: hidden;
35+
position: relative; }
3336
.card__img {
3437
width: 100%; }
3538
.card__content {
36-
padding: 4rem 3rem; }
39+
padding: 3rem 3rem 2rem 3rem; }
40+
.card__content-heading {
41+
color: #6d7f97;
42+
font-size: 1.6rem;
43+
margin-bottom: 1.5rem; }
44+
.card__content-text {
45+
color: #9eafc2;
46+
font-size: 1.27rem;
47+
font-weight: 700;
48+
line-height: 1.6;
49+
margin-bottom: 3rem; }
50+
.card__content-info {
51+
width: 100%;
52+
display: flex;
53+
align-items: center;
54+
justify-content: flex-start; }
55+
.card__content-info--img {
56+
width: 4rem;
57+
border-radius: 50%; }
58+
.card__content-info--box {
59+
margin-left: 2rem; }
60+
.card__content-info--name {
61+
color: #6d7f97;
62+
font-size: 1.4rem;
63+
font-weight: 700;
64+
margin-bottom: 0.2rem; }
65+
.card__content-info--date {
66+
color: #9eafc2;
67+
font-size: 1.4rem;
68+
font-family: "Manrope", sans-serif; }
69+
.card__content-info-container {
70+
width: 100%;
71+
height: 12%;
72+
background-color: #48556a;
73+
position: absolute;
74+
bottom: 0;
75+
left: 0;
76+
padding: 1rem;
77+
display: flex;
78+
align-items: center;
79+
justify-content: space-around; }
80+
.card__content-info-container--active {
81+
display: none; }
82+
.card__content-info-text {
83+
color: #9eafc2;
84+
text-transform: uppercase;
85+
letter-spacing: 0.5rem;
86+
font-size: 1.2rem; }
87+
.card__content-info-icons {
88+
fill: #ecf2f8;
89+
margin-left: -3rem; }
90+
.card__content-info-icons > *:hover {
91+
fill: #9eafc2;
92+
transition: all 0.3s; }
93+
.card__content-info-icon {
94+
margin-left: 1rem; }
95+
.card__content-info-icon--share {
96+
fill: #6d7f97;
97+
background-color: #ecf2f8;
98+
margin-left: auto;
99+
padding: 0.4rem 0.8rem;
100+
border-radius: 50%; }
101+
.card__content-info-icon--share--active {
102+
fill: #ecf2f8;
103+
background-color: #6d7f97;
104+
padding: 0.4rem 0.8rem;
105+
border-radius: 50%;
106+
margin-bottom: 0.7rem; }
107+
.card__content-info-icon--share--active:hover {
108+
fill: #9eafc2;
109+
background-color: #ecf2f8;
110+
transition: all 0.3s; }
37111

38112
.attribution {
39113
font-size: 1rem;
40114
text-align: center;
41-
margin: 5rem 0 0 0; }
115+
margin: 1rem 0; }
42116
.attribution__link:link, .attribution__link:visited {
43117
text-transform: uppercase;
44118
color: #48556a;

‎index.html

+100-45
Original file line numberDiff line numberDiff line change
@@ -18,57 +18,112 @@
1818
/>
1919
<link rel="stylesheet" type="text/css" href="css/style.css" />
2020

21-
<title>Frontend Mentor | Article preview component</title>
21+
<title>Frontend Mentor | Article Preview Component</title>
2222
</head>
2323
<body>
24-
<div class="container">
25-
<main class="card">
26-
<img src="./images/drawers.jpg" alt="drawers" class="card__img" />
27-
<div class="card__content">
28-
<h1 class="card__content-heading">
29-
Shift the overall look and feel by adding these wonderful touches to
30-
furniture in your home
31-
</h1>
32-
<p class="card__content-text">
33-
Ever been in a room and felt like something was missing? Perhaps it
34-
felt slightly bare and uninviting. I’ve got some simple tips to help
35-
you make any room feel complete.
36-
</p>
37-
<div class="card__content-info">
38-
<img
39-
src="./images/avatar-michelle.jpg"
40-
alt="avatar michelle"
41-
class="card__content-info--img"
42-
/>
43-
<p class="card__content-info--name">Michelle Appleton</p>
44-
<p class="card__content-info--date">28 Jun 2020</p>
45-
<div class="card__content-info--links">
46-
<a href="#" class="card__content-info--link">
47-
<img
48-
src="./images/icon-facebook.svg"
49-
alt="icon-facebook"
50-
class="card__content-info--link-img"
51-
/>
52-
</a>
53-
<a href="#" class="card__content-info--link">
54-
<img
55-
src="./images/icon-twitter.svg"
56-
alt="icon-facebook"
57-
class="card__content-info--link-img"
58-
/>
59-
</a>
60-
<a href="#" class="card__content-info--link">
61-
<img
62-
src="./images/icon-pinterest.svg"
63-
alt="icon-facebook"
64-
class="card__content-info--link-img"
65-
/>
24+
<main class="main">
25+
<div class="container">
26+
<div class="card">
27+
<img src="./images/drawers.jpg" alt="drawers" class="card__img" />
28+
29+
<div class="card__content">
30+
<h1 class="card__content-heading">
31+
Shift the overall look and feel by adding these wonderful touches
32+
to furniture in your home
33+
</h1>
34+
<p class="card__content-text">
35+
Ever been in a room and felt like something was missing? Perhaps
36+
it felt slightly bare and uninviting. I’ve got some simple tips to
37+
help you make any room feel complete.
38+
</p>
39+
40+
<div class="card__content-info">
41+
<img
42+
src="./images/avatar-michelle.jpg"
43+
alt="avatar michelle"
44+
class="card__content-info--img"
45+
/>
46+
<div class="card__content-info--box">
47+
<p class="card__content-info--name">Michelle Appleton</p>
48+
<p class="card__content-info--date">28 Jun 2020</p>
49+
</div>
50+
51+
<div
52+
class="
53+
card__content-info-container
54+
card__content-info-container--active
55+
"
56+
>
57+
<p class="card__content-info-text">Share</p>
58+
59+
<div class="card__content-info-icons">
60+
<a href="#" class="card__content-info-icon">
61+
<svg
62+
xmlns="http://www.w3.org/2000/svg"
63+
width="20"
64+
height="20"
65+
>
66+
<path
67+
d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"
68+
/>
69+
</svg>
70+
</a>
71+
<a href="#" class="card__content-info-icon">
72+
<svg
73+
xmlns="http://www.w3.org/2000/svg"
74+
width="20"
75+
height="17"
76+
>
77+
<path
78+
d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.804-2.27 8.22 8.22 0 01-2.605.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.922-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z"
79+
/>
80+
</svg>
81+
</a>
82+
<a href="#" class="card__content-info-icon">
83+
<svg
84+
xmlns="http://www.w3.org/2000/svg"
85+
width="20"
86+
height="20"
87+
>
88+
<path
89+
d="M10 0C4.478 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.182-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.545 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.135-4.515 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.522 0 10-4.477 10-10S15.522 0 10 0z"
90+
/>
91+
</svg>
92+
</a>
93+
</div>
94+
<a
95+
href="#"
96+
class="
97+
card__content-info-icon
98+
card__content-info-icon--share--active
99+
"
100+
>
101+
<svg
102+
xmlns="http://www.w3.org/2000/svg"
103+
width="15"
104+
height="13"
105+
>
106+
<path
107+
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"
108+
/>
109+
</svg>
110+
</a>
111+
</div>
112+
<a
113+
href="#"
114+
class="card__content-info-icon card__content-info-icon--share"
115+
>
116+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13">
117+
<path
118+
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"
119+
/>
120+
</svg>
66121
</a>
67122
</div>
68123
</div>
69124
</div>
70-
</main>
71-
</div>
125+
</div>
126+
</main>
72127

73128
<footer class="attribution">
74129
Challenge by

‎scss/_base.scss

+2-4
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ body {
2525
font-size: 1.6rem;
2626
font-family: $font-primary;
2727
background-color: $color-secondary;
28-
display: flex;
29-
align-items: center;
30-
flex-direction: column;
31-
justify-content: center;
28+
display: grid;
29+
grid-template-rows: 1fr auto;
3230
}

0 commit comments

Comments
 (0)