-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (170 loc) · 5.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<!--The attribute lang define the language of your content to the web-->
<html lang="en">
<head>
<!--The attribute charset setted as UTF-8 is important to secure we will not
have problems while trying to use word accents or special characters-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--This link below, define the icon who appears in the tab of your page-->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<!--Those links below are necessary to provide the fonts taken from Google Fonts,
but there is also other ways to include fonts in your project-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<!--The tag <title> define the title of your tab-->
<title>Price Grid Project</title>
<!--Into the tag <style>, we can add all styles we want to apply to the page,
but in a professional developtment, we use to separated the styles in another
file name-you-give-to-the-file.css, to apply the imports from the other file,
we would import it in the head by other tag <link>-->
<style>
body{
background-color: black;
}
/*When you define the style based in a tag as i did in the <p> below,
you must be careful because it will apply the styles for all tags of
that same kind into your project*/
p{
color: white;
}
/*Those are the definitions to the font styles of this project,
they are in form of classes, then to apply you should add the
class in the desired tag*/
.karla-400 {
font-family: "Karla", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.karla-700 {
font-family: "Karla", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
/*When you define the style of a class, you use a dot before the classname,
but when you apply it to an id, you should use a # instead*/
#mainTitle{
color: hsl(179, 62%, 43%);
font-size: 1.75em;
}
#emphasis{
color: rgb(29, 209, 29);
}
.titles{
color: white;
font-size: 1.5em;
}
#grayEmphasis{
color: gray;
}
strong{
font-size: 3em;
margin-right: 0.75rem;
}
#main{
height: 40rem;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 20rem;
}
#underSide{
display: flex;
flex-direction: row;
}
#div2, #div3{
width: 50%;
}
#div2{
background-color: hsl(179, 62%, 43%);
border-radius: 0 0 0 15px;
padding: 0.5rem 2rem 2rem 2rem;
}
#div3{
background-color: hsl(228, 45%, 44%);
border-radius: 0 0 15px 0;
padding: 0.5rem 2rem 2rem 2rem;
}
#div1{
background-color: white;
border-radius: 15px 15px 0 0;
padding: 0.5rem 2rem 2rem 2rem; /*Defines some space from the own component*/
}
#products p{
margin: 0.125rem; /*Defines some space from other components*/
}
#underSide button{
width: 100%;
font-size: 1.25em;
margin-top: 1.5rem;
height: 50px;
background-color: greenyellow; /*Defines the color of the background*/
border-radius: 15px;
color: white; /*Defines the color of the text*/
border: 1px solid greenyellow;
}
/*@media screen is what define when in determinated cases, which behaviour to have*/
/*But don't forget it is using the base, defined previously to all the project, and will
override just if it has a different command for doing it*/
@media screen and (max-width: 1200px) {
#main{
height: fit-content;
margin: 3rem 5rem 3rem 3rem;
}
#underSide{
flex-direction: column;
}
#div1, #div2, #div3{
width: 92%;
}
#div2{
border-radius: 0;
}
#div3{
border-radius: 0 0 15px 15px;
}
}
</style>
</head>
<!--Inside the body we will put all the content html we actually want to appear on the screen-->
<body>
<!--The tag <div> is used to create groups of content-->
<div id="main">
<div id="div1" class="karla-400">
<!--The tag <p> represents a paragraph-->
<p id="mainTitle" class="karla-700">Join our community</p>
<p id="emphasis">30-day, hassle-free money back guarantee</p>
<p id="grayEmphasis">Gain access to our full library of tutorials along with expert code reviews. <br/>
Perfect for any developers who are serious about honing their skills.</p>
</div>
<div id="underSide">
<div id="div2" class="smallBlocks karla-400">
<p class="titles karla-700">Monthly Subscription</p>
<!--A <strong> tag is used in semantic html, tipically used to
the strong importance texts of the project, and also gives that
a bold appareance-->
<p><strong class="karla-700">$29</strong> per month</p>
<p>Full access for less than $1 a day</p>
<!--A button could have different types and goals, also make sure to
define directly to the button its size and color-->
<button>Sign Up</button>
</div>
<div id="div3" class="smallBlocks karla-400">
<p class="titles karla-700">Why Us</p>
<div id="products">
<p>Tutorials by industry experts</p>
<p>Peer & expert code review</p>
<p>Coding exercises</p>
<p>Access to our GitHub repos</p>
<p>Community forum</p>
<p>Flashcard decks</p>
<p>New videos every week</p>
</div>
</div>
</div>
</div>
</body>
</html>