Vittoria's very first project /services website

[vittoriamatteoli]

I created this website for a company , I struggled with aligning the pictures but using the flexbox helped me .
I didn't link any new page on the menu but just linked the sections on the same page for now, I will add content later.
The contact form it's not functional but I just styled it with CSS , since we will get to it further in the lessons.
Logo and Favicon that I added might be not highest quality, I just wanted to learn how to insert them.
Looking forward for a feedback.

[NadiaPosch]

Instead of using position: absolute for your header, I'd recommend using flexbox. You could wrap the nav in the container2 class and apply flexbox there. It would simplify your html and css (see other comment)

Suggested change

	<div class="container2">
	<div class="logo">
	<img src="logo2.png" alt="logo" />
	</div>
	</div>
	<nav>
	<a href="./index.html">Home</a>
	<a href="#services">Services</a>
	<a href="#contact">Contact us</a>
	<a class="appointment-button" href="mailto:[email protected]"
	>Book now</a
	>
	</nav>
	<div class="container2">
	<img src="logo2.png" alt="logo" />
	<nav>
	<a href="./index.html">Home</a>
	<a href="#services">Services</a>
	<a href="#contact">Contact us</a>
	<a class="appointment-button" href="mailto:[email protected]">Book now</a>
	</nav>
	</div>

[NadiaPosch]

With flexbox instead of an absolute position, you wouldn't need as many css properties and you could remove the logo class. Maybe try with the following:

Suggested change

	.logo {
	float: right;
	}
	.container2 {
	position: absolute;
	top: 0;
	clear: none;
	overflow: hidden;
	background-color: white;
	}
	nav {
	float: right;
	position: absolute;
	top: 0;
	right: 30%;
	padding: 30px;
	overflow: hidden;
	background-color: white;
	height: 80px;
	word-spacing: 5px;
	margin-left: 50px;
	margin-bottom: 50px;
	text-transform: uppercase;
	}
	.container2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	}
	nav {
	padding: 30px;
	background-color: white;
	word-spacing: 5px;
	text-transform: uppercase;
	}

[NadiaPosch]

Instead of using display: inline-flex: for the containers, you could just add display: flex for the parent div (see other comment). Because you already set the width to 1/3%, all the containers would be positioned neatly in a row :)

[NadiaPosch]

If you add a .services class to the parent div of the containers, it would simplify your css.

Suggested change

	.container {
	margin-top: 50px;
	position: relative;
	width: 33.33%;
	height: 100%;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	float: left;
	}
	.services {
	display: flex;
	margin-top: 50px;
	}
	.container {
	position: relative;
	width: 33.33%;
	height: 100%;
	justify-content: center;
	}

[NadiaPosch]

You could wrap the icon divs into a parent div and apply display: flex in the parent. This would make it easier in terms of responsiveness.

<div class="icons-wrapper">
  <div class="icons">...</div>
  <div class="icons">...</div>
  <div class="icons">...</div>
</div>

[NadiaPosch]

In the footer you could also apply display: flex to position the columns and make responsiveness easier in the next step.

[NadiaPosch]

The cool thing about classes is that you can use them in multiple places in your code. Because they have the same property, you could for example rename it to footer-title and use it for both titles in the html (see other comment)

[NadiaPosch]

You can use the same class to make it uppercase, e.g. footer-title

[NadiaPosch]

You can use the same class to make it uppercase, e.g. footer-title

[NadiaPosch]

I'm impressed by how far you've got in just a few weeks! The basic structure of your html looks very good. Parts of the CSS could be simplified or reused. I've made a few suggestions and comments but it's a great foundation for the second part of the course :) well done 👍

[vittoriamatteoli]

Thank you so much for your feedback Nadia 😊😊 I will have a look of all suggestions !