Day 19 of my JAVA FULL STACK Development Learning Journey:HTML&CSS

Hey All!
Welcome to my another blog. Here is a another blog from my html & css series, about my project to create **ILUGC **website . What I learn Today.

ILUGC website:
Indian Linux User's Group - Chennai (Madras).

font family:
body{
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

*{
            padding: 0%;
            margin: 0%;
            box-sizing: border-box;
        }
        body{
            font-family: "Open Sans", Helvetica, Arial, sans-serif;

        }
        .container{
            /* border: 1px solid; */
            /* height: 100vh; */
            width: 57vw;
            margin: auto;
            /* font-family: "Open Sans", Helvetica, Arial, sans-serif; */
            /* margin-top: 1px; */
            margin-top: 27px;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;;
        }
        header{
            padding: 20px;
        }
        .header h4{
            /* border: 1px solid; */
            width: fit-content;
            padding-top: 6px;
            margin-top: 5px;
            /* color: red; */
            border-top: 1px solid rgb(216, 211, 211);
        }
        .header h4 a{
            text-decoration: none;
            color: #e22d30;
        }
        /* .nav-bar{
            display: flex;
            align-items: center; */
        /* } */

        .header{
            /* border: 1px solid; */
            padding: 20px;
        }
        .header a{
            color: rgb(126, 100, 100);
            text-decoration: none;
            text-transform: uppercase;
            color: #e22d30;
        }
        .nav-bar ul li{
            border-right: 1px solid rgb(139, 130, 130);
            padding: 10px;
            list-style-type: none;
        }
        .nav-bar a{
            text-decoration: none;
             color: rgb(255, 254, 254);
        }
        .nav-bar li:hover{
            background-color: #e22d30;
            transition: 0.4s;
        }
        .nav-bar ul{
            display: flex;
            /* justify-content: center; */
            /* align-items: center; */
            border-bottom: 4px solid #e22d30;


        }
        .nav-bar{
            background-color: black;
        }
        .img
    {
        margin-bottom: 10px;
        color: gray;
        font-size: 14px;
        /* border: 1px solid; */
    }
    .box p{
        margin-buttom: 10px;
        line-height: 1.5;
        font-size: 14px;
    }
    .searchbox
    {
        margin-top: 40px;
        /* border: 1px solid ; */
        padding: 20px;
        background-color: rgb(247, 246, 246);
    }
    .searchbox input{
        padding: 10px;
        color: gray;
        /* border: 1px solid rgb(226, 219, 219); */
        font-size: 15px;
        width: 300px;
        outline: none;
        border: none;
    }
    .post
    {
        /* border: 1px solid; */

    }
    .post h4
    {
        margin-top: 39px;
        border-bottom: 3px solid #e22d30;
        padding-bottom: 5px;
        font-size: 1rem;
    }
    .post ul{
        margin-top: 20px;
       list-style-type: none;
    }
    .post ul li{
         border-bottom: 1px solid rgb(241, 235, 235);
         margin-top: 8px;
        padding-bottom: 8px;
    }
    .post ul a{
        text-decoration: none;
        color: black;
        font-size: 15px;
    }
    .post ul a:hover
    {
        color: #e22d30;

    }
    .footer
    {
        border-top: 4px solid gray;
    }
    .footer p
    {
        background-color: rgb(44, 41, 41);
        color: gray;
        padding: 15px;
        font-size: 13px;
    }
      .footer p a{
         color: white;
         text-decoration: none;
      }  
      .swap
      {
        padding: 15px;
      }
      .swap p{
        display: inline;
        padding: 13px;
        background-color: #e22d30;
        color: white;
        font-weight: 600;
      } 
      .swap button
      {
         padding: 15px;
        background-color:rgb(209, 193, 193);
        border: none;
      }
      .mainlayout{
        /* text-decoration: none; */
        border: 1px solid;
        /* height: 100vh; */
        padding: 20px;

      }