Business Card Mockup

6 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€95.85
List Price:  €134.19
You save:  €38.34
£79.54
List Price:  £111.35
You save:  £31.81
CA$143.73
List Price:  CA$201.23
You save:  CA$57.50
A$159.93
List Price:  A$223.91
You save:  A$63.97
S$135.54
List Price:  S$189.77
You save:  S$54.22
HK$777.83
List Price:  HK$1,089
You save:  HK$311.16
CHF 89.34
List Price:  CHF 125.09
You save:  CHF 35.74
NOK kr1,131.88
List Price:  NOK kr1,584.68
You save:  NOK kr452.80
DKK kr715.08
List Price:  DKK kr1,001.15
You save:  DKK kr286.06
NZ$176.75
List Price:  NZ$247.46
You save:  NZ$70.70
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,945.33
List Price:  ৳16,723.94
You save:  ৳4,778.61
₹8,493.77
List Price:  ₹11,891.62
You save:  ₹3,397.85
RM450.75
List Price:  RM631.07
You save:  RM180.32
₦154,938.50
List Price:  ₦216,920.10
You save:  ₦61,981.60
₨27,824.38
List Price:  ₨38,955.25
You save:  ₨11,130.86
฿3,419.79
List Price:  ฿4,787.84
You save:  ฿1,368.05
₺3,519.01
List Price:  ₺4,926.76
You save:  ₺1,407.74
B$608.53
List Price:  B$851.97
You save:  B$243.44
R1,830.80
List Price:  R2,563.19
You save:  R732.39
Лв187.32
List Price:  Лв262.25
You save:  Лв74.93
₩144,627.53
List Price:  ₩202,484.33
You save:  ₩57,856.80
₪365.39
List Price:  ₪511.57
You save:  ₪146.17
₱5,882.91
List Price:  ₱8,236.31
You save:  ₱2,353.40
¥15,643.93
List Price:  ¥21,902.13
You save:  ¥6,258.20
MX$2,007.58
List Price:  MX$2,810.70
You save:  MX$803.11
QR364.41
List Price:  QR510.19
You save:  QR145.78
P1,381.63
List Price:  P1,934.33
You save:  P552.70
KSh12,923.70
List Price:  KSh18,093.70
You save:  KSh5,170
E£5,087.81
List Price:  E£7,123.14
You save:  E£2,035.32
ብር12,764.56
List Price:  ብር17,870.89
You save:  ብር5,106.33
Kz91,790.82
List Price:  Kz128,510.82
You save:  Kz36,720
CLP$98,905.10
List Price:  CLP$138,471.10
You save:  CLP$39,566
CN¥729.56
List Price:  CN¥1,021.42
You save:  CN¥291.85
RD$6,087.13
List Price:  RD$8,522.23
You save:  RD$2,435.09
DA13,485.25
List Price:  DA18,879.89
You save:  DA5,394.64
FJ$231.62
List Price:  FJ$324.28
You save:  FJ$92.66
Q770.23
List Price:  Q1,078.35
You save:  Q308.12
GY$20,913.67
List Price:  GY$29,279.97
You save:  GY$8,366.30
ISK kr13,911.60
List Price:  ISK kr19,476.80
You save:  ISK kr5,565.20
DH1,006.07
List Price:  DH1,408.53
You save:  DH402.46
L1,836.70
List Price:  L2,571.46
You save:  L734.75
ден5,900.06
List Price:  ден8,260.33
You save:  ден2,360.26
MOP$800.26
List Price:  MOP$1,120.39
You save:  MOP$320.13
N$1,840.36
List Price:  N$2,576.58
You save:  N$736.22
C$3,678.42
List Price:  C$5,149.94
You save:  C$1,471.51
रु13,597.49
List Price:  रु19,037.04
You save:  रु5,439.54
S/372.23
List Price:  S/521.13
You save:  S/148.90
K405.36
List Price:  K567.52
You save:  K162.16
SAR375.62
List Price:  SAR525.88
You save:  SAR150.26
ZK2,766.46
List Price:  ZK3,873.15
You save:  ZK1,106.69
L477.10
List Price:  L667.96
You save:  L190.86
Kč2,408.98
List Price:  Kč3,372.68
You save:  Kč963.69
Ft39,689.03
List Price:  Ft55,566.23
You save:  Ft15,877.20
SEK kr1,103.13
List Price:  SEK kr1,544.43
You save:  SEK kr441.30
ARS$102,160.40
List Price:  ARS$143,028.65
You save:  ARS$40,868.24
Bs690.76
List Price:  Bs967.10
You save:  Bs276.33
COP$435,928.80
List Price:  COP$610,317.76
You save:  COP$174,388.96
₡50,434.81
List Price:  ₡70,610.75
You save:  ₡20,175.94
L2,537.51
List Price:  L3,552.62
You save:  L1,015.10
₲779,455.88
List Price:  ₲1,091,269.42
You save:  ₲311,813.53
$U4,474.38
List Price:  $U6,264.31
You save:  $U1,789.93
zł408.66
List Price:  zł572.14
You save:  zł163.48
Already have an account? Log In

Transcript

Alrighty, welcome back. So you can see I've changed this back to the video background, I think it looks a lot better, despite the fact that we're about to completely change it anyway. So we're going to start changing to our business card mock up version of our contact section by going to photocopy. And we're going to open up a file that I'm going to provide to you guys. And this is a business card mock up, of course, you can use anything you want for this. And this is going to be very similar to before, where you have smart objects that you're going to change the contents of.

In this case, you would be changing the text to your own information. If you wanted to, you could also add an image. Let's say that you already had a business card, you could just paste an image of that in there. And don't forget that you actually need to put the design here as well because one is for this card and one is for the card on the stacks. The other thing you can change is the accent color here, you can do that by double clicking here and changing the filter color. This is a red that kind of matches the primary color I've been using so far.

And Yep, so we can minimize that for now. And notice that we have this shadow here, I'm actually going to get rid of that I prefer for it to be flat. And the next thing I'm going to do is I want to make this a square, it's kind of a rectangle. And so I can do that by changing the canvas size to be one to one. And let's say that I wanted to line this up a little bit better, I can just hold down Shift, make sure that I have both of these selected, and then I can use the arrow to kind of move it around until I'm happy where it is. And the last thing there is to do is export this as a PNG.

So we're going to do that. And we're just going to change the size to make it a little bit smaller. It doesn't need to be quite that big. All right, cool. So we're going to save that. And we're going to cut that from our downloads, and we're going to make sure that it's in our assets folder.

And then of course, don't forget that it also needs to be in our project assets image folder as well. Okay, so we're done with that part, we can head back into the code. So the first thing we're going to do is we're going to comment out our mail to link here, and we're going to comment out our video background. And then the next thing we're going to do is we're going to use The same hero background as in our about section. So we're actually going to cut our content section here. And we're going to create a div dot background.

And then we're going to put our section back in here. And we're going to fix our spacing here. And so we actually don't need to change the CSS This is already set up, we will need to change the background color of our section ID because right now it's set to black, and that's what's on top there. But first, we can create our elements here for our business card mock up. We're actually going to copy this a element here. And we're going to remove all the text inside and we're also going to remove the class Contact mail.

And instead, we're going to add a title so that when someone hovers over the image, it'll be obvious what it's for. We'll just have to click to send email. All right, cool. Now inside of our eighth element, we're going to create our image. And this is going to go Of course to our assets image and our business card mock up, we're going to add an alt as well. And lastly, we're also going to add a class of business card because we're going to want to limit the size of our image.

Okay, so we're going to go back into our CSS as I said, we're actually going to comment out the contact, background color, and we're going to go down to the bottom here. You We're going to target our business whoops business card. And we're going to give this a height of 100 Vh. We don't want it to be bigger than the page, and we're going to give it a width of auto. Okay, so let's check that out. All right, so let's go back up.

Let's go back down. Alright, that looks awesome. So we have our stack of business cards centered here. You can see anytime I'm hovering so it's a big place to hover. I have this title that says click to email. And yeah, I think that that looks pretty unique.

That's not something that I see often on a website. Alright, so for now, this fits on the big size, but on smaller screens, we're going to need to control this image even more need to make it even smaller than what it is but for now, we're finished our contact section. Congratulations for making it this far. Just one more little section. That's the footer section and then we're going to move on to resume component and our responsive design. Alright, see you in the next one.

Bye for now.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.