<header>
<h1>Website Header</h1>
<div class = "icons">
<a href = "#"><i class="fas fa-archive"></i></a>
<div class = "notification">
  <a href = "#">
  <div class = "notBtn" href = "#">
    <!--Number supports double digets and automaticly hides itself when there is nothing between divs -->
    <div class = "number">2</div>
    <i class="fas fa-bell"></i>
      <div class = "box">
        <div class = "display">
          <div class = "nothing"> 
            <i class="fas fa-child stick"></i> 
            <div class = "cent">Looks Like your all caught up!</div>
          </div>
          <div class = "cont"><!-- Fold this div and try deleting evrything inbetween -->
             <div class = "sec new">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src = "https://c1.staticflickr.com/5/4007/4626436851_5629a97f30_b.jpg">
                </div>
               <div class = "txt">James liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/7 - 2:30 pm</div>
               </a>
            </div>
             <div class = "sec new">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src = "https://obamawhitehouse.archives.gov/sites/obamawhitehouse.archives.gov/files/styles/person_medium_photo/public/person-photo/amanda_lucidon22.jpg?itok=JFPi8OFJ">
                </div>
               <div class = "txt">Annita liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/7 - 2:13 pm</div>
               </a>
            </div>
             <div class = "sec">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3O45RK9qyCrZJivYsY6PmeVEJH07l7bkoolJmscBsNjzump27">
                </div>
               <div class = "txt">Brie liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/6 - 9:35 pm</div>
               </a>
            </div>
             <div class = "sec">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src = "https://c1.staticflickr.com/4/3725/10214643804_75c0b6eeab_b.jpg">
                </div>
               <div class = "txt">Madison liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/6 - 4:04 pm</div>
               </a>
            </div>
             <div class = "sec">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src="https://upload.wikimedia.org/wikipedia/commons/5/52/NG_headshot_white_shirt_square_Jan18.jpg">
                </div>
               <div class = "txt">Ted liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/6 - 10:37 am</div>
               </a>
            </div>
             <div class = "sec">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src = "https://upload.wikimedia.org/wikipedia/commons/d/dd/Pat-headshot-square.jpg">
                </div>
               <div class = "txt">Tommas liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/5 - 7:30 pm</div>
               </a>
            </div>
             <div class = "sec">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src = "https://c1.staticflickr.com/8/7407/13785133614_6254abb8c4.jpg">
                </div>
               <div class = "txt">Claire liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/5 - 2:30 pm</div>
               </a>
            </div>
             <div class = "sec">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src = "//c1.staticflickr.com/1/185/440890151_54c5b920b0_b.jpg">
                </div>
               <div class = "txt">Jerimaiah liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/5 - 1:34 pm</div>
               </a>
            </div>
             <div class = "sec">
               <a href = "https://codepen.io/Golez/">
               <div class = "profCont">
               <img class = "profile" src = "//c2.staticflickr.com/4/3397/3585544855_28442029a5_z.jpg?zz=1">
                </div>
               <div class = "txt">Debra liked your post: "Pure css notification box"</div>
              <div class = "txt sub">11/5 - 10:20 am</div>
               </a>
            </div>
         </div>
        </div>
     </div>
  </div>
    </a>
</div>
<a href = "#"><i class="fas fa-edit"></i></a>
</div>
</header>
a{
  text-decoration: none;
  color: black;
}

a:visited{
  color: black;
}

.box::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
  border-radius: 5px
}

.box::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
  border-radius: 5px
}

.box::-webkit-scrollbar-thumb
{
	background-color: black;
	border: 2px solid black;
  border-radius: 5px
}

header{
  -moz-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.1);
  box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.1);
  height: 110px;
  vertical-align: middle;
}

h1{
 float: left;
  padding: 10px 30px
}

body{
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

.icons{
  display: inline;
  float: right
}

.notification{
  padding-top: 30px;
  position: relative;
  display: inline-block;
}

.number{
  height: 22px;
  width:  22px;
  background-color: #d63031;
  border-radius: 20px;
  color: white;
  text-align: center;
  position: absolute;
  top: 23px;
  left: 60px;
  padding: 3px;
  border-style: solid;
  border-width: 2px;
}

.number:empty {
   display: none;
}

.notBtn{
  transition: 0.5s;
  cursor: pointer
}

.fas{
  font-size: 25pt;
  padding-bottom: 10px;
  color: black;
  margin-right: 40px;
  margin-left: 40px;
}

.box{
  width: 400px;
  height: 0px;
  border-radius: 10px;
  transition: 0.5s;
  position: absolute;
  overflow-y: scroll;
  padding: 0px;
  left: -300px;
  margin-top: 5px;
  background-color: #F4F4F4;
  -webkit-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.1);
  box-shadow: 10px 10px 23px 0px rgba(0,0,0,0.1);
  cursor: context-menu;
}

.fas:hover {
  color: #d63031;
}

.notBtn:hover > .box{
  height: 60vh
}

.content{
  padding: 20px;
  color: black;
  vertical-align: middle;
  text-align: left;
}

.gry{
  background-color: #F4F4F4;
}

.top{
  color: black;
  padding: 10px
}

.display{
  position: relative;
}

.cont{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #F4F4F4;
}

.cont:empty{
  display: none;
}

.stick{
  text-align: center;  
  display: block;
  font-size: 50pt;
  padding-top: 70px;
  padding-left: 80px
}

.stick:hover{
  color: black;
}

.cent{
  text-align: center;
  display: block;
}

.sec{
  padding: 25px 10px;
  background-color: #F4F4F4;
  transition: 0.5s;
}

.profCont{
  padding-left: 15px;
}

.profile{
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  width: 75px;
  float: left;
}

.txt{
  vertical-align: top;
  font-size: 1.25rem;
  padding: 5px 10px 0px 115px;
}

.sub{
  font-size: 1rem;
  color: grey;
}

.new{
  border-style: none none solid none;
  border-color: red;
}

.sec:hover{
  background-color: #BFBFBF;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.