04 Website Header

HTML Tables homework - task 04

by Polina Petrova

HTML

<header>
        <table>
            <colgroup>
                <col class="first" />
                <col />
            </colgroup>
            <tr>
                <td rowspan="2" class="logo">
                    <a href="http://softuni.bg" target="_blank">
                        <img src="https://softuni.bg/Content/design/logo.png" alt="SoftUni logo" />
                    </a>
                </td>
                <td colspan="3" class="notification">
                    <a id="notifications" href="#">
                        <span class="unread-notifications-count">0</span>
                        <span class="notifications"></span>
                    </a>
                </td>
                <td colspan="3" class="login-search">
                    <table>
                        <tr>
                            <td class="navigation">
                                <a href="#">User</a>
                            </td>
                            <td>
                                <form>
                                    <input type="text" maxlength="100" placeholder="Search.." class="search-input">
                                    <button type="submit" class="search-button"></button>
                                </form>
                            </td>
                        </tr>
                    </table>  
                </td>
            </tr>
            <tr>
                <td class="navigation">
                    <a href="#">News</a>
                </td>
                <td class="navigation">
                    <a href="#">About the university</a>
                </td>
                <td class="navigation">
                    <a href="#">
                        Training courses
                    </a>
                </td>
                <td class="navigation">
                    <a href="#">
                        For companies
                    </a>
                </td>
                <td class="navigation">
...

CSS

table, td, th, a {
    margin:0;
    padding:0;
    border:none;
}
html{    
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color:#fff;
}

header{
    margin: 0 auto;
    width:1100px;
    height:90px;
    background-color:#234465;
    padding:10px 20px 0 20px; 
}

table{
    width:100%;
    height:70%;    
}
.logo{
    width:280px; 
    text-align:left;      
}
td{   
    text-align:right;
    vertical-align:middle;
}
.login-search{
    text-align:right;
}
.navigation{    
    text-align:right;
    text-transform:uppercase;
    padding: 2px 5px 0 5px;
    font-weight: bold;
}
.navigation a,
#notifications{
    outline:none;
    text-decoration:none;
    color:#fff;
    padding:8px 10px;
}
.navigation a:hover,
#notifications:hover{
    background-color:orange;
    border-radius:4px;
    padding:8px 10px;
    text-decoration:none;
    color:#fff;
}

form {    
    height: 30px;
    width: 280px;    
    padding: 0;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fff;
    margin-right:0;
    margin-left:10px;
}

input[type="text"]{
    float: left;
    border: 0;    
    height: 28px;
    width: 210px;
    margin: 0;
    color: #367cae;
    background: transparent;
    font-size: 1rem;
    outline:none;
    padding-left:10px;
}

button[type="submit"] {
    float: right;
    width: 32px;
    height: 30px;    
    background: transparent;
    border: 0;
    border-left: 1px solid #d5d5d5;
    border-collapse: collapse;
    margin: 0;
    background-image: url('https://softuni.bg/Content/design//magn-glass-icon17.png');
    background-position: 7px;
    background-repeat: no-repeat;
}
button[type="submit"]:hover{
    background-color:lightblue;
}

.notifications{
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url('https://softuni.bg/Content/design/notificationsIcon.png') no-repeat;
    margin:0;
    vertical-align:...