Planics Devloper: css

Showing posts with label css. Show all posts

Navigation Menubar using html and CSS

Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then copy code from our post otherwise watch our video on blog.

If you want to design card hover or something then click here and get latest design

free Click here

How to design Best product card hover in 2020?

design beautiful card hover amination using html and CSS . you learn in this video how to flip card using html and CSS.

How to design different type of animation in one loader using html and css?

Free Cards Effect in HTML with CSS

skill card using html and CSS. You can free use for as product card or review Card.

mouse hover flip animation on card using pure html and CSS. Here we show how to transform any object using only CSS.

Here we show, how to design Responsive navbar using html and css.

Nav.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<a href="#">contact</a>

<a href="#">services</a>

<a href="#">about</a>

<a href="#">mores</a>

</div>

<a href="#">login</a>

</div>

</header>

</body>

</html>

How to Design round animated loader using html and css?

style.css

/* background-color:#4361ee;

border-bottom:1px solid #f07167; */

{

margin:00px;

padding:00px;

font-family: 'Roboto', sans-serif;

}

.navigation

{

height: 100vh;

width: 100%;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo

{

height: 80px;

width:80px;

}

.logo img

{

height: 100%;

width:100%;

}

.menu a

{

margin-right: 20px;

text-decoration: none;

color:black;

transition: all 1s;

outline: none;

}

.menu a:hover

{

background-color:#4361ee;

font-size:20px;

color:white;

padding:10px;

border-radius:10px;

outline:none;

}

.btn-login

{

margin:20px;

}

.btn-login a

{

background-color:#f07167 ;

padding: 10px;

border-radius: 10px;

text-decoration: none;

color: white;

outline: none;

}

How to design home page for car using html and css ?How to design web page using adobe XD?How to design different loader using html and css?

How to Design Responsive 404 Error Page in only 5 minutes

Hello guys, Planics Devloper is providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then copy code from our post otherwise watch our video on blog.

If you want to design card hover or something then click here and get latest design

free Click here

How to design Best product card hoverin 2020?

design beautiful card hover amination using html and CSS . you learn in this video how to flip card using html and CSS.

How to design different type of animation in one loader using html and css?

Free Cards Effect in HTML with CSS

skill card using html and CSS. You can free use for as product card or review Card.

mouse hover flip animation on card using pure html and CSS. Here we show how to transform any object using only CSS.

Here we show, how to design Responsive 404 Error page in only 5 minutes.

404.html

Note: here it is only code if you want to download full then click Here

<!DOCTYPE html>

<html>

<head>

<title>404 page not found</title>

</head>

<body>

</svg>

<span class="ml-3 text-xl">Planics dev</span>

</a>

<a class="mr-5 hover:text-gray-900">service</a>

<a class="mr-5 hover:text-gray-900">about</a>

</nav>

<button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Go to home

</svg>

</button>

</div>

</header>

<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">404 "page not found" ERROR</h1>

<p class="mb-8 leading-relaxed">A 404 error is often returned when pages have been moved or deleted. ... 404 errors should not be confused with DNS errors, which appear when the given URL refers to a server name that does not exist. A 404 error indicates that the server itself was found, but that the server was not able to retrieve the requested page.</p>

</div>

</section>

</body>

</html>

How to Design round animated loader usinghtml and css?How to design home page for car usinghtml and css ?How to design web page using adobe XD?How to design different loader using htmland css?

How To Create Animated Text Background with GIF In html and CSS

How to set video in navigation bar ?

You can Watch In Youtube Video How We can set smoke Effect Video in Home page. It’s look like cool If You have any Query Then contact us via email.

How attach Video in Home Lending page?

How to set gif as text background usinghtml and css?

Free Cards Effect in HTML with CSS

How to design square type loaderusingonly html and CSS?

How to design snake animated loaderusing html and CSS?

videotext.html

<!DOCTYPE html>

<html>

<head>

<title>video in background</title>

<style>

.myname

{

display: flex;

justify-content: center;

align-items: center;

font-size:110px;

color:transparent;

background-image: url('https://media.giphy.com/media/DvyxIpxw9cCuQ/giphy.gif');

-webkit-background-clip: text;

}

.myname2

{

display: flex;

justify-content: center;

align-items: center;

font-size:110px;

color:transparent;

background-image: url('https://media.giphy.com/media/5jT0jaNDsM6Ik7X9yq/giphy.gif');

-webkit-background-clip: text;

}

</style>

</head>

<body>

<h1 class="myname">planics dev.</h1>

<h2 class="myname2">subscribe our channel.</h2>

</body>

</html>

How to Design round animated loaderusinghtml and css?

In this link we are provide you how to set video as background any web page.

How to design home page for carusinghtml and css ?

How to design web page using adobe XD?

How to Design Responsive Portfolio Home Page using HTML and CSS?

Simple Portfolio Website with Bootstrap - HTML/CSS

Planics developer is always try to gives you Best design for Website. Here you can get Free Html template or design.

We try to Provide best designing with Accurate and simple code.

How to Design Responsive Home page?

Here we design for car decor website home page templet if you want to use then you can download or copy below code and attach with your website.

Free Responsive Homepage for car website or car décor ?

How to Design Simple Portfolio Website with Bootstrap - HTML/CSS?

Download Html and CSS Code In one click

Click here

Only Html code

CarDecore.html

<!DOCTYPE html>

<head>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"

<title>Planic dev</title>

</head>

<body>

Planics dev

</a>

</button>

<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#introduce">About</a>

</li>

<a class="nav-link" href="#my-skill">Sikll</a>

</li>

<a class="nav-link" href="#services">Service</a>

</li>

<a class="nav-link" href="#contact">Contact</a>

</li>

</ul>

</div>

</nav>

<h1 class="cust-my-name animate__zoomIn animate__animated">i am daxit </h1>

<p class="text-justify pr-5 cust-My-name-info">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit numquam magni inventore dicta voluptate esse sapiente officiis vel quo ex velit rerum, deserunt molestiae laborum id animi, ratione eum nulla! Fugit, velit iste. Ratione placeat sint et harum eligendi </p>

<button type="button" class="btn btn-outline-success">Contact</button>

</div>

</div>

</header>

</div>

<h1 class="mb-5 line-after line-before cust-inroduction-heading ">introduce my self</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat explicabo consectetur ab mollitia reiciendis ea dolorum aperiam maiores velit, nostrum impedit eveniet, distinctio facilis veniam voluptatem fuga vitae quidem voluptatum.</p>

</div>

<h1 class="text-center pt-5 line-after line-before cust-myskill-text-align cust-myskill-heding "> my skill</h1>

</div>

<br>

</div>

<br>

<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 90%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">BOOTSTRAP</div>

</div>

<br>

</div>

<br>

<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 60%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">JAVA SCRIPT</div>

</div>

</div>

<h1 class="text-center line-after line-before cust-ourServiceHeading ">Our services</h1>

<h5 class="card-title text-center pt-2">UI/UX Design</h5>