-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
2 lines (2 loc) · 15 KB
/
index.html
1
2
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"/><meta name="description" content="Cards useful to introduce people, based in material design guidelines"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><title>introducing-people-cards</title><style>/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:'Roboto','Arial',sans-serif;font-size:16px}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#eee}img{max-width:100%}button{-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border:none;outline:none;-ms-touch-action:none;touch-action:none}.header{display:block;height:7em;position:relative;width:100%;}.header__nav{background-color:#03a5ee;display:block;height:2em;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);text-align:right;width:100%}.header__link{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:rgba(255,255,255,0.7);display:block;float:left;font-size:1.125rem;height:32px;padding:7px;text-align:center;text-decoration:none;-webkit-transition:all .3s linear;transition:all .3s linear;width:32px;}.header__link:hover{background-color:rgba(255,255,255,0.2);color:rgba(255,255,255,0.95)}.header__link:nth-child(1)::after{content:'\f343'}.header__link:nth-child(2)::after{content:'\f360'}.header__link:nth-child(3)::after{content:'\f345'}.header__info{background-color:#03a9f4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;height:100px;margin-top:0;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:18px 0 22px 0;position:relative;text-align:center;width:100%;z-index:-1}.header__title{color:rgba(255,255,255,0.9);display:block;font-weight:normal;margin:0 auto;position:relative;width:210px}@media screen and (max-width:720px){.header__nav{height:48px}.header__link{font-size:24px;height:48px;line-height:48px;padding:0;width:48px}}.wrapper{display:block;margin:3.5em auto;text-align:center;width:45em}@media screen and (max-width:720px){.wrapper{padding-right:4%;width:96%}}.title{border-bottom:1px solid #e0e0e0;color:rgba(66,66,66,0.7);font-weight:400;margin:0;padding-bottom:.25em}.card,.card::after{-webkit-border-radius:.125em;border-radius:.125em;height:16em;width:19em}.card--small,.card--small::after{height:11em;width:17em}.card{-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);background-color:#fff;display:inline-block;margin:1em 2em 3.5em 1em;position:relative;}.card::after{background-color:#03a9f4;content:'';display:block;left:0;opacity:.6;position:absolute;top:0;-webkit-transform:translate3d(10px,10px,0);transform:translate3d(10px,10px,0);-webkit-transition:-webkit-transform .15s linear;transition:transform .15s linear;z-index:-1}.card__btn{background-color:transparent;-webkit-border-radius:50%;border-radius:50%;display:none;height:32px;line-height:32px;position:absolute;right:0;text-decoration:none;top:.15em;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;width:32px;}.card__btn::before{-webkit-transition:-webkit-transform .2s linear;transition:transform .2s linear;color:rgba(66,66,66,0.87);display:block;font-size:18px;margin:auto;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}.card__image-container{display:inline-block;height:100%;margin:0;overflow:hidden;width:7em;}.card__image-container--small{width:5.2em}.card__image{-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;width:100%}@media screen and (max-width:1024px){.card__btn{display:block}}@media screen and (max-width:720px){.card,.card::after{height:15em;width:17em}.card--small,.card--small::after{height:11em;width:17em}}@media screen and (max-width:560px){.card{display:block;margin:1em auto 3.5em auto}}@media screen and (max-width:410px){.card::after{-webkit-transform:translate3d(14px,10px,0);transform:translate3d(14px,10px,0)}}.review{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:16em;padding:1em;text-align:left;vertical-align:top;width:12em;}.review--small{height:11em;padding:.75em;width:11.8em}.review__name,.review__city,.review__content{margin:0}.review__name{color:rgba(66,66,66,0.87);font-size:20px;font-weight:500;}.review__name--small{font-size:18px}.review__city{color:rgba(66,66,66,0.54);font-size:12px;font-weight:400;margin-top:.25}.review__content{color:rgba(66,66,66,0.7);margin-top:1em;font-size:14px;font-weight:400;line-height:20px;}.review__content--small{margin-top:.75em}@media screen and (max-width:720px){.review{height:15em;width:10em}.review--small{height:11em;width:11.8em}}@media screen and (max-width:1024px){.review__name{padding-right:.5em}.review__name--small{padding-right:1em}}.social{height:0;overflow:hidden;visibility:hidden}</style></head><body><header class="header"><nav class="header__nav"><a style="display: none;" href="" title="" target="-blank" class="header__link ico"></a><a href="https://twitter.com/_JorgeBarron" title="twitter" target="-blank" class="header__link ico"></a><a href="https://github.com/jorge8168711/introducing-people-cards" title="github" target="-blank" class="header__link ico"></a></nav><div class="header__info"><h2 class="header__title">Introducing</h2><h2 class="header__title">people cards</h2></div></header><div class="wrapper"><h2 class="title">Small cards</h2><div data-active="inactive" class="card card--small"><button title="Social Networks" class="card__btn ico"></button><div class="social"><a href="https://www.facebook.com" target="_blank" class="social__link ico"></a><a href="https://www.twitter.com/" target="_blank" class="social__link ico"></a><a href="https://www.dribbble.com/" target="_blank" class="social__link ico"></a><a href="https://www.instagram.com/" target="_blank" class="social__link ico"></a></div><figure class="card__image-container card__image-container--small"><img src="./public/images/card1.jpg" alt="Image" class="card__image"/></figure><article class="review review--small"><h2 class="review__name review__name--small">Yesenia Yamileth</h2><h3 class="review__city">Founder & chief executive officer, Mars</h3><p class="review__content review__content--small">Great mother, expert on javascript development, small review about this incredible person.</p></article></div><div data-active="inactive" class="card card--small"><button title="Social Networks" class="card__btn ico"></button><div class="social"><a href="https://www.facebook.com" target="_blank" class="social__link ico"></a><a href="https://www.twitter.com/" target="_blank" class="social__link ico"></a><a href="https://www.dribbble.com/" target="_blank" class="social__link ico"></a><a href="https://www.instagram.com/" target="_blank" class="social__link ico"></a></div><figure class="card__image-container card__image-container--small"><img src="./public/images/card3.jpg" alt="Image" class="card__image"/></figure><article class="review review--small"><h2 class="review__name review__name--small">John Parker </h2><h3 class="review__city">Vice president & engineering, The moon</h3><p class="review__content review__content--small">This kid looks awesome that's why is here.</p></article></div><div data-active="inactive" class="card card--small"><button title="Social Networks" class="card__btn ico"></button><div class="social"><a href="https://www.facebook.com" target="_blank" class="social__link ico"></a><a href="https://www.twitter.com/" target="_blank" class="social__link ico"></a><a href="https://www.dribbble.com/" target="_blank" class="social__link ico"></a><a href="https://www.instagram.com/" target="_blank" class="social__link ico"></a></div><figure class="card__image-container card__image-container--small"><img src="./public/images/card2.jpg" alt="Image" class="card__image"/></figure><article class="review review--small"><h2 class="review__name review__name--small">Dan Lee</h2><h3 class="review__city">Chief creative officer, Tokyo</h3><p class="review__content review__content--small">This man is able to write a complete web app just using the windows notepad, that's awesome...</p></article></div><div data-active="inactive" class="card card--small"><button title="Social Networks" class="card__btn ico"></button><div class="social"><a href="https://www.facebook.com" target="_blank" class="social__link ico"></a><a href="https://www.twitter.com/" target="_blank" class="social__link ico"></a><a href="https://www.dribbble.com/" target="_blank" class="social__link ico"></a><a href="https://www.instagram.com/" target="_blank" class="social__link ico"></a></div><figure class="card__image-container card__image-container--small"><img src="./public/images/card4.jpg" alt="Image" class="card__image"/></figure><article class="review review--small"><h2 class="review__name review__name--small">Sarahi Moreno</h2><h3 class="review__city">Chief creative officer, México</h3><p class="review__content review__content--small">Great mom and awesome front-end developer, able to keep his children quiet while she's writing code.</p></article></div></div><div class="wrapper"><h2 class="title">Big cards</h2><div data-active="inactive" class="card"><button title="Social Networks" class="card__btn ico"></button><div class="social"><a href="https://www.facebook.com" target="_blank" class="social__link ico"></a><a href="https://www.twitter.com/" target="_blank" class="social__link ico"></a><a href="https://www.dribbble.com/" target="_blank" class="social__link ico"></a><a href="https://www.instagram.com/" target="_blank" class="social__link ico"></a></div><figure class="card__image-container"><img src="./public/images/card1.jpg" alt="Image" class="card__image"/></figure><article class="review"><h2 class="review__name">Yesenia Yamileth</h2><h3 class="review__city">Founder & chief executive officer, Mars</h3><p class="review__content">Great mother, expert on javascript development, small review about this incredible person.</p></article></div><div data-active="inactive" class="card"><button title="Social Networks" class="card__btn ico"></button><div class="social"><a href="https://www.facebook.com" target="_blank" class="social__link ico"></a><a href="https://www.twitter.com/" target="_blank" class="social__link ico"></a><a href="https://www.dribbble.com/" target="_blank" class="social__link ico"></a><a href="https://www.instagram.com/" target="_blank" class="social__link ico"></a></div><figure class="card__image-container"><img src="./public/images/card3.jpg" alt="Image" class="card__image"/></figure><article class="review"><h2 class="review__name">John Parker </h2><h3 class="review__city">Vice president & engineering, The moon</h3><p class="review__content">This kid looks awesome that's why is here.</p></article></div><div data-active="inactive" class="card"><button title="Social Networks" class="card__btn ico"></button><div class="social"><a href="https://www.facebook.com" target="_blank" class="social__link ico"></a><a href="https://www.twitter.com/" target="_blank" class="social__link ico"></a><a href="https://www.dribbble.com/" target="_blank" class="social__link ico"></a><a href="https://www.instagram.com/" target="_blank" class="social__link ico"></a></div><figure class="card__image-container"><img src="./public/images/card2.jpg" alt="Image" class="card__image"/></figure><article class="review"><h2 class="review__name">Dan Lee</h2><h3 class="review__city">Chief creative officer, Tokyo</h3><p class="review__content">This man is able to write a complete web app just using the windows notepad, that's awesome...</p></article></div><div data-active="inactive" class="card"><button title="Social Networks" class="card__btn ico"></button><div class="social"><a href="https://www.facebook.com" target="_blank" class="social__link ico"></a><a href="https://www.twitter.com/" target="_blank" class="social__link ico"></a><a href="https://www.dribbble.com/" target="_blank" class="social__link ico"></a><a href="https://www.instagram.com/" target="_blank" class="social__link ico"></a></div><figure class="card__image-container"><img src="./public/images/card4.jpg" alt="Image" class="card__image"/></figure><article class="review"><h2 class="review__name">Sarahi Moreno</h2><h3 class="review__city">Chief creative officer, México</h3><p class="review__content">Great mom and awesome front-end developer, able to keep his children quiet while she's writing code.</p></article></div></div><footer class="footer"><p class="signature"><span class="signature__code"> </span> with all the damn <span class="signature__heart"> </span> by <a class="signature__name" href="https://twitter.c_JorgeBarron" target="_blank">Jorge Eduardo</a></p></footer></body><link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic,300,500,500italic" rel="stylesheet" type="text/css"/><link rel="stylesheet" type="text/css" href="./public/css/main.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script src="./public/js/main.min.js"></script></html>