Nabendu Biswas

Sep 10, 2021

4 min read

Strawberries Company Website using HTML CSS

Photo by Call Me Fred on Unsplash

In this post we will create a simple and a beautiful Strawberries comany website with HTML and CSS.

So, open VSCode and create the basic structure of a HTML in an index.html file by ! and then pressing tab. We have also put an images in the images folder. You can take them from the github repo at the end.


Next, we will add the code for navbar in our index.html site.


Next, in style.css we are first using a google font and default styles. After that we are giving the styles for the hero and navbar classes.


Now, our logo is looking perfect in localhost.


Next, we will add navbar in our index.html file and we will do this by adding three li inside an ul.


Now, in the style.css file we will first do the style for ul. We are also adding a cool animation of underline by creating an after pseudo element and hiding it first with width: 0 and making width: 100% on hovering

flex: 1 1 auto;
text-align: right;

Now, our navbar is done with cool hovering effect.

Navbar done

Now, we will add the code for some more icons in the menu in index.html. We will also add the code for the next section, which will contain a search image with input in the left column and feature image in right columns.


Now, we will add the styles for all these in style.css file. We are using flex to style a lot of elements here.

.navbar-icons img{
height: 25px;
margin-left: 40px;
cursor: pointer;

Now, our website is looking quite good.

Quite good

Now, we will add a h1, h3 and p tag in our index.html file. We are also adding two buttons in it.


Now, we will add the styles for these new elements in style.css file.

.left-column h1{
font-size: 100px;

Our website is almost complete and looking awesome.


At last we will add the social icons in our project. So, add the four icons as images in our index.html file.


We will add styles for the same in style.css file, with a cool hover effect, which makes the icons large.

width: 200px;
text-align: center;
opacity: 0.4;
margin-top: 50px;
cursor: pointer;

Our small Strawberry site is complete, with two cool hover effect. You can find the code for the same in this github repo.

Strawberry site