StudentCodingHUB

Use programming to create innovative things.

    • new post

    Friday, 6 December 2019

    Home html&css COLLEGE TOPPER LIST

    COLLEGE TOPPER LIST





    <html>
    <head>
    <title>Page Title</title>
    </head>
    <style>
    div.ex8{
     {
      width:660px;
      margin: 2px;
      border: 2px meroon;
      height:400px;
      peding:50px;
      border-radius: 10px;
    }
    }
    div.ex1 {
      width:630px;
      margin: 2px;
      border: 3px solid darkcyan;
      height:260px;
      peding:50px;
      border-radius: 10px;
    }



    div.ex5
    {
    height:160px;
    width:150px;
    margin:7px;
    border:3px solid deepskyblue;
    border-radius:10px;
    float:left;
    }
    div.ex6{
    color:red;
    margin:50px;


    }


          }
    .button {
      display: inline-block;
      border-radius: 10px;
      background-color:pink;
      border:none;
      color: #FFFFFF;
      text-align: center;
      font-size: 20px;
      padding: 15px;
      width: 100px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    div.ex11{
    align:left-corner;
    color:red;




    }
    div.white
    {
    height:120px;
    width:120px;
    margin:7px;
    border:3px solid deepskyblue;
    }

    div.sp{

        height:160px;
        width:150px;
        margin:7px;
        border:3px solid deepskyblue;
        border-radius:10px;
        margin-left:295px;
        margin-top:-100px;
    }
    div.ps{

        height:160px;
        width:150px;
        margin:7px;
        border:3px solid white;
        border-radius:10px;
        margin-left:470px;
        margin-top:-180px;
    }

    .dropbtn1:hover{
      background-color:  #008CBA;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      border-radius:8px;
      height:100px;
      weight:100px;
      border-radius:8px;


    }

    .dropdown {
      position: relative;
      display: inline-block;
      padding:10px;
      float:right;
      margin-right:30px;


    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #87CEFA ;
      min-width: 1px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: blue;
      padding: 10px 16px;
      text-decoration: none;
      display: block;

    }

    .dropdown-content a:hover {background-color: #ddd;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: #3e8e41;}
    </style>
    <body>

    <h1 align="center" >COLLEGE TOPPER LIST PAGE.13</h1>

    <h2 align="center" >College Topper Detail.</h2>


    </body>

    <body>
    <div class="ex8">



    <div class="ex1">
    <div class="dropdown">
      <button class="dropbtn">FILTER</button>
      <div class="dropdown-content">
        <a href="#">YOA</a>
        <a href="#">COURSE</a>
     
      </div>
    </div>


    <h3>YOA 2017 courses CSE</h3>
     <div class="ex5"><h3 align="center"></h3></div>


    <div class="ex5"><h3 align="center"></h3></div>
    <div class="ex5"><h3 align="center"></h3></div>


    </div>

    <div class="ex1">
    <h3>YOA 2017 courses CSE   </h3>

    <div class="ex5"><img src="https://fscomps.fotosearch.com/compc/CSP/CSP835/student-icon-graduation-clipart__k38154384.jpg"height="150px" width="150px" ></div>
    <h3>Name<br>
    Position:1<br>
    Pecentage 98%<br>
    Location
    </h3>
    <div class="sp"><img src="https://static.vecteezy.com/system/resources/thumbnails/000/351/498/small/Education__28192_29.jpg"height="160px" width="150px" ></div>
    <div class="ps">
    <h3>Name<br>
    Position:2<br>
    Pecentage 92%<br>
    Location
    </h3>
    </div>


    </div>
    <div class="ex1">
    <h3>YOA 2017  courses CSE</h3>

    <div class="ex5"><img src="https://cdn0.iconfinder.com/data/icons/student-2/100/student-1-512.png"height="160px" width="150px" ></div>
    <h3>Name<br>
    Position:1<br>
    Pecentage 89%<br>
    Location
    </h3>

    <div class="sp"><img src="https://toppng.com/uploads/preview/help-your-student-college-student-icon-11562880688qcza431pme.png"height="150px" width="150px" ></div>
    <div class="ps">
    <h3>Name<br>
    Position:2<br>
    Pecentage 87%<br>
    Location
    </h3>
    </div>



    </div>
    <h2 align="center">This is Public ,any one can see this Report</h2>

    </div>
    </body>
    </html>


                                                                      RUN CODE
    Read more
    Labels:

    1 comment: