<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.