Nero, Shut Up And Rice: Gaiden - Topic

Nereaux

Member

Posts: 17,374

Joined: Jul 6 2007

Gold: 12,143.67

#41

Jul 15 2015 08:30pm

i pulled the glass out np

Nereaux

Member

Posts: 17,374

Joined: Jul 6 2007

Gold: 12,143.67

#42

Jul 15 2015 09:07pm

i think it's done

Code

body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
height: 100%;
width: 100%;
font-size: 16px;
position: absolute;
}

@font-face {
font-family: rText;
src: url(Images/Fonts/Miller/Miller-Text-Italic_30504.ttf);
}

@font-face {
font-family: eText;
src: url(Images/Fonts/MissionGothic/MissionGothicThin.otf)format('opentype');
}

/*The not so heroic "Hero"*/

#Hero{
background-color: #F7524E;
position: absolute;
width: 100%;
height: 0.5625%;
top: 0;
}

#Content{
position: absolute;
height: 50%;
width: 100%;
bottom: 33.333%;
background-color: #F7F7F7;
}

#footer{
position: absolute;
bottom: 0;
background-color: #28312E;
height: 33.333%;
width: 100%;
}

#footer > span{
width: 100%;
float: right;
margin: 0 auto;
position: relative;
top: 15%;
font-family: rText;
color: #f7f7f7;
font-size: 0.75em;
text-transform: uppercase;
text-align: center;
}

#footerTop{
position: relative;
background-color: #2A3938;
height: 16.5%;
width: 100%;
top: 0;
}

#searchBar{
box-sizing: border-box;
top: 35%;
margin: 0 auto;
position: relative;
background-color: #424A4A;
height: 10%;
border: 0;
width: 65%;
}

#goBar{
display: inline;
float: right;
position: relative;
box-sizing: border-box;
background-color: #2A3938;
height: 100%;
width: 16.5%;
text-align: center;
}

#Weekday{
top: 5%;
width: 100%;
position: relative;
font-family: rText;
color: #F7524E;
text-align: center;
font-size: 1em;
}

#Clock{
top: 10%;
width: 100%;
color: #f7f7f7;
margin-left: auto;
margin-right: auto;
width: 10%;
position: relative;
font-family: rText;
background-color: #F7524E;
text-align: center;
font-size: 0.75em;
}

#footer > h1{
width: 100%;
float: right;
margin: 0 auto;
position: relative;
top: 45%;
font-family: eText;
letter-spacing: 0.25em;
color: #f7f7f7;
font-size: 0.5em;
text-transform: uppercase;
text-align: center;
}

ul{
height: 100%;
list-style-type: none;
padding: 0;
margin: 0;
}

#Content > ul > li{
top: 25%;
position: relative;
margin: 0 auto 3% auto;
background-color: #F7524E;
padding-top: 2%;
padding-bottom: 2%;
width: 50%;
font-family: eText;
color: #F7F7F7;
letter-spacing: 0.25em;
text-align: center;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.35);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.35);
}

#Content > ul > li:nth-child(n+5){
background-color: transparent;
color: #F7524E;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0);
-webkit-box-shadow: 1px 1px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0);
}

Code

<div id="Hero"></div>

<div id="Clock"><a id="hour"></a>:<a id="minute"></a></div>
<div id="weekday"></div>

<div id="Content">
<ul>
<li>music</li>
<li>browser</li>
<li>chat</li>
<li>messages</li>
<li>settings</i>
</ul>
</div>

<div id="footer">

<div id="footerTop"></div>
<div id="searchBar">
<div id="goBar"></div>
</div>
<span>looking for something?</span>
<h1>respring</h1>

</div>

i think i dun tetu proud, lads.

i think the list elements need a max width/height for it to be truly dynamic, but it's not bad

Nereaux

Member

Posts: 17,374

Joined: Jul 6 2007

Gold: 12,143.67

#43

Jul 15 2015 11:17pm

http://imgur.com/a/6oW1a

Tetu_880

Member

Posts: 4,678

Joined: Jul 7 2007

Gold: 9,529.00

#44

Jul 16 2015 05:46am

I'll fine tooth this bad boy when I have some down time at work, but looking better for sure.

MidnightRider

Member

Posts: 11,881

Joined: Aug 17 2007

Gold: 0.00

#45

Jul 16 2015 11:44am

Quote (Nereaux @ Jul 15 2015 11:07pm)

i think i dun tetu proud, lads.

i think the list elements need a max width/height for it to be truly dynamic, but it's not bad

Me gusta this color scheme.

The lack of capitalization on the widget text is thowin me a fast one though!

Inertiatic

Member

Posts: 8,783

Joined: Oct 3 2006

Gold: 16,390.15

#46

Jul 16 2015 03:49pm

Quote (Nereaux @ Jul 15 2015 08:07pm)

http://i.imgur.com/GHT3oGS.png

i think it's done

Code

i think i dun tetu proud, lads.

i think the list elements need a max width/height for it to be truly dynamic, but it's not bad

I lyk

Nereaux

Member

Posts: 17,374

Joined: Jul 6 2007

Gold: 12,143.67

#47

