Please view and feedback :)


#1

Hi guys here it is! my final html+css project, feedback welcome.(link below)

lost-in-code


#2

Hi, the link doesn't work :frowning:


#3

Fixed.


#4

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 :stuck_out_tongue:


#5

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


#6

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.


#7

Hi stphnyvillegas

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>

"


#8

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!


#9

thank you so much!!!


#10

Looks good buddy, this code fixes the background:

.jumbotron {
background: url(../img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 800px;


#11

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?