How to Design Responsive Portfolio Home Page using HTML and 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
Only Html code
CarDecore.html
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<!--bootstrap
link-->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<!-- google
font-->
<link
href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"
rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
<!-- Font
awesome icon -->
<link
rel="stylesheet" href="C:\Users\daxit\Downloads\fontawesome-free-5.13.0-web\fontawesome-free-5.13.0-web/css/all.min.css">
<link
rel="stylesheet"
href="C:\Users\daxit\Downloads\fontawesome-free-5.13.0-web\fontawesome-free-5.13.0-web/css/all.css">
<title>Planic dev</title>
<link
rel="stylesheet" href="css/mytemplate.css">
</head>
<body>
<!-- start
navabr -->
<nav
class="navbar navbar-expand-lg navbar-light cust-header-size">
<div
class="container">
<a
class="navbar-brand" href="#">
<img
src="images/folwerWithoutname.png" width="00"
height="00" class="d-inline-block align-top"
alt="" loading="lazy">
Planics dev
</a>
<button
class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul
class="navbar-nav ml-auto ">
<li
class="nav-item active">
<a
class="nav-link" href="#">Home <span
class="sr-only">(current)</span></a>
</li>
<li
class="nav-item">
<a
class="nav-link" href="#introduce">About</a>
</li>
<li
class="nav-item">
<a
class="nav-link" href="#my-skill">Sikll</a>
</li>
<li
class="nav-item">
<a
class="nav-link" href="#services">Service</a>
</li>
<li
class="nav-item">
<a
class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- and
navabar -->
<!-- start main header -->
<header
class="container ">
<div
class="row cust-row">
<div
class="col col-md-6 col-lg-6 col-sm-12
col-xl-6 col-12 cust-header-info">
<h3 class="line-after animate__backInLeft animate__animated
animate__bounce">Hey !</h3>
<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" data-target="#contact"
class="btn btn-outline-danger mr-2">Hire Me</button>
<button type="button" class="btn
btn-outline-success">Contact</button>
</div>
<div class="col
col-md-6 col-lg-6 col-sm-12 col-xl-6 col-12
cust-header-img">
<img src="images/header.png"
class="img-fluid">
</div>
</div>
</header>
<!-- end
main header -->
<!-- start
inroduction -->
<div
class="container" id="introduce">
<div
class="row cust-introduce-row">
<div
class="col col-md-6 col-lg-6 col-sm-12
col-xl-6 col-12
cust-introduce-image">
<img
src="images/introduce.png" class="img-fluid">
</div>
<div
class="col col-md-6 col-lg-6 col-sm-12 col-xl-6 col-12 cust-introduce-info
">
<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>
</div>
<!-- end
introdution -->
<!-- start
my skill -->
<div
class="container" id="my-skill" >
<h1 class="text-center pt-5
line-after line-before cust-myskill-text-align cust-myskill-heding ">
my skill</h1>
<div
class="row cust-row-skill mb-5 ">
<div
class="col col-md-6 col-lg-6 col-sm-12
col-xl-6 col-12 pr-5 cust-col-skill-left">
<div
class="progress">
<div
class="progress-bar progress-bar-striped"
role="progressbar" style="width: 95%;"
aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">HTML</div>
</div>
<br>
<div
class="progress">
<div
class="progress-bar progress-bar-striped bg-success"
role="progressbar" style="width: 95%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">CSS</div>
</div>
<br>
<div
class="progress">
<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
class="progress">
<div
class="progress-bar progress-bar-striped bg-warning"
role="progressbar" style="width: 75%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">SASS</div>
</div>
<br>
<div class="progress">
<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>
<div class="col
col-md-6 col-lg-6 col-sm-12 col-xl-6 col-12">
<img
src="images/Skill.png" class="img-fluid">
</div>
</div>
</div>
<!-- End my
skill -->
<!-- Start
service page -->
<div
class="container-fluid cust-service-container"
id="services">
<h1
class="text-center line-after line-before cust-ourServiceHeading
">Our services</h1>
<div
class="row row-cols-1 row-cols-md-3 cust-service-row ">
<div
class="col mb-4 col-sm-6 col-12 col-xl-4 ">
<div
class="card h-100">
<img
src="images/UIXD.png" class="card-img-top"
alt="...">
<div
class="card-body">
<h5
class="card-title text-center pt-2">UI/UX Design</h5>
<p
class="card-text text-justify">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Deserunt facere ea autem saepe cupiditate,
odio earum molestiae explicabo! Cum, sapiente.</p>
</div>
</div>
</div>
<div
class="col mb-4 col-sm-6 col-12 col-xl-4 ">
<div
class="card h-100">
<img
src="images/WebDesign.png" class="card-img-top"
alt="...">
<div
class="card-body">
<h5
class="card-title text-center ">Web Designing</h5>
<p
class="card-text text-justify">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Deserunt facere ea autem saepe cupiditate,
odio earum molestiae explicabo! Cum, sapiente.</p>
</div>
</div>
</div>
<div
class="col mb-4 col-sm-6 col-12 col-xl-4 ">
<div
class="card h-100">
<img
src="images/webDevlopment.png" class="card-img-top"
alt="...">
<div
class="card-body">
<h5
class="card-title text-center">Web devlopment</h5>
<p
class="card-text text-justify">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Deserunt facere ea autem saepe cupiditate,
odio earum molestiae explicabo! Cum, sapiente.</p>
</div>
</div>
</div>
</div>
<div
class="row row-cols-1 row-cols-md-3 cust-service-row ">
<div
class="col col mb-4 col-sm-6 col-12 col-xl-4 ">
<div
class="card h-100">
<img
src="images/SEO.png" class="card-img-top"
alt="...">
<div
class="card-body">
<h5
class="card-title text-center pt-2">SEO</h5>
<p
class="card-text text-justify">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Deserunt facere ea autem saepe cupiditate,
odio earum molestiae explicabo! Cum, sapiente.</p>
</div>
</div>
</div>
<div
class="colcol mb-4 col-sm-6 col-12 col-xl-4 ">
<div
class="card h-100">
<img
src="images/MobileApp.png" class="card-img-top"
alt="...">
<div
class="card-body">
<h5
class="card-title text-center ">Mobile application</h5>
<p
class="card-text text-justify">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Deserunt facere ea autem saepe cupiditate,
odio earum molestiae explicabo! Cum, sapiente.</p>
</div>
</div>
</div>
<div
class="col col mb-4 col-sm-6 col-12 col-xl-4 ">
<div
class="card h-100">
<img
src="images/DesktopAp.png" class="card-img-top"
alt="...">
<div
class="card-body">
<h5
class="card-title text-center">Desktop application</h5>
<p
class="card-text text-justify">Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Deserunt facere ea autem saepe cupiditate,
odio earum molestiae explicabo! Cum, sapiente.</p>
</div>
</div>
</div>
</div>
<!-- End
contact page -->
<!--
============================ start get in touch -->
<div
class="container cust-GetInTouch-Container" id="contact"
>
<h1
class="text-center line-after line-before cust-get-in-touch-heading
">Get in touch</h1>
<div
class="row mt-5
cust-get-in-touch-row">
<div
class="col col-md-6 col-lg-6 col-sm-12 col-xl-6 col-12">
<img
src="images/GetInTouch.png" class="img-fluid">
</div>
<div
class="col col-md-6 col-lg-6 col-sm-12 col-xl-6 col-12
cust-GetInTouch-form">
<form>
<div
class="form-group">
<label for="exampleInputPassword1">Full
Name</label>
<input type="text" class="form-control"
id="exampleInputPassword1" required>
</div>
<div
class="form-group">
<label for="exampleInputEmail1">Email
address</label>
<input type="email" class="form-control"
id="exampleInputEmail1" aria-describedby="emailHelp"
required>
<small id="emailHelp" class="form-text
text-muted">We'll never share your email with anyone
else.</small>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<!--
=============================end grt in touch -->
<!--
===========Start Footer============ -->
<!-- Bootstrap
java scrip link-->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
|
How to Design attractive card designusing only html and css ?
Download Html and CSS Code In one click
0 coment�rios: