Original subtitles

1 1

Welcome to yet another lecture 2

2

on our killer website project. 3

3

Now it's time to build the sign-up section. 4

4

So in this section 5

5

we have three pricing plans side by side 6

6

and each of these plans 7

7

has three parts: 8

8

the price, the description and 9

9

a sign-up button. 10

10

We want a user to choose the first plan 11

11

because it's the most profitable for the company. 12

12

So it appears 13

13

as the first plan 14

14

and also at the full call-to-action button. 15

15

So the new things 16

16

we'll learn in this lecture 17

17

are how to design with CSS border radius 18

18

and how create box shadows. 19

19

All the other things we'll do in this lecture 20

20

use concepts 21

21

that you are already familiar with, 22

22

which is pretty cool. 23

23

So here we are, back in our html file 24

24

which already has more than 250 lines of code. 25

25

This is quite impressive. 26

26

So, yet another section here 27

27

which I'll call, 28

28

"section plans". 29

29

Okay. 30

30

And I will 31

31

add a url here 32

32

in which I will add 33

33

the h2 title 34

34

such as the many of the other sections. 35

35

So let me get the text for this section 36

36

in our document 37

37

and here it is. 38

38

And paste it down here. 39

39

So the title here is "Start eating healthy today". 40

40

It's actually right here. 41

41

Alright. 42

42

So I'm speeding things up a little bit 43

43

because by now you are already familiar 44

44

with most of this stuff. 45

45

So, as you saw in the sketch that I showed you before, 46

46

we have three columns here. 47

47

Where each column is a pricing plan. 48

48

So col and span one of three. 49

49

Now the question is 50

50

how are we gonna organise our codes 51

51

inside of each of these boxes. 52

52

I will now actually create 53

53

another div inside of this column 54

54

and you will later understand why 55

55

I'm doing this. 56

56

I'll call this one "plan box". 57

57

But it has a pretty good reason actually. 58

58

And as I said I will explain to you later 59

59

the importance of doing it this way. 60

60

So I as I said, each of these pricing plans 61

61

will have three sections. 62

62

So I create three divs here. 63

63

The first one is for the price. 64

64

And another one 65

65

for the details 66

66

and yet another one 67

67

for the sign-up button. 68

68

So lemme check the text here. 69

69

So the first one is the premium. 70

70

So let's copy this 71

71

and let's reuse our h3 title. 72

72

So this one is the premium. 73

73

And now we need to put the price of 74

74

399 dollars here. 75

75

So I will make a paragraph with this 76

76

and call this paragraph 77

77

"plan price". 78

78

And in this case 79

79

we have to attribute a class name to this paragraph 80

80

because we will have multiple paragraphs 81

81

and then with a class name, 82

82

it's the easiest way to select 83

83

those paragraphs later for 84

84

the CSS code. 85

85

So 399 dollars 86

86

per month 87

87

and 88

88

then the other text we have down there 89

89

and this one will be "plan price month" 90

90

for this text. 91

91

So that's the price per month. 92

92

Actually it's the price per meal so 93

93

let's change this to "meal". 94

94

Okay. 95

95

Nice. 96

96

Now we have some details here 97

97

and 98

98

as before, 99

99

I will use an unordered list 100

100

in order to show these details. 101

101

In our A-list element, 102

102

I think we should use, 103

103

an icon here 104

104

like a checkmark 105

105

and you already know where to find him. 106

106

We will again use our icon font here 107

107

and let's find, 108

108

here in our iOS-inspired icons, 109

109

a checkmark and 110

110

it's easy to find actually. 111

111

So I will take this code 112

112

and 113

113

create an icon here. 114

114

So a checkmark and then 115

115

the text that we want here. 116

116

So one meal every day. 117

117

And now we'll actually just duplicate this 118

118

with command D. 119

119

So order 24/7 120

120

and free delivery. 121

121

Okay. Great. 122

122

So this is the html for 123

123

the second section 124

124

of this pricing plan. 125

125

And now the last one. 126

126

And this one should be pretty easy because it's just 127

127

a sign-up button 128

128

and we already had that before. 129

129

So href, 130

130

again points to nowhere. 131

131

And then our class is 132

132

the button class we used before 133

133

and we want a full button 134

134

for this pricing plan. 135

135

And the text that should go here is sign-up. 136

136

Simple as that. 137

137

Sign up now. 138

138

Okay. Great. 139

139

So, I think this is 140

140

a good html structure. 141

141

So let's copy this 142

142

and paste it here two more times 143

143

for the other two. 144

144

This is pro and it's 149 per month. 145

145

So the pro is 149 per month. 146

146

And that's only 14.90 per meal. 147

147

Per meal. 148

148

Alright. 149

149

Then one meal, 150

150

ten days 151

151

or 24/7. It's the same. 152

152

And the rest is all the same. 153

153

So now here, Starter 154

154

and we have 19 per meal. 155

155

So this is a little different. 156

156

All good. Write this. 157

157

And we actually gonna have this paragraph here 158

158

because it's the price per meal is already 19 so 159

159

delete this. 160

160

Or actually not delete it. 161

161

We'll just leave to empty. 162

162

And now, right here it's just one meal. 163

163

Order from h12. 164

164

Free deliveries here. 165

165

And this one will be empty. 166

166

And since it's empty 167

167

it shouldn't have a checkmark 168

168

but we can put like a cross there, 169

169

like this here. 170

170

This will be better. 171

171

Alright, so this is our text 172

172

and I've one more thing to change here 173

173

because we had a 174

174

full button for the first pricing plan 175

175

but here want a ghost button. 176

176

I hope you remembered those. 177

177

We had them in the first section. 178

178

So let's check this out. 179

179

And here it is. 180

180

Okay. 181

181

So as you would expect 182

182

this is not yet formatted. 183

183

The only formatted things are the buttons 184

184

because we already did that before. 185

185

Such as the h3 elements 186

186

and the title as always. 187

187

So in the next lecture, 188

188

it's then time to format 189

189

the whole thing. 190

190

I,m waiting for you there.