Interview-CSS

by davidtong

HTML

<div id="container" class="bg_bottom_left">
    <h1>Demo of Menu</h1>
    
    <div class="menu_cntr">
        <div class="menu menu_bg">
            <p>Menu</p>
        </div>
    </div>
        
    <h1>Demo of Boxes</h1>
    <div class="box_cntr">
        <ul id="nav" class="basic_list">
            <li class="dark">Lorem ipsum dolor sit amet</li>
            <li class="dark">Lorem ipsum dolor sit amet</li>
            <li class="dark">Lorem ipsum dolor sit amet</li>
            <li class="dark">Lorem ipsum dolor sit amet</li>
        </ul>
    </div>
    <div class="box_cntr">this is a 280px container<div class="blue_icon"></div></div>
    
    <h1>Demo of text</h1>
    <div class="box_cntr">
        <div class="flex_box dark">Lorem</div>
        <div class="flex_box dark">Lorem ipsum dolor sit amet</div>
        <div class="flex_box dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</div>
    </div>
    <div class="box_cntr warning_msg dark">Warning!</div>
    
    <h1>Form</h1>
    <form>
        <input type="text" value="text1">
        <input type="button" value="text2">
    </form>
    
</div>

CSS

div {border: 1px dotted black; position: relative; font-size: 14px; z-index: 1;}
.dark {background: grey;}
.menu_bg {background: blue;}
h1 {margin-top: 50px; font-size: 15px;}
.box_cntr {width: 280px; padding: 0; margin: 0; overflow: hidden;}

h1:first-child {margin-top: 0;}

.menu_cntr {height: 50px; width: 280px; z-index: 2; overflow: visible;}

.menu {position: absolute; width: 100px; height: 200px; right: 10px; top: 20px; opacity: 0.5;}

.bg_bottom_left {background: url('https://www.google.com/images/srpr/logo4w.png') bottom right no-repeat; height: 100%;}

.basic_list {list-style-type: none;}

#nav li {outline: 1px solid red; background-color: grey; box-sizing: border-box;margin: 10px; padding: 10px; width: 50px; height: 50px; float: left; overflow: hidden;}

.blue_icon {background: blue; width: 18px; height: 18px; display: inline-block;}

.flex_box {float: left; min-height: 50px; width: 50px; max-height: 100px;}

.warning_msg {text-align: center; width: 100px; margin: 0 auto;}

input[type=button] {background: red;}