html - move words into a specific area -
problem- how move line example below "hi i'm developer loves clean & elegant code"
from position
http://i.stack.imgur.com/ugrc9.png
into position
http://i.stack.imgur.com/6yemo.png
html of section (the order of isn't aloud changed ex.cant move "hi, i'm developer..." right above "a little bit me" line)
<body> <header> <div class="full-width"> <div class="half-width"> <h1>jubilee austin</h1> </div> <div class="half-width"> <h2><span>hi,</span> i'm developer loves clean & elegant code. </h2> <nav> <ul> <li><a href="#about">about</a></li> <li><a href="#work">work</a></li> <li><a href="#contact">contact</a></li> </ul> </nav> </div> </div> </header> <main> <section id="about"> <div class="full-width"> <h2>a little bit me</h2> <div class="half-width"> <p> i've made home base in providence, rhode island small growing family. journey tech started degree in journalism.as started sharing writing online, fascinated how voice out there. hooked , wanted learn how build own site fit own specific needs.</p> </div> <div class="half-width"> <p>that curiosity opened door never shut. when learned how build first website, realized found gave me freedom & versatility looking in work. i've made full switch front-end development, can use organization skills , eye detail write clean, elegant code.</p> </div> </div> </section> entire css
/****base syles***/ body { font-family: 'source sans pro', sans-serif; } #about, #work, #contact { height: 600px; border: solid red; } /***grid***/ .full-width{ width:1200px; margin: 0 auto; } .half-width{ width:600px; float:left; } .third-width{ width:400px: float:left; } /***about specific***/ #about .full-width{ padding:80px 0; } #about h2{ font-family: 'lora', serif; font-size:36px; color:#262a2b; } #about p{ font-size:21px; color:#7f7f7f; line-height:42px; padding-right:50px; }
update:
the example below has been updated pure css solution use case in regard keeping document structure same. here relevant tidbit:
@media (max-width: 1234px) { .hi { left: 10px; } } @media (min-width: 1235px) { .hi { left: calc(50% - 600px); } } .hi { position: absolute; top: 60px; } notes:
position: absoluteused move element out of normal document flow needed.@mediaqueries used matchwidthsettings.- the odd numbers
1234px/1235pxcalculated whenwidthexceeds specified in.full-widthclass. combines1200pxof specified full width20pxbrowser scroll bar ,14px/15pxdefault margin applied document body.
see , run code below see satisfies use case:
/****base syles***/ body { font-family: 'source sans pro', sans-serif; } #about, #work, #contact { height: 600px; border: solid red; } /***grid***/ .full-width{ width:1200px; margin: 0 auto; } .half-width{ width:600px; float:left; } .third-width{ width:400px; float:left; } @media (max-width: 1234px) { .hi { left: 10px; } } @media (min-width: 1235px) { .hi { left: calc(50% - 600px); } } .hi { position: absolute; top: 60px; } /***about specific***/ #about .full-width{ padding:80px 0; } #about h2{ font-family: 'lora', serif; font-size:36px; color:#262a2b; } #about p{ font-size:21px; color:#7f7f7f; line-height:42px; padding-right:50px; }<body> <header> <div class="full-width"> <div class="half-width"> <h1>jubilee austin</h1> </div> <div class="half-width"> <h2 class='hi'><span>hi,</span> i'm developer loves clean & elegant code.</h2> <nav> <ul> <li><a href="#about">about</a></li> <li><a href="#work">work</a></li> <li><a href="#contact">contact</a></li> </ul> </nav> </div> </div> </header> <main> <section id="about"> <div class="full-width"> <h2>a little bit me</h2> <div class="half-width"> <p> i've made home base in providence, rhode island small growing family. journey tech started degree in journalism.as started sharing writing online, fascinated how voice out there. hooked , wanted learn how build own site fit own specific needs.</p> </div> <div class="half-width"> <p>that curiosity opened door never shut. when learned how build first website, realized found gave me freedom & versatility looking in work. i've made full switch front-end development, can use organization skills , eye detail write clean, elegant code.</p> </div> </div> </section>old solution: can move <h2><span>hi,</span> i'm developer loves clean & elegant code.</h2> line right before <h2>a little bit me</h2> segment.
Comments
Post a Comment