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.

Strawberries

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

index.html

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.

style.css

Now, our logo is looking perfect in localhost.

localhost

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

index.html

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

ul{
flex: 1 1 auto;
text-align: right;
}
ul li{
display: inline-block;
list-style: none;
margin: 0 25px;
}
ul li a{
text-decoration: none;
text-transform: uppercase;
color: black;
padding: 0 10px;
position: relative;
}
ul li a::after{
content: '';
width: 0;
height: 10px;
background: #f14a60;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 18px;
transition: 0.5s;
}
ul li a:hover::after{
width: 100%;
}

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.

index.html

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;
}
.navbar-icons{
margin-left: 40px;
}
.banner{
display: flex;
margin-top: 80px;
}
.left-column, .right-column{
flex-basis: 50%;
}
.right-column img{
width: 100%;
}
.search-box{
width: 45%;
display: flex;
padding-bottom: 3px;
border-bottom: 1px solid #ddd;
margin: 10px 0 30px;
}
.search-box img{
height: 25px;
width: 25px;
cursor: pointer;
}
.search-box input{
width: 100%;
margin-left: 15px;
font-size: 17px;
border: 0;
outline: none;
}

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.

index.html

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

.left-column h1{
font-size: 100px;
}
.left-column h3{
font-size: 30px;
}
.left-column span{
color: #f14a60;
}
.left-column p{
font-size: 14px;
color: #999;
margin: 50px 0;
}
.btn button{
padding: 7px 30px;
margin-right: 15px;
outline: none;
border: 1px solid #fb7381;
border-radius: 20px;
cursor: pointer;
color: #fb7381;
background: transparent;
}
.btn .primary-btn{
background: linear-gradient(#fb7381, #f14a60);
box-shadow: 0 2px 15px rgba(248, 38, 103, 0.26);
color: #fff;
}

Our website is almost complete and looking awesome.

Awesome

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

index.html

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

.social-icons{
width: 200px;
text-align: center;
opacity: 0.4;
margin-top: 50px;
cursor: pointer;
}
.social-icons img{
height: 20px;
margin: 0 14px;
transition: transform 0.2s;
}
.social-icons img:hover{
transform: scale(1.5);
}

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

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Plus One Problem

https://www.nfconcepts.com.ng/sports/afcon-favorites-flatter-to-deceive/

Negative words in Japanese are formed by conjugation.

👋Hi, #WSGARMY @WSGToken’s DUNK IT is the best!🤩

https://youtu.be/T7Url5eSl4Q

Redux Selector

OnCollisionEnter Vs. OnTriggerEnter

Creating an Earthquake Map with Kepler.gl

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

How to add preloader to your HTML page

CSS Grid Tutorial For Beginners

CSS Basics #3: Position, Overflow and Alignment

How to make full stack e-commerce website using HTML, CSS and JS | Part 01