Another Bricks site. It's a Consulting Website

Showcase
1

Would love to receive some feedbacks.
the website is in staging right now.
https://robincookeconsulting.tempurl.host/

This is a project for an ECE (early childhood education) consultant. Preschools and organizations hire her to train their staff on how to work with children and how to get certifications in ECE

The client wanted a website that doesn’t look too childish and so I tried building something.
Let me know if you have any feedback.
Also, I am open to any freelance opportunities.
Thanks

screencapture-robincookeconsulting-tempurl-host-2023-02-26-00_40_59-min (1) (1)
screencapture-robincookeconsulting-tempurl-host-2023-02-26-00_40_59-min (1) (1)1920×9368 744 KB

9 Likes
2

Looks fantastic! Nice work - my only quirk is the image hover animation “rotate”. I sometimes think these feel odd. Perhaps try just zoom on hover.
Everything else is fun, clean and awesome!

1 Like
3

Nicely done, looks great!

4

Thanks for the feedback. But the client actually loved it. Therefore I can’t change it but thanks anyway

5

Hi

looks good.

The only small critic I have is that the menu items in the header as well as the ones in the footer show (for a few seconds) a red (header) or white (footer) dashed frame / line around it when selected.

Maybe this is wanted? I don’t know. Anyway, looks to me like you can get rid of that via CSS if you wanted to (see CSS code below).

Good Job.

Patric

a:active, a:focus, li:focus, li:active {
    outline: none !important;
    border: none !important;        
    text-decoration: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
}
6

Yeah, thanks. I know. I forgot to give outline none. Thanks. Also, there should be an option in the builder to not show the outline. It doesn’t look good.
Or if there is any other way to disable outline other than custom CSS I’d like to know.
Thanks

7

That outline is for accessibility purposes. You can use this CSS to show outline only for keyboard users.

  body.bricks-is-frontend :focus {
    outline: none;
  }
    
  body. bricks-is-frontend :focus-visible {
    outline: thin dotted currentColor;
  }
4 Likes
8

Nice font pairing too.

1 Like
10

Hey man, thanks for this. the site has been transferred to the agency but I’ll let him know about this.

11

Thank You. I appreciate it

12

The website looks great. the only thing I’d like to add is that it doesn’t have a favicon.

13

Can you share the CSS for the menu hover and active underlining ?

14

I would also be interested to know how you implemented the menu hover and active underlining.

15

li a{
position: relative;
}

/************* active underline ****************/
root li.current_page_item a:after {
position: absolute;
content: ‘’;
bottom: 0;
left: 50%!important;
transform: translateX(-50%)!important;
width: 50%;
height: 3px;
background: var(–primary); //your color
}

/****************** underline on hover *****************/
li a:after {
position: absolute;
content: ‘’;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0px;
height: 3px;
background: var(–primary); //your color that you want
transition: 0.3s;
}

li a:hover:after{
width: 100%;
}

16

Hello thanks for liking it, I have mentioned the CSS for the same. Thanks. Also, let me know if you need some help in building websites.

17

Hello @avinash96,

Many thanks for the CSS code. I had already found another solution with a background image, but your solution is much more flexible. I adapted your code to my needs.

root {
  --color1: #00BFFF;
  --color2: #1569ae;
}

root a {
  position: relative;
}

/** active underline ******************/
nav > ul > li.current_page_item a:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 3px;
  background: var(--color1);
}

/** underline on hover ****************/
nav > ul > li > a:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color1);
  transition: 400ms ease-in-out;
}

nav > ul > li > a:hover:after {
	width: 100%;
}

.sub-menu a:hover {
  color: var(--color2) !important;
}

I implemented the code on the following website.

I have only one last problem. When clicking on “Übersetzungen” and displaying the submenu, all submenu items are also underlined. I tried adding “.bricks-menu-item” to the active underline selector, but that didn’t have the desired effect. Anyway, I am now 95% happy with the result :slight_smile:

Again, many thanks!
Chris

19

Hi @avinash96 ,

My previous (deleted) solution still had a bug. This is now the final working solution:

root {
  --color1: #00BFFF;
  --color2: #1569ae;
}

root a {
  position: relative;
}

/** active underline ******************/
.bricks-nav-menu > .current_page_item > a:after,
.bricks-nav-menu > .current-menu-parent > a:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 3px;
  background: var(--color1);
}

/** underline on hover ****************/
.bricks-nav-menu > li > a:after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color1);
  transition: 400ms ease-in-out;
}

.bricks-nav-menu > li > a:hover:after {
	width: 100%;
}

.sub-menu a:hover {
  color: var(--color2) !important;
}

Again, many thanks for your help!

Best regard,
Chris

1 Like
20

Glad, I could be of help.

21

what plugin is been use for appointments, and I see u are using digital ocean, what configuration are u using for managing the websites on the server, are u using like cpanel or other

22

Good looking site, good job. My headache is the different style icons. (example about page). It’s not too professional.
:rofl: