05 Laptop Choice

Homework: HTML5 Forms

by Polina Petrova

HTML

<section id="frame">
        <section id="productsList">
            <h1>
                <span class="name">Lenovo laptops</span>
                <span class="products-count">(<span class="count">6</span>)</span>
            </h1>            
            <ul>
                <li>
                    <a href="http://laptop.bg/laptops-lenovo" target="_blank">
                        <h2>Lenovo ThinkPad Edge E530c</h2>
                        <h3>Intel Core i5-3230M</h3>
                        <figure>
                            <img src="http://prikachi.com/images/110/7416110d.png" width="120" alt="Lenovo ThinkPad Edge E530c" />
                        </figure>
                        <div class="price">
                            $999.00
                        </div>
                    </a>
                </li>
                <li>
                    <a href="http://laptop.bg/laptops-lenovo" target="_blank">
                        <h2>Lenovo ThinkPad Edge E530c</h2>
                        <h3>Intel Core i5-3230M</h3>
                        <figure>
                            <img src="http://prikachi.com/images/110/7416110d.png" width="120" alt="Lenovo ThinkPad Edge E530c" />
                        </figure>
                        <div class="price">
                            $999.00
                        </div>
                    </a>
                </li>
                <li>
                    <a href="http://laptop.bg/laptops-lenovo" target="_blank">
                        <h2>Lenovo ThinkPad Edge E530c</h2>
                        <h3>Intel Core i5-3230M</h3>
                        <figure>
                            <img src="http://prikachi.com/images/110/7416110d.png" width="120" alt="Lenovo ThinkPad Edge E530c" />
                        </figure>
                        <div class="price">
                            $999.00
                        </div>
                    </a>
                </li>
                <li>
        ...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, select {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*RESET end*/
html {
    font-family: Tahoma, Geneva, sans-serif;       
    font-size: 100%;
    line-height: 100%;  
    color:#243558; 
    text-align:center;  
}

section#frame{
    margin:1rem auto;
    width:960px;
    
    
    display:inline-block; 
    padding:0;
}

#productsList{       
    width:70%;
    padding:0.5rem 0 0.5rem 0.5rem;
    float:left;     
    display:inline-block;  
    border:1px solid #E3F3FB;
    border-top-left-radius:0.5rem;     
    border-bottom-left-radius:0.5rem;
    height:430px;   
}
aside{
     background-color:#F7FCFF;
     border:1px solid #E3F3FB;
     border-top-right-radius:0.5rem;
     border-bottom-right-radius:0.5rem;
     width:auto;
     float:left; 
     padding:0.5rem;
     text-align:center;     
     line-height: 2rem;
     margin:0;
     height:430px;
 }
p{
    width:200px;
    padding:0;
    border-top:1px solid #E3F3FB;
    position:relative;
}
p:first-of-type{
    border:none;
}
label{       
    font-size:1rem;
    padding:0 0 1rem 0;    
}

span.min-value{    
   ...