Notes

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
}
/* Styling of header starts */
/* Styling of nav bar starts */
nav{
position: sticky;
top: 0;
background-color: white;
font-size: 18px;
z-index: 5;
}
.left{
float: left;
width: 50%;
}
.right{
float: left;
width: 50%;
text-align: right;
padding-right: 20px;
}
.log,ul{
display: inline-block;
padding-left: 1rem;
}
.log{
position: relative;
top: 10px;
}
nav ul li{
display: inline-block;
padding: 0.2rem 1rem;
}
.right i,button{
display:inline-block;
margin: 0.8rem 0.5rem 0.8rem 0.5rem;
}
nav button{
font-size: 15px;
}
nav .float .right .btn-green{ /* login button */
min-width: 105px;
}
button{
padding: 10px 20px;
border-radius: 25px;
border-style: none;
cursor: pointer;
font-size: 18px;
font-weight: 600;
opacity: 0.81;
}
nav .float .right .btn-black{ /*Upgrade button design*/
opacity: 1;
}
nav .float .right .btn-black:hover{
opacity: 0.81;
}
button:hover{
opacity: 1.0;
}
nav .float .left ul li, #logo, nav .float .right i{
cursor:pointer
}
nav .float .left ul li:hover{
background-color: #04AA6D;
color: #fff;
}
nav .float .right i:hover{
color:#059862;
}
.btn-black{
background-color: #282A35;
color: white;
}
.btn-pink{
background-color: #ffb3bb;
color:black;
}
.btn-yellow{
background-color: #fff080;
color:black;
}
.btn-green{
background-color: #059862;
color:white;
}
.float::after{
content: "";
clear: both;
display: table;
}
.al-center{
text-align: center;
}
/* Responsive design for nav bar */
@media screen and (max-width:1300px) {
nav .float .right .btn-black{
display: none;
}
}
@media screen and (max-width:1200px) {
nav .float .right .btn-pink{
display: none;
}
nav .float .left ul li:last-child{
display: none;
}
}
@media screen and (max-width:949px) {
nav .float .right .btn-yellow{
display: none;
}
}
/* Styling of nav bar ends */
/* Styling of header ends */

/* Styling for introduction section starts */
.intro{
padding: 90px 20px;
line-height: 1.5;
background-color: #282A35;
color: white;
}
.fntSize-80{
font-size: 80px;
padding: 1rem;
}
.fntWeight-6{
font-weight: 600;
font-size: 18px;
}
.intro>p{
color: #FFC0C7;
font-weight: 700;
margin: 20px;
font-size: 23px;
}
.float-form{
margin: auto;
max-width: 500px;
overflow: auto;
}
.left-input{
float: left;
width: 80%;
padding: 10px 0px 10px 30px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border-style: none;
font-size: 18px;
}
.left-button{
float: left;
width: 20%;
margin: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #059862;
color: white;
font-size: 18px;
}
.mg10{
margin:20px;
}
.mg10>a{
color: white;
font-size: 25px;
font-weight: bold;
}
/* Styling of introduction ends */

/* Styling of HTML introduction starts */
.HTML{
padding:5rem;
margin-top:-5px;
background-color: #D9EEE1;
}
.align-center{
text-align: center;
}
.wdth200{
width: 200px;
}
.outside-box-design{
background-color: #E7E9EB;
text-align: center;
color: #000;
padding: 16px;
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
text-align: left;
}
.inside-box-design{
background-color: #fff;
color:#000;
padding: 8px 12px;
font-size: 15px;
border-left: 4px solid #04AA6D;
line-height: 1.5;
margin-top: 16px;
min-height: 200px;
}
.red{
color: red;
}
.blue{
color: blue;
}
.brown{
color:brown;
}
/* Styling of HTML introduction ends */


.CSS{
padding:5rem;
background-color: #FFF4A3;
}
.js{
background-color: #282A35;
padding: 3rem;
color: white;
}
.btn-white{
background-color: #fff;
color: #000;
}
.python{
background-color: #F3ECEA;
color: black;
padding: 3rem;
}
.sql{
padding:4rem;
background-color: #96D4D4;
}

/* Responsive for program box */
@media screen and (max-width:993px) {
.btn-box-design{
width: 100%;
}
.outside-box-design{
width: 100%;
}
}
@media screen and (max-width:600px) {
.outside-box-design{
display: none;
}
}

/* Styling for PHP, Java, C++, etc starts */
.summary,.codeEditor{
background-color: #282A35;
padding: 5rem;
}
.summary>.main-bx{
display: grid;
grid-template-columns: auto auto;
grid-gap: 4rem 6rem;
}
.summary>.main-bx>div{
padding: 24px;
border-radius: 5px;
max-width: 600px;
}
.summary>.main-bx>div>h2{
font-size: 2.7rem;
}
.summary>.main-bx>div>p{
font-size: 18px;
padding: 2rem 0px;
}
.bx-pink{
background:#FFC0C7;
}
.bx-paleYellow{
background-color:#FFF4A3;
}
.bx-antiqueWhite{
background-color: #F3ECEA;
}
.bx-blueGray{
background-color: #D9EEE1;
}
.bx-paleBlue{
background-color: #96D4D4;
}
.bx-smokeWhite{
background-color: #E7E9EB;
}
/* Styling for PHP, Java, C++, etc ends */

/* Styling for program topics R, Kotlin, Node.js, etc starts */
.prog-topic{
background-color: #282A35;
padding: 0 5rem 5rem 5rem;
}
.prog-topic>.prog-box{
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 4rem;
}
.prog-topic>.prog-box>div{
font-size: 2rem;
font-weight: 600;
padding: 40px 0px;
max-width: 262px;
border-radius: 5px;
}
/* Styling for program topics R, Kotlin, Node.js, etc ends */
.ExtraTopic{
display: grid;
grid-template-columns: auto auto;
grid-gap: 2rem;
}
.ExtraTopic>div{
padding: 24px;
border-radius: 5px;
}
.color-white{
color:white;
}