Skip to content

Commit b21f8b5

Browse files
kens-visualskens-visuals
committed
add mobile and desktop final layouts
1 parent 3ddc7b7 commit b21f8b5

File tree

5 files changed

+251
-177
lines changed

5 files changed

+251
-177
lines changed

‎css/style.css

+105-70
Original file line numberDiff line numberDiff line change
@@ -16,98 +16,133 @@ body {
1616
font-family: "Manrope", sans-serif;
1717
background-color: #ecf2f8;
1818
display: grid;
19-
grid-template-rows: 1fr auto; }
19+
grid-template-rows: 1fr auto;
20+
position: relative; }
2021

2122
.main {
2223
display: flex;
2324
align-items: center;
2425
justify-content: center; }
2526

26-
.container {
27-
width: 85%;
28-
max-width: 400px; }
27+
@media (min-width: 768px) {
28+
.container {
29+
max-width: 750px; } }
2930

3031
.card {
3132
width: 100%;
33+
max-width: 32rem;
3234
background-color: white;
35+
box-shadow: 0 2rem 3rem 0.25rem rgba(158, 175, 194, 0.2);
3336
border-radius: 1rem;
3437
overflow: hidden;
35-
position: relative; }
36-
.card__img {
37-
width: 100%; }
38+
position: relative;
39+
display: flex;
40+
align-items: center;
41+
flex-direction: column;
42+
justify-content: center; }
43+
@media (min-width: 768px) {
44+
.card {
45+
max-width: 75rem;
46+
flex-direction: row;
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
transform: translate(-50%, -50%); } }
51+
.card__hero {
52+
width: 100%;
53+
height: 21rem;
54+
background-image: url(../images/drawers.jpg);
55+
background-size: cover;
56+
transform: translateY(-1.4rem); }
57+
@media (min-width: 768px) {
58+
.card__hero {
59+
width: 65rem;
60+
height: 29rem;
61+
transform: translateY(0); } }
3862
.card__content {
39-
padding: 3rem 3rem 2rem 3rem; }
40-
.card__content-heading {
63+
padding: 2rem 3rem; }
64+
@media (min-width: 768px) {
65+
.card__content {
66+
width: 90rem;
67+
height: 29rem;
68+
padding: 4rem; } }
69+
.card__heading {
70+
color: #6d7f97;
71+
font-size: 1.6rem;
72+
margin-bottom: 1.5rem; }
73+
@media (min-width: 768px) {
74+
.card__heading {
75+
font-size: 2rem; } }
76+
.card__description {
77+
color: #9eafc2;
78+
font-size: 1.27rem;
79+
font-weight: 700;
80+
line-height: 1.6;
81+
margin-bottom: 3rem; }
82+
@media (min-width: 768px) {
83+
.card__description {
84+
margin-bottom: 2rem; } }
85+
.card__info {
86+
width: 100%;
87+
display: flex;
88+
align-items: center;
89+
justify-content: flex-start; }
90+
.card__info-img {
91+
width: 4rem;
92+
border-radius: 50%; }
93+
.card__info-box {
94+
margin: 0 auto 0 2rem; }
95+
.card__info-name {
4196
color: #6d7f97;
42-
font-size: 1.6rem;
43-
margin-bottom: 1.5rem; }
44-
.card__content-text {
45-
color: #9eafc2;
46-
font-size: 1.27rem;
97+
font-size: 1.4rem;
4798
font-weight: 700;
48-
line-height: 1.6;
49-
margin-bottom: 3rem; }
50-
.card__content-info {
99+
margin-bottom: 0.2rem; }
100+
.card__info-date {
101+
color: #9eafc2;
102+
font-size: 1.4rem;
103+
font-family: "Manrope", sans-serif; }
104+
.card__info-container {
51105
width: 100%;
106+
height: 12%;
107+
background-color: #48556a;
108+
position: absolute;
109+
bottom: 0;
110+
left: 0;
111+
padding: 1rem;
52112
display: flex;
53113
align-items: center;
54-
justify-content: flex-start; }
55-
.card__content-info--img {
56-
width: 4rem;
114+
justify-content: space-around; }
115+
.card__info-text {
116+
color: #9eafc2;
117+
text-transform: uppercase;
118+
letter-spacing: 0.5rem;
119+
font-size: 1.3rem; }
120+
.card__info-icons {
121+
fill: #ecf2f8;
122+
margin: 0.4rem 0 0 -4rem; }
123+
.card__info-icons > *:hover {
124+
fill: #9eafc2;
125+
transition: all 0.3s; }
126+
.card__info-icon {
127+
margin-left: 1.2rem; }
128+
.card__info-icon--share {
129+
fill: #6d7f97;
130+
background-color: #ecf2f8;
131+
padding: 0.4rem 0.8rem;
57132
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;
133+
.card__info-icon--share:hover {
134+
fill: #ecf2f8;
135+
background-color: #6d7f97;
92136
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;
137+
.card__info-icon--share--active {
138+
fill: #ecf2f8;
139+
background-color: #6d7f97;
99140
padding: 0.4rem 0.8rem;
100141
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; }
142+
.card__info-icon--share--active:hover {
143+
fill: #9eafc2;
144+
background-color: #ecf2f8;
145+
transition: all 0.3s; }
111146

112147
.attribution {
113148
font-size: 1rem;

‎index.html

+22-29
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,39 @@
2323
<body>
2424
<main class="main">
2525
<div class="container">
26-
<div class="card">
27-
<img src="./images/drawers.jpg" alt="drawers" class="card__img" />
26+
<figure class="card">
27+
<div class="card__hero">
28+
<!-- <img src="./images/drawers.jpg" alt="drawers" class="card__img" /> -->
29+
</div>
2830

2931
<div class="card__content">
30-
<h1 class="card__content-heading">
32+
<h1 class="card__heading">
3133
Shift the overall look and feel by adding these wonderful touches
3234
to furniture in your home
3335
</h1>
34-
<p class="card__content-text">
36+
<p class="card__description">
3537
Ever been in a room and felt like something was missing? Perhaps
3638
it felt slightly bare and uninviting. I’ve got some simple tips to
3739
help you make any room feel complete.
3840
</p>
3941

40-
<div class="card__content-info">
42+
<div class="card__info">
4143
<img
4244
src="./images/avatar-michelle.jpg"
4345
alt="avatar michelle"
44-
class="card__content-info--img"
46+
class="card__info-img"
4547
/>
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>
48+
49+
<div class="card__info-box">
50+
<p class="card__info-name">Michelle Appleton</p>
51+
<p class="card__info-date">28 Jun 2020</p>
4952
</div>
5053

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>
54+
<div class="card__info-container card__info-container--active">
55+
<p class="card__info-text">Share</p>
5856

59-
<div class="card__content-info-icons">
60-
<a href="#" class="card__content-info-icon">
57+
<div class="card__info-icons">
58+
<a href="#" class="card__info-icon">
6159
<svg
6260
xmlns="http://www.w3.org/2000/svg"
6361
width="20"
@@ -68,7 +66,7 @@ <h1 class="card__content-heading">
6866
/>
6967
</svg>
7068
</a>
71-
<a href="#" class="card__content-info-icon">
69+
<a href="#" class="card__info-icon">
7270
<svg
7371
xmlns="http://www.w3.org/2000/svg"
7472
width="20"
@@ -79,7 +77,7 @@ <h1 class="card__content-heading">
7977
/>
8078
</svg>
8179
</a>
82-
<a href="#" class="card__content-info-icon">
80+
<a href="#" class="card__info-icon">
8381
<svg
8482
xmlns="http://www.w3.org/2000/svg"
8583
width="20"
@@ -93,10 +91,7 @@ <h1 class="card__content-heading">
9391
</div>
9492
<a
9593
href="#"
96-
class="
97-
card__content-info-icon
98-
card__content-info-icon--share--active
99-
"
94+
class="card__info-icon card__info-icon--share--active"
10095
>
10196
<svg
10297
xmlns="http://www.w3.org/2000/svg"
@@ -109,10 +104,8 @@ <h1 class="card__content-heading">
109104
</svg>
110105
</a>
111106
</div>
112-
<a
113-
href="#"
114-
class="card__content-info-icon card__content-info-icon--share"
115-
>
107+
108+
<a href="#" class="card__info-icon card__info-icon--share">
116109
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13">
117110
<path
118111
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"
@@ -121,7 +114,7 @@ <h1 class="card__content-heading">
121114
</a>
122115
</div>
123116
</div>
124-
</div>
117+
</figure>
125118
</div>
126119
</main>
127120

‎scss/_base.scss

+1
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,5 @@ body {
2727
background-color: $color-secondary;
2828
display: grid;
2929
grid-template-rows: 1fr auto;
30+
position: relative;
3031
}

0 commit comments

Comments
 (0)