Hi guys here it is! my final html+css project, feedback welcome.(link below)
Hi, the link doesn't work
One issue that immediately grabs my attention is background image. On my 13-inch display, it starts repeating itself - i.e. it doesn't cover the whole screen.
Another thing - alignment of elements is a bit out of hand .. Doesn't look consistent to me
looks good, im actually really curious as to how you got instagram to post on your website? I've very new to API's.. any tips? I think its something i would like to include on my website as well (work in progress). THANK YOU X
Thank for the input Powell_v2 I'm working on changing my CSS over from having bootstrap support, which I am finding a bit problematic in cleaning up these problems. As helpful as bootstrap is, in this case it is fighting me more than helping.
the Instagram links are a simple embedding of links that are from my account, a friend who is in coding helped me put it together but his actually shows updated feeds.
the code isn't fantastic yet but I'm sure you work it out
here's a spipit of the code (just search for "-->add instagram link here<--"):
<div class="col-md-4 instagram"> <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:60%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href=" -->add instagram link here<-- " style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Another day living in one of the most beautiful ancient cities</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A photo posted by Reece Freeman (@whitepaw.au) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-09-29T17:36:17+00:00">Sep 29, 2016 at 10:36am PDT</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script> </div> </div>
Looks very good! My only thought...
Stretch the beach picture on the homepage to make it fit the image area, and turn on no-repeat. That line there messes with the whole page, a little bit.
In addition, a few spelling mistakes, and like @powell_v2 said, alignment is off a bit, and inconsistent.
Otherwise, nicely done!
thank you so much!!!
Looks good buddy, this code fixes the background:
Nice work! I like the design, especially the logo! The CSS also seems tidy.
Some minor points:
- The black text can be a little hard to read against the photo (more noticeable on mobile)
- The paragraph text in the 'design...develop...deploy' section is a bit hard to read on mobile. Same for the phone number. I think the work photos could either be a bit bigger on mobile or in two columns. Media queries to change the size would probably be easiest.
- There's some issues if you try your code on an HTML validator (https://validator.w3.org). It looks like one of the issues is to do with the meta viewport tag. It's possible that could cause the text to not be the correct size.
- I wonder if the footer would be better at the very bottom of the page?