Template 2 CSS

by Karol Wieczorek published 2019/02/14 14:00:25 GMT+2, last modified 2019-02-14T14:00:25+02:00

File contents

<!DOCTYPE html>
<html>
<head>
    <title>
    Pierwszy template
    </title>
    
    <style>
        div{
            font-weight: bold;
        }
        
        #header{
            background-color: yellow;
            font-size: 54pt;
            text-align: center;
            padding: 1ex;
        }
        
        #menu{
            background-color: green;
            padding: 50px 0;
            width: 30%;
        }
        
        #content{
            background-color: darkgray;
            height: 500px;
            width: 70%;            
        }
        
        .floatable {
            float: left;
        }
        
        #footer{
            background-color: black;
            color: white;
            text-align: center;
        }
        
    </style>
    
</head>
    <body>
    
<!--        header-->
    <div id="header">
     Header
    </div>
        
<!--        menu-->
        <div id="menu" class="floatable">
            MENU
        </div>
        
<!--        content-->
        <div id="content" class="floatable">
            CONTENT
        </div>
        
        <div style="clear:both"></div>
        
<!--        footer-->
        <div id="footer">
        FOOTER
        </div>
    </body>
</html>