[HTML & CSS] Unsure what to title this..

Roon

Member
Mar 31, 2013
60
9
Okay, I'm designing a portfolio, because my college work requires me to.

I'm struggling to get this...
xuz8.png

to look like this...
8aqt.png


Thanks in advance! :D
 

Roon

Member
Mar 31, 2013
60
9
Alright.

Stylesheet:
Code:
body {
    background: #f2f2f2 url('../pattern-noise.png');
    margin: 0px;
}
nav a {
    font: 28px/28px 'LeagueGothicRegular', helvetica, arial, sans-serif;
    letter-spacing: 1px;
    line-height: 60px;
    text-decoration: none;
    color: white;
    opacity: 0.2;
    font-weight: bold;
    padding: 0px 12px;
}
.logo {
    height: 150px;
}
#right {
    float: right;
}
header {
    background: #272124 url('../pattern-hash.png');
    border-bottom: 5px solid #d0d0d0;
    position: relative;
}

HTML:
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Brandon - Home</title>
    <link rel="stylesheet" type="text/css" href="assets/style/generic-style.css">
    <script type="text/javascript" src="assets/style/jQuery.js"></script>
    <script type="text/javascript" src="assets/style/generic-java.js"></script>
</head>
<body>
    <header>
            <center><img class="logo" src="assets/logo-small.png"></center>
        <nav>
            <a href="home.php">HOME</a>
            <a href="about.php">ABOUT</a>
            <a id="right" href="contact.php">CONTACT</a>
            <a id="right" href="work.php">WORK</a>
        </nav>             
    </header>
</body>
</html>
 

Roon

Member
Mar 31, 2013
60
9
I did.
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Brandon - Home</title>
    <link rel="stylesheet" type="text/css" href="assets/style/generic-style.css">
    <script type="text/javascript" src="assets/style/jQuery.js"></script>
    <script type="text/javascript" src="assets/style/generic-java.js"></script>
</head>
<body>
    <header>
            <center><img class="logo" src="assets/logo-small.png"></center> <---------------------------
        <nav>
            <a href="home.php">HOME</a>
            <a href="about.php">ABOUT</a>
            <a id="right" href="contact.php">CONTACT</a>
            <a id="right" href="work.php">WORK</a>
        </nav>          
    </header>
</body>
</html>
 

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Pretty simple to do once you know how, on mobile at the moment so I'll fetch you a tutorial.



This tut uses the nth-child method which is just one of many ways of achieving what you want. This is probably the tidiest and is fairly simple. Good luck, hope this helps man.
 

Roon

Member
Mar 31, 2013
60
9
Pretty simple to do once you know how, on mobile at the moment so I'll fetch you a tutorial.



This tut uses the nth-child method which is just one of many ways of achieving what you want. This is probably the tidiest and is fairly simple. Good luck, hope this helps man.
That managed to do it, thanks Sysode <3
I Google'd for about 10 minutes too, surprised I didn't find this. :(
 

Users who are viewing this thread

Top