Jul 22 2015 05:45pm

just so you guys know i haven't stopped

i've been under the instruction of tetu and so i've mostly been playing around with the concepts he's been teaching me instead of actually doiong design things.

but i did stumble onto this neat little bastard while looking up abstract shapes:

Code

#space-invader{

box-shadow:
0 0 0 1em red,
0 1em 0 1em red,
-2.5em 1.5em 0 .5em red,
2.5em 1.5em 0 .5em red,
-3em -3em 0 0 red,
3em -3em 0 0 red,
-2em -2em 0 0 red,
2em -2em 0 0 red,
-3em -1em 0 0 red,
-2em -1em 0 0 red,
2em -1em 0 0 red,
3em -1em 0 0 red,
-4em 0 0 0 red,
-3em 0 0 0 red,
3em 0 0 0 red,
4em 0 0 0 red,
-5em 1em 0 0 red,
-4em 1em 0 0 red,
4em 1em 0 0 red,
5em 1em 0 0 red,
-5em 2em 0 0 red,
5em 2em 0 0 red,
-5em 3em 0 0 red,
-3em 3em 0 0 red,
3em 3em 0 0 red,
5em 3em 0 0 red,
-2em 4em 0 0 red,
-1em 4em 0 0 red,
1em 4em 0 0 red,
2em 4em 0 0 red;

background: red;
width: 1em;
height: 1em;
overflow: hidden;

margin: 50px 0 70px 65px;
}

Avid

Member

Posts: 55,395

Joined: Mar 18 2007

Gold: 0.71

#48

Jul 22 2015 10:28pm

I still don't know what I'm even looking at here but I keep coming back

Nereaux

Member

Posts: 17,374

Joined: Jul 6 2007

Gold: 12,143.67

#49

Jul 22 2015 10:36pm

http://imgur.com/a/ALFs4

still a work in progress. i've got to finish the lock screen and then i'll be theming some icons from scratch for my CC and a few of my "must have" apps for the sake of presentation.

Code

<body onload="init()">

<div id="Calendar">
<a id="month"></a><a id="date"></a>
<a id="espacio" style="display:none;"></a>
</div>

<div id="navContainer">
<div class="respring">
<div id="Clock">
<a id="hour"></a><a id="minute"></a>
</div>
</div>
<div class="list">
<div class="nav">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>

<div id="bodyContainer">
<div class="gridBox" style="display:none;">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div class="gridBae">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

<div id="footerContainer">
<div class="line">
young & in the way
</div>

</div>

Code

body{
margin: 0;
padding: 0;
background-color: #F7F7F7;
font-size: 16px;
width: 100%;
height: 100%;
}

/*Light Navigation & Header with Alarm and Menu icon*/

#navContainer{
height: 16.5%;
width: 100%;
position: absolute;
top: 0;
background-color: blue;
}

#navContainer .respring{
width: 33.333%;
height: 100%;
position: absolute;
left: 0;
background-color: #454545;
}

#navContainer .list{
width: 66.6667%;
height: 100%;
float: right;
position: absolute;
right: 0;
background-color: #313131;
}

#navContainer .list .nav{
height: 80px;
width: 80px;
right: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}

#navContainer .list .nav > ul{
list-style-type: none;
box-sizing: border-box;
padding: 25.25px 30px 21.25px 25px;
margin: 0;
}

#navContainer .list .nav > ul > li{
background-color: white;
width: 20px;
height: 2.5px;
margin: 5px;
}

/*Container and Grid Icons */

#bodyContainer{
width: 100%;
height: 33.333%;
top: 16.5%;
position: absolute;
box-sizing: border-box;
padding-top: 50%;
}

#bodyContainer .gridBox{
height: 80px;
width: 80px;
margin-left: auto;
margin-right: auto;
position: relative;
}

#bodyContainer .gridBox > ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#bodyContainer .gridBox > ul > li{
background-color: #313131;
height: 20px;
width: 20px;
margin: 10px;
float: left;
position: relative;
box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

#bodyContainer .gridBae{
height: 16px;
width: 16px;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 30%;
}

#bodyContainer .gridBae > ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#bodyContainer .gridBae > ul > li{
background-color: #313131;
height: 4px;
width: 4px;
margin: 2px;
float: left;
position: relative;
box-shadow: 1px 1px 0 inset;
}

#Clock{
z-index: 5;
position: relative;
font-size: 0.75em;
color: #F7F7F7;
font-family: Courier New;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
}

/*Footer and subtext*/

#footerContainer{
position: absolute;
bottom: 0;
height: 8.25%;
width: 100%;
}

#footerContainer .line{
box-sizing: border-box;
position: relative;
height: 50%;
width: 66.6667%;
border-top: 1px solid #454545;
margin: 0 auto;
font-family: Courier New;
text-align: center;
text-transform: lowercase;
font-size: 0.66em;
line-height: 25px;
}

i think i've improved dramatically

Nereaux

Member

Posts: 17,374

Joined: Jul 6 2007

Gold: 12,143.67

#50

Jul 22 2015 10:39pm

also dan you're looking at me make homescreens for my idevice

Go Back To Graphic Design Topic List