Jump to content

Nic727

Members
  • Content Count

    265
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Nic727

  • Rank
    Member

Recent Profile Visitors

18,126 profile views
  1. Hi, I did more design and I need to choose between them. First of all, I would love to have this one It put emphasis to the background image, but in term of UX, it's not that good, because people can't choose which section of the website they can see. But I still love it in term of minimalism. She did that for her website and I don't think it's a big problem... What do you think? Secondly, I made this one which is more like my first idea : I just feel like it's weird with the text centered like that. It make it hard to focus the image because of the vertical line of text. Third : A simple mix with a hidden menu Fourth : Was messing around with the navigation Fifth : Which one do you prefer?
  2. Ok I was thinking about that. 1. Simple homepage is good when you have two distinct sections on a website which I don't have. 2. Following #1, it's stupid to make people click one of those options if they only want to visit my "about" or "contact" page. Now following Homepage #1, I know in other pages my navigation is on the right. But I would like to mix those two ideas of having something useful and simple to not hide my background image. What do you think I should do?
  3. Currently I'm just sketching, but that was my idea for other pages : - Here is my page showing the different photo albums (countries or other subjects) : https://i.postimg.cc/cCT5Hv9x/Photographie1.png - Here is the page showing my photos : https://i.postimg.cc/sfJLKLVk/Photographie1-page.png - Wasn't too sure about the header. Should I have the image going to the top or more like that? https://i.postimg.cc/mkT5BYSp/Photographie2-page.png - Here is the blog page : https://i.postimg.cc/3wD6BJR1/Blogue1.png My navigation in the concept is mostly on the right side with my name on the left side. I will certainly make a logo for the favicon only. For the second homepage, I was taking inspiration from those websites : https://schmidchris.com/ http://gianaterranovaphotography.com/ https://www.kaitlynkarssen.com/ My first idea was indeed to have a homepage with a navigation on the right, but I was feeling like there was something wrong since you have a big background image and just some navigation on the top, a title in the middle and the social links at the bottom. There was something weird about that in my opinion. My name was showing in the navigation and in the middle. Having the navigation centered made it more original and I don't repeat my name in the nav and in the middle.
  4. Hi, I would like some advices about the design of my website. Website goal : Showing my photos and a small travel blog. Homepage v1 : https://postimg.cc/F7H2QbGy Everything centered and a link to go to the latest blog post. Homepage v2 : https://postimg.cc/bSNFp80y Bigger focus on image. Link to the most important sections like photography and blog. Which one do you prefer and what improvements could I make? Thank you
  5. Nic727

    link destroy my design

    Nevermind, I just replaced the div with an <a> tag instead. I tried to add a <a> as a parent of the <div>, but it was broken.
  6. Hi, I have this design currently. If I add a link to each of my cards, I get this blank page. Do you know why <a> is affecting the child element? I though <a> didn't have styles. Thank you
  7. Hi, I know a link is not possible inside another link, but I'm trying to find a solution to this. <div class="ex-story">', <a class="ex-story-link" rel="noopener noreferrer" target="_blank" href="website" title="Title"> <div class="ex-story-img" style="background-image:url('url')"> <div class="ex-story-meta"> <div class="category">Travel</div> <!-- I WANT A LINK HERE --> <div class="blog-name"><h1>TITLE<span class="blog-date">// March 10 2019</span></h1></div> <div class="blog-description">subtitle</div> <div class="blog-authorname">author</div> </div> <div class="bg-filter"></div> </div> </a> </div> Here you can see how my block look like. All my block is a link, so you can click anywhere to access the blog post. The problem is my "category" div. I want people to be able to click on the category name to show blog posts in the same category. But this div is inside a link, so I'm unable to make it work. Do you know how I can fixe that? Right now I have no idea how to make it possible to click on the category link. Thank you
  8. Just want to update. Look like backdrop filter doesn't take transition into consideration even if it's transition happening in the background. Backdrop-filter should only used for certain case like blurred navigation or other things without transitions. Thank you
  9. Hi, What is the best use of height for the HTML and body tag? I currently use auto to don't have problem, but for my design, I need a background image to be height 100%. Should I use background height 100vh or 100% and have body/html height at 100%? Thank you
  10. Hi, I'm trying to add some blur background with backdrop filter and it's really a nice feature if you want to get the fluent design from Microsoft, but I have a weird glitch and I don't know if it's a bug with the filter itself or the fact that I'm working on an offline website with MS Edge. Backdrop filter doesn't seem to take transition into consideration. Problem 1 : Home screen. The button has a blurred background, but since my page go from black to image while loading, it keep the black until the image finish the transition. Same when changing the image. Problem 2 : While creating my blog page, I thought it was cool to have a grayscale image, but since it's a background image, it only work with a backdrop filter layer. Here is what it looks like (I took some feeds from WWF for my work in progress only since I don't have blog yet). Here I hover image 1 : Here is the bug. When hovering the second image, it remove the backdrop-filter from the first image. It's very weird, because it only affect the image above and not the one bellow or the second above. If I hover the image with the bug, it go back to normal... Do you have any idea what may be the problem here? Thank you
  11. Just wanted to update this a bit since I just started to work on my website again after a break and I tried to use that for something else. I use backdrop-filter blur for a nice hover effect. The thing is that for some reason, the blur (1px) effect is adding 0.5px to my margin which I need to correct. It's very weird. Blur should stop right where you put it no? Whatever, I think my problem got fixed in Edge update. The only weird thing is aliasing around the corner which make a little artifact on the corner.
  12. Ok thank you. It worked. I will do more testing. https://www.w3schools.com/css/css_rwd_viewport.asp But what do you mean by device-independent resolution smaller than 768px? From what I saw, from the apple website, my device has a 750px width, but without the meta tag, it's like if it is a 1080px width and 1920px height. Just weird, but thank you for the tips. I will use that more often in my project since it's saving lot of times and a better use of media queries.
  13. Hi, What are the best media query to fully support normal desktop and laptop, tablets and phone? For now I always went with what I was feeling would be ok by figuring how it works by resizing my browser, but with a single live testing on my iPhone 8, I saw that it wasn't working. I don't really know why. Now mobile screens have almost the same resolution as desktop PC and it's hard to only use media query. For example, I use that to remove the white borders around my home screen here http://nicolas-duclos.com and my iPhone 8 show as a 750px width, but @media only screen and (max-width: 860px) { .home-border{ display:none; } } it doesn't work. I don't really know why the white border is still here and why the text is so small. It's 25px for my title and on my desktop for testing it look so big and horizontal screen too, but on vertical position text look smaller. Also, now there are lot of phones of different size on the market, what are the best way to support phone size without breaking tablets and desktop/laptop? What are the best media query to use? Thank you
  14. I fixed the problem by removing 100vh for the height of my home container and added 100% height and position absolute. But I guess it only work on website with a fullscreen page and not one-pager since it's an absolute position.
×
×
  • Create New...