Clean, Stupid, But simple | Landing Page

Kotomi · 01-25-2016, 12:57 AM

Edit-
Fixed a bug I didn't mean to make Tongue

Live:
http://rawr.pw/.~Designs/.~Simple_Landing/

HTML

Spoiler:Code:
<doctype HTML>
<head>
    <title>~Rawr~<3</title>
    <link rel="stylesheet" href="css/index.css" type="text/css"/>
</head>

<body>
    
    
    <div class="rawr">Rawr</div>
    <div class="quotebox"><div class="creating">Creating </div><div class="divide"></div><div class="excelence"> Excelence</div></div>
    <div class="rawrlinehold"><div class="rawrline"></div></div>
    
    
</body>








<!-- 

/* Credits */
/* ------- */
/* Creator */
/* ------- */
/*  Kotomi */
/* ------- */
/* Website */
/* ------- */
/* Rawr.pw */

-->
</doctype>

CSS

Spoiler:Code:
/* Credits */
/* ------- */
/* Creator */
/* ------- */
/*  Kotomi */
/* ------- */
/* Website */
/* ------- */
/* Rawr.pw */


body{
    background:#141414;
    color:#fff;
    font-family: 'Gloria Hallelujah', cursive;
    width:100%;
    margin:0 auto;

}

.rawr{
position:absolute;
     width:800px;
     height:100px;
    font-size:50px;
     z-index:15;
    text-align:center;
     top:40%;
     left:50%;
     margin:-50px 0 0 -400px;
}

.rawrline{
    background:#fff;  
    height:5px;
    width:0px;
    animation-name:extend;
    animation-duration:3s;
        animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.rawrlinehold{
    width:0px;
     height:5px;
     top:53%;
     left:50%;
     margin:-5px 0 0 -400px;
    position:absolute;
        animation-name:extend;
    animation-duration:3s;
    
}

.divide{
    width:5px;
    height:75px;
    position:absolute;
    animation: carrot;
    animation-duration: 1s;
    display:inline-block;
    opacity: 1;
    background:#fff;
    animation-iteration-count: infinite;
    transition:1s;
    
}

.quotebox{
    

position:absolute;
     width:800px;
     height:100px;
    font-size:50px;
     z-index:15;
    text-align:center;
     top:50%;
     left:50%;
     margin:-50px 0 0 -400px;

    
}
.creating{
    display:inline-block;
    margin-right:5px;
}
.excelence{
    display:inline-block;
    margin-left:7px;
}

@keyframes extend{
    from{width:0px;}
    to{width:800px;}
    
}



@keyframes carrot{
    from{opacity: 1;}
    to{opacity: 0;}
}

Parker · 01-25-2016, 01:08 AM

Hmmph, not bad.

OutOfSight · 01-25-2016, 01:20 AM

Lol at the title

Geek · 01-25-2016, 03:09 AM

Good job. But I don't see a point in using the loader if nothing is being showed after that.
Maybe add a page which appears after the loader (think it as a preloader)
Other than that, it looks okay.

Kotomi · 01-25-2016, 03:14 AM

(01-25-2016, 03:09 AM)Geek Wrote: Good job. But I don't see a point in using the loader if nothing is being showed after that.
Maybe add a page which appears after the loader (think it as a preloader)
Other than that, it looks okay.

I'll turn this into a full 1 pager in the next day just because it's fun Smile