<h3 class="find"><span class="link"> Find your book now!</span></h3>
Note: It seems weird that you give the span a class of link? If you want a link then use an anchor. If you want an interactive button then use the button element.
Also in your codepen that side image code makes no sense (even if I ignore the wh typo). Whatever that image is supposed to be will be stretched unless its aspect ratio matches the measurements you gave it.
Also 100vh means the image will start from where it is and then go down another full viewport height creating a vertical scroll when none may be needed. If the image is at the top of the document then that’s ok as 100vh will make it viewport height but if its 2 or 300px from the top the image goes below the fold because 100vh + 300px is taller than the viewport.
An anchor (link) expects a destination in the form of an href. If you click the link then you go somewhere else. That’s the users expectation.
So if you want someone to click that element and go to another page or section then the anchor is the correct element to use.
If on the other hand you want someone to click that element and for example open a modal or submit data back to the server then it needs to be a button. Buttons are for actions.
If you don’t want either of those and it’s just a hover effect then it should be a span or other text html element.
I’m on a mobile at the moment so will answer tomorrow when I’m on the desktop and can see your latest example.
Same as I gave you above when I used the span. No need for a wrapper div.
I would use it as a background as its not important to the content as the text is explaining everything.
I don’t like the split screen approach but at the least I would merge to one screen for smaller devices with the text on top of the image.
The html is not semantic either as they are not all h3 headings. Even if they were h3 headings that would mean you have h2 and h1 headings above them and you have none. Therefore the first heading should be an h1 and the rest just p tags as they are detailing the heading and not separate sections. Successive headings at the same level would suggest a new section each time so is not semantically correct here.
As a start I would recode the html to this.
<div class="container">
<header class="intro">
<h1>OBX Bookstore</h1>
<p> Find the perfect book to read and enjoy on your stay on the Outer Banks</p>
<p>OBX Bookstore carries many genres, fiction and non-fiction</p>
<p class="book-now"><a href="#"> Find your book now!</a></p>
</header>
<main>
<!-- main content goes here -->
</main>
</div>
And then restyle ( as a starting place) to look like this.
As I said this is a starting place with a more semantic and manageable html in place. You can change the look as required with css to what it needs to be.
If you simplify the split 50/50 screen to just an overlay then you can do away with a media query initially and just have the text on top,
You can’t do that as opacity is atomic in that it affects everything. In my example I used rgba on the background color to make the background see-through but not the text.
You can’t just have white text on an image because in the area of the background image where there is white the white text will disappear. You need to have the intermediate overlay to allow some contrast… In my example you can reduce the rgba value (the last value at the end) and that will make the background lighter but you must ensure contrast.
I would do it like my last example but with perhaps a couple of text shadows behind the text to make it stand out and a little box shadow. I would also center that middle panel so its vertically and horizontally placed on larger screens.
I’m not a designer as such but as a start something like this.
ok, i get the majority of what you with the CSS here
something i need your help with is understading
*:before,
*:after {
box-sizing: inherit;
}
what did you do here?
display: flex;
flex-direction: column;
margin: 0.8rem 1rem;
why use rem here?
font-size: clamp(3rem, 10vw, 4rem);
the first value here is your min-width, the middle your preffered value and the last is max-width. do i have that right? why use rem and vw here?
i do like what you have done here! i like how the main look gets smaller and larger as you adjust the browser… may i ask your method for this?
apologies if you have already explained that let me know though
where can i find resources on designing a site to make it fancy or pretty to look at? i have done some searching
That’s explained in this following article which I believe I have linked to before.
Rem units are based on the root element and therefore will obey user preferences. If a user has designated their preferred font size is 20px then 1rem will equal 20px. If the user has not specified a preferred size then 1 rem will equal whatever the UA has set as default. This will most likely be 16px but a User Agent could set to something else if they so desired.
If you instead had set a size in px then that overrides a users preferences. It’s not a problem for margins but could be disastrous for font sizes.
By using rem the margin remains consistent with the font size and everything works together.
That was done with clamp adjusting the font size based on the viewport width (vw) and gives a bigger or smaller font size depending on the viewport width.
The viewport width is the width of your browser. It will change depending on how wide you open or close the browser.
The vw unit is based on this width so 100vw is the whole width of your browser. It’s similar to percentages except that it’s based on the viewport width and not the contains block’s width as with percentages.
That means if you base a font size on vh the font will be smaller or bigger depending on the viewport width. When used with the clamp property you can set a minimum size and a maximum size so it doesn’t get bigger or smaller but is able to scale between those values.
They are mainly useful for headings as usually your body text should be confined to usable line lengths and a readable text size anyway.
I’m not keen on landing pages. I don’t want to arrive at a site just to find I have to click again to get to the actual site. But maybe that’s just me
That’s more of a general design question and not html css as such. You probably need to take a design course or just look at various sites and try and copy what you like.
It’s not just you. I also strongly dislike sites which make you visit unnecessary pages or click multiple links to reach the content you want. It’s also an accessibility issue. Not everyone finds it easy (or even possible) to move a mouse and click a link.
I also strongly dislike sites which make you visit unnecessary pages or click multiple links to reach the content you want. It’s also an accessibility issue. Not everyone finds it easy (or even possible) to move a mouse and click a link.