/**This code is not changing the color of the row1 class**/
html, body {
font-family :'montserrat',sans-serif;
}
h1 {
border-left : 2px solid #00f28f;
font-size : 48px;
font-weight : 400;
padding-left : 20px;
}
.main {
margin-top : 80px;
}
form input {
background : #F0f0f0;
border : none;
font-size : 36px;
padding : 20px;
width : 100%;
transition : background 0s, border-left 0s;
}
form input:focus {
background : #fff;
border-left : 2pxsolid #000;
box-shadow : none;
outline : none;
}
button.button {
background : transparent;
border : none;
color : #00f2bf;
cursor : pointer;
font-size : 36px;
padding : 20px 24px;
transition : background 0s, border-left 0s;
}
button.button:hover {
background : #00f2bf;
color : #fff;
}
.row1 {
background : yellowgreen;
}<link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\proj.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<header class="header">
<div class="container">
<div class="row">
<div class="col-xs-2 col-md-2">
<h1>Kalyan The Coder</h1>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container2">
<div class="row1">
<form class="form">
<div class="col-xs-8 col-md-4">
<input type="text" id="TextBox1" placeholder="Enter your query">
</div>
<div class="col-xs-4 col-md-2">
<button type="submit" class="button">post</button>
</div>The code seems to be functioning correctly except for the fact that the color of row1 does not change as expected.
Switching row1 to row in the CSS results in a change to the header color, which is not what was intended.
As a beginner, I am eager to delve deeper into this topic.