Project

Uncategorized

HTML File

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Hi-Tech - Travel diaries</title>
    </head>
    
    
        <div id="main_wrapper">
            <header>
                <div id="main_title">
                    <img src="images/zozor_logo.png" alt="Zozor logo" id="logo" />
                    <h1>Hi-Tech</h1>
                    <h2>Travel diaries</h2>
                </div>
                
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Resume</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
            
            <div id="banner_image">
                <div id="banner_description">
                    Reflections on my holiday in the United States...
                    <a href="#" class="red_button">See article <img src="images/small_arrow.png" alt="" /></a>
                </div>
            </div>
            
            <section>
                <article>
                    <h1><img src="images/pin.png" alt="Travel category" class="cat_icon" />I'm a great traveller</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>
                    <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p>
                    <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p>
                </article>
                <aside>
                    <h1>About the author</h1>
                    <img src="images/arrow.png" alt="" id="arrow" />
                    <p id="zozor_picture"><img src="images/zozor.png" alt="Zozor Picture" /></p>
                    <p>Let me introduce myself: My name's Hi-Tech. I was born on 23 November 2005.</p>
                    <p>A bit meager, is it not? This is why I've now decided to write my biography to let my readers know who I really am.</p>
                    <p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" /><img src="images/rss.png" alt="RSS" /></p>
                </aside>
            </section>
            
            <footer>
                <div id="tweet">
                    <h1>My last tweet</h1>
                    <p>Hee-haw!</p>
                    <p>12/05 23:12</p>
                </div>
                <div id="my_pictures">
                    <h1>My pictures</h1>
                    <p><img src="images/pic1.jpg" alt="Picture" /><img src="images/pic2.jpg" alt="Picture" /><img src="images/pic3.jpg" alt="Picture" /><img src="images/pic4.jpg" alt="Picture" /></p>
                </div>
                <div id="my_friends">
                    <h1>My friends</h1>
                    <ul>
                        <li><a href="#">Sanjay Mehta</a></li>
                        <li><a href="#">Mr Ram</a></li>
                        <li><a href="#">Rohan Lal</a></li>
                        <li><a href="#">MR.Kaushish</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Ji</a></li>
                        <li><a href="#">Super cucumber</a></li>
                        <li><a href="#">Prince</a></li>
                        <li><a href="#">Mr Fan</a></li>
                    </ul>
                </div>
            </footer>
        </div>
    </body>
</html>

CSS file

/* Define custom fonts */

@font-face
{
    font-family: 'BallparkWeiner';
    
    font-weight: bold;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    
    font-weight: normal;
    font-style: normal;
}

/* Main elements of the page */

body
{
    background: url('images/yellow_background.png');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #601810;
}

#main_wrapper
{
    width: 900px;
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Header */

header
{
    background: url('images/line.png') repeat-x bottom;
}

#main_title
{
    display: inline-block;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
}

#logo, header h1
{
    display: inline-block;
    margin-bottom: 0px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

/* Navigation */

nav
{
    display: inline-block;
    width: 640px;
    text-align: right;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline-block;
    margin-right: 5px;
}

nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #760001;
    border-bottom: 5px solid #760001;
}

/* Banner */

#banner_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/sanfrancisco.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banner_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgb(24,24,24); /* Old browsers will read this */
    background-color: rgba(24,24,24,0.8); /* New browsers will read this */
    color: white;
    font-size: 0.8em;
    
}

.red_button
{
    display: inline-block;
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url('images/red_background.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.red_button img
{
    border: 0;
}

/* Body */

article, aside
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}

article
{
    width: 625px;
    margin-right: 15px;
}

.cat_icon
{
    vertical-align: middle;
    margin-right: 8px;
}

article p
{
    font-size: 1.1em;
}

aside
{
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 15px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}

#arrow
{
    position: absolute;
    top: 100px;
    left: -12px;
}

#zozor_picture
{
    text-align: center;
}

#zozor_picture img
{
    border: 1px solid #181818;
}

aside img
{
    margin-right: 5px;
}

/* Footer */

footer
{
    background:  url('images/top.png') no-repeat top center, url('images/line.png') repeat-x top, url('images/shadow.png') repeat-x top;
    padding-top: 25px;
}

footer p, footer ul
{
    font-size: 0.8em;
}

footer h1
{
    font-size: 1.1em;
}

#tweet, #my_pictures, #my_friends
{
    display: inline-block;
    vertical-align: top;
}

#tweet
{
    width: 28%;
}

#my_pictures
{
    width: 35%;
}

#my_friends
{
    width: 31%;
}

#my_pictures img
{
    border: 1px solid #181818;
    margin-right: 2px;
}

#my_friends ul
{
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
    width: 48%;
    list-style-image: url('images/external_link.png');
    padding-left: 2px;
}

#my_friends a
{
    text-decoration: none;
    color: #760001;
}


Leave a Reply

Your email address will not be published. Required fields are marked *