Creating a mobile-friendly page seems to be a challenge for me.
I want to have header text, top and bottom text, and an image of a phone that hovers over both texts.
I attempted this using Twitter Bootstrap, but I struggled with the overflow property in CSS.
Here's what I'm aiming for: https://i.sstatic.net/Lfhxe.png
And here's what I ended up with: http://plnkr.co/edit/t6w3MtoiD4KUuGe0mM10?p=preview
You can also view the messy code right here:
<style type="text/css">
.text p {
padding-left: 15px;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div style="position: relative;">
<div class="row" style="background-color:#E4F6FC;">
<div class="col-md-3" style="margin:10px">
<p>Logo</p>
</div>
</div>
<div class="row " style="background-color:#E4F6FC;">
<div class="col-md-3 " style="color:#00AAE3;width: 100%;padding-right:0;height: 100%;position:absolute;z-index: 11;top: 0;left: 0;margin-top: 15%">
<p>My</p>
<p>default</p>
<p>text</p>
</div>
<div class="col-md-3" style="padding:0;height: 100%;top: 0;left: 0;margin-top:-5%;float:right;z-index: 12;">
<img src="http://i.imgur.com/qYV93nS.png">
</div>
</div>
<div class="row">
<div class="col-md-3 text" style="padding-top:10px;padding-bottom:10px;color:#FFFFFF;background-color:#00AAE3;padding-right:0;height: 100%;top: 0;left: 0;z-index: 10;top: 0;left: 0;margin-top:-45%">
<p>and few</p>
<p>lines of great</p>
<p>lorem ipsum</p>
<p>here</p>
<button type="button" style="margin-left: 15px;border-radius: 20px;border-color: #FFFFFF;background: none;color:#FFFFFF;" class="btn">
AWESOME BUTTON
<i class="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
I apologize for the mess you've seen and any damage caused to your eyes :с