Using the h1, h2, and h3 with the following info in css (a,b and c) (titlte1, title2 and title3). I am not sure if I have done it correct in css, need help to find out what I an doing wrong
CSS:
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0.5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
color: inherit;
}
h1, .h1 {
font-size: 2.5rem;
}
h2, .h2 {
font-size: 2rem;
}
h3, .h3 {
font-size: 1.75rem;
}
h4, .h4 {
font-size: 1.5rem;
}
h5, .h5 {
font-size: 1.25rem;
}
h6, .h6 {
font-size: 1rem;
}
h1 .aa{ /* use to make text glow in dashboard.php */
background-image: url("move.gif");
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
font-size: 80px;
margin: 5px 0;
}
h2 .bb { /* use to make text glow in dashboard.php */
background-image: url("move.gif");
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
font-size: 40px;
margin: 10px 0;
}
h3 .cc { /* use to make text glow in dashboard.php */
background-image: url("move.gif");
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;y
font-size: 40px;
margin: 10px 0;
}
.title {
font-family: 'Comic Neue', cursive;
text-align: center;
color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: -1vh;
letter-spacing: 1px;
line-height:2
}
.title1 { /* use to make text glow in dashboard.php */
font-family: 'Coming Soon', cursive;
text-align: center;
color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 20vh;
letter-spacing: 1px;
line-height:2
}
.title2 { /* use to make text glow in dashboard.php */
font-family: 'Allerta Stencil';
text-align: center;
color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 1vh;
letter-spacing: 1px;
line-height:2
}
.title3 { /* use to make text glow in dashboard.php */
font-family: 'Kanit', sans-serif;
text-align: center;
color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 10vh;
letter-spacing: 1px;
line-height:2
}
HTML:
<div class="row">
<div class="col-12 col-sm-6 col-md-5">
<div class="info-box">
<div class="info-box-content">
<h1 class="cc" "title2">aaaaaaaaaaaaaaaaaaaaaaaa</h1>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-5">
<div class="info-box mb-3">
<div class="info-box-content">
<h2 class="cc" "title2">AAAAAAAAAAAA</h2>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="info-box mb-3">
<div class="ms-3">
<h2 class="bb" "title2">AAAAAAAAAAAABBBBBBBBBBBBDDDDDDDDDDD</h2>
</div>
</div>
</div>