HTML、CSS、およびJavaScriptを使用して応答個人ポートフォリオサイト
98916 ワード
ここでは、HTML、CSS、JavaScript、およびブートストラップを使用して応答性個人ポートフォリオのウェブサイトを作成する方法を学ぶことができます.私はすでに多くの種類のウェブサイトを設計しました.これは完全に応答personal portfolio website 私はブートストラップ4コードを使用しています.また、一般的なHTMLとCSSのプログラミングコードが使用されている.
Personal portfolio サイトは、あなたの仕事を通して世話される必要がある一貫しています.それはまた、潜在的なクライアントのための便利な方法を提供しながら、あなたのスキル/経験とサービスを拡大させるあなたの仕事を表示します.このサイト[個人ポートフォリオ]では、ホーム、サービス、スキル、ポートフォリオ、チーム、および連絡先、フッター、各セクションの8つのセクションがあります.
チュートリアル:
Download Source Code
ステップバイステップチュートリアル
ナビゲーションメニュー:
あなたがビデオから何かを学ぶことができるならば、あるいは、ビデオがあなたに役立つようであるならば、あなたはビデオを好きにして、購読しなければなりません.その結果、私は他の新しいデザインを作成する動機を得る.
関連記事:
Weather App JavaScript Todo List using JavaScript Simple Stopwatch using JavaScript Skeleton Screen Loading Animation Javascript Age Calculator Password Generator JavaScript
Automatic Image Slider in Html CSS
Sidebar Menu Using HTML CSS
Personal portfolio サイトは、あなたの仕事を通して世話される必要がある一貫しています.それはまた、潜在的なクライアントのための便利な方法を提供しながら、あなたのスキル/経験とサービスを拡大させるあなたの仕事を表示します.このサイト[個人ポートフォリオ]では、ホーム、サービス、スキル、ポートフォリオ、チーム、および連絡先、フッター、各セクションの8つのセクションがあります.
チュートリアル:
Download Source Code
ステップバイステップチュートリアル
ナビゲーションメニュー:
<!-- Navbar Start -->
<nav class="navbar fixed-top shadow-sm navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-lg-5">
<a href="index.html" class="navbar-brand ml-lg-3">
<h1 class="m-0 display-5"><span class="text-primary">Free</span>Folio</h1>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse px-lg-3" id="navbarCollapse">
<div class="navbar-nav m-auto py-0">
<a href="#home" class="nav-item nav-link active">Home</a>
<a href="#about" class="nav-item nav-link">About</a>
<a href="#qualification" class="nav-item nav-link">Quality</a>
<a href="#skill" class="nav-item nav-link">Skill</a>
<a href="#service" class="nav-item nav-link">Service</a>
<a href="#portfolio" class="nav-item nav-link">Portfolio</a>
<a href="#testimonial" class="nav-item nav-link">Review</a>
<a href="#contact" class="nav-item nav-link">Contact</a>
</div>
<a href="" class="btn btn-menu d-none d-lg-block" style="background-color:#457efa; color: #ffffff;">Hire Me</a>
</div>
</nav>
<!-- Navbar End -->
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media (max-width: 991.98px) {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
<!-- Header Start -->
<div class="container-fluid bg-primary d-flex align-items-center mb-5 py-5" id="home" style="min-height: 100vh;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7 text-center text-lg-left">
<h3 class="text-white font-weight-normal mb-3">Hello, my name</h3>
<h1 class="display-3 text-uppercase text-primary mb-2" style="-webkit-text-stroke: 4px #ffffff;">Alaxe Smith</h1>
<h1 class="typed-text-output d-inline font-weight-lighter text-white"></h1>
<div class="typed-text d-none">Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer</div>
<div class="d-flex align-items-center justify-content-center justify-content-lg-start pt-5">
<a href="" class="btn btn-white mr-4">Download CV</a>
<a href="" class="btn btn-blue d-none d-sm-block">Play Video</a>
</div>
</div>
<div class="col-lg-6 px-8 pl-lg-0 pb-5 pb-lg-4 about-img">
<img class="img-fluid w-100 rounded-circle shadow-sm" src="img/profile.png" alt="">
</div>
</div>
</div>
</div>
<!-- Header End -->
/*===================== Hero section ======================*/
.about-img{
margin-left: -100px;
right: -60px;
}
.display-1{
font-size: 160px;
font-weight: 1000;
}
.position-absolute{
font-weight: 700;
}
.typed-cursor {
font-size: 45px;
color: #ffffff;
}
.blue{
background-color: #1c5ce6;
color: #ffffff;
}
.btn{
border: 2px solid rgb(29, 105, 247);
}
.btn-white{
background-color: #ffffff;
border:2px solid #ffffff;
}
.btn-blue{
border: 2.4px solid #ffffff;
color: #ffffff;
}
@media (max-width: 700px) {
.about-img{
margin-left: 20px;
right: 0px;
top: 30px;
}
}
<!-- About Start -->
<div class="container-fluid py-5" id="about">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">About</h1>
<h1 class="position-absolute text-uppercase text-primary">About Me</h1>
</div>
<div class="row align-items-center">
<div class="col-lg-5 pb-4 pb-lg-0">
<img class="img-fluid rounded w-100" src="img/about.jpg" alt="">
</div>
<div class="col-lg-7">
<h3 class="mb-4">UI/UX Designer & Web Developer</h3>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum. Amet dolor stet lorem diam dolor justo et dolor dolor dolor</p>
<div class="row mb-3">
<div class="col-sm-6 py-2"><h6>Name: <span class="text-secondary">Kate Winslet</span></h6></div>
<div class="col-sm-6 py-2"><h6>Birthday: <span class="text-secondary">1 April 1990</span></h6></div>
<div class="col-sm-6 py-2"><h6>Degree: <span class="text-secondary">Master</span></h6></div>
<div class="col-sm-6 py-2"><h6>Experience: <span class="text-secondary">10 Years</span></h6></div>
<div class="col-sm-6 py-2"><h6>Phone: <span class="text-secondary">+012 345 6789</span></h6></div>
<div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">[email protected]</span></h6></div>
<div class="col-sm-6 py-2"><h6>Address: <span class="text-secondary">123 Street, New York, USA</span></h6></div>
<div class="col-sm-6 py-2"><h6>Freelance: <span class="text-secondary">Available</span></h6></div>
</div>
<a href="" class="btn blue btn-outline-primary mr-4">Hire Me</a>
<a href="" class="btn btn-outline-primary">Learn More</a>
</div>
</div>
</div>
</div>
<!-- About End -->
No CSS Code
<!-- Skill Start -->
<div class="container-fluid py-5" id="skill">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Skills</h1>
<h1 class="position-absolute text-uppercase text-primary">My Skills</h1>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">HTML</h6>
<h6 class="font-weight-bold">95%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">CSS</h6>
<h6 class="font-weight-bold">85%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">PHP</h6>
<h6 class="font-weight-bold">90%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Javascript</h6>
<h6 class="font-weight-bold">90%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Angular JS</h6>
<h6 class="font-weight-bold">95%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill mb-4">
<div class="d-flex justify-content-between">
<h6 class="font-weight-bold">Wordpress</h6>
<h6 class="font-weight-bold">85%</h6>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Skill End -->
/*===================== Progress Bar ====================*/
.progress {
border-radius: 10px;
}
.progress .progress-bar {
width: 0px;
border-radius: 10px;
transition: 2s;
}
<!-- Qualification Start -->
<div class="container-fluid py-5" id="qualification">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Quality</h1>
<h1 class="position-absolute text-uppercase text-primary">Education & Expericence</h1>
</div>
<div class="row align-items-center">
<div class="col-lg-6">
<h3 class="mb-4">My Education</h3>
<div class="border-left border-primary pt-2 pl-4 ml-2">
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px; left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Bachelor of Science</h5>
<p class="mb-2"><strong>Cambridge University</strong> | <small>2005 - 2009</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px; left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Master In CSE</h5>
<p class="mb-2"><strong>Cambridge University</strong> | <small>2009 - 2011</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px; left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">IIT Kharagpur</h5>
<p class="mb-2"><strong>Cambridge University</strong> | <small>2011 - 2015</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
</div>
</div>
<div class="col-lg-6">
<h3 class="mb-4">My Expericence</h3>
<div class="border-left border-primary pt-2 pl-4 ml-2">
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px;left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Web Designer</h5>
<p class="mb-2"><strong>Soft Company</strong> | <small> Excellent</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px;left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Artificial Intelligence</h5>
<p class="mb-2"><strong>Soft Company</strong> | <small> Good</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
<div class="position-relative ex-me mb-4">
<i class="far fa-dot-circle text-primary position-absolute" style="top: 2px;left: -35px; font-size: 22px;"></i>
<h5 class="font-weight-bold mb-1">Web Development</h5>
<p class="mb-2"><strong>Soft Company</strong> | <small> Excellent</small></p>
<p>Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum stet lorem diam</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Qualification End -->
/* =================== Queality ======================*/
.ex-me{
margin-top: 35px;
}
<!-- Services Start -->
<div class="container-fluid pt-5" id="service">
<div class="container">
<div class="service-h4 position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Service</h1>
<h1 class="position-absolute text-uppercase text-primary">My Services</h1>
</div>
<div class="row pb-3">
<div class="service-box col-lg-4 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fa fa-2x fa-laptop service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Web Design</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-3 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fa fa-2x fa-laptop-code service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Development</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-4 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fab fa-2x fa-android service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Apps Design</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-4 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fab fa-2x fa-apple service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Apps Development</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem Amet lorem lorem</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-3 col-md-6 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fa fa-2x fa-search service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">SEO</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem </p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
<div class="service-box col-lg-4 col-md-7 text-center mb-5">
<div class="d-flex align-items-center justify-content-center mb-4">
<i class="fa fa-2x fa-edit service-icon bg-primary text-white mr-3"></i>
<h4 class="font-weight-bold m-0">Content Creating</h4>
</div>
<p>Justo sit justo eos amet tempor amet clita amet ipsum eos elitr. Amet lorem lorem lorem est amet labore eirmod erat clita</p>
<a class="border-bottom border-primary text-decoration-none" href="">Read More</a>
</div>
</div>
</div>
</div>
<!-- Services End -->
/* =================== Service Section ==================*/
.service-h4{
padding-bottom: 30px;
}
.service-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 60px;
}
.service-box{
box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.1);
margin-left: 20px;
padding: 15px;
padding-left: 30px;
padding-right: 30px;
}
.service-box:hover{
box-shadow: 0px 1px 13px rgba(27, 27, 27, 0.705);
}
<!-- Portfolio Start -->
<div class="container-fluid pt-5 pb-3" id="portfolio">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Gallery</h1>
<h1 class="position-absolute text-uppercase text-primary">My Portfolio</h1>
</div>
<div class="row">
<div class="col-12 text-center mb-2">
<ul class="list-inline mb-4" id="portfolio-flters">
<li class="btn btn-sm btn-outline-primary m-1 active" data-filter="*">All</li>
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".first">Design</li>
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".second">Development</li>
<li class="btn btn-sm btn-outline-primary m-1" data-filter=".third">Marketing</li>
</ul>
</div>
</div>
<div class="row portfolio-container">
<div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-1.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-1.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item second">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-2.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-2.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item third">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-3.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-3.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-4.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-4.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item second">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-5.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-5.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 portfolio-item third">
<div class="position-relative overflow-hidden mb-2">
<img class="img-fluid rounded w-100" src="img/portfolio-6.jpg" alt="">
<div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
<a href="img/portfolio-6.jpg" data-lightbox="portfolio">
<i class="fa fa-plus text-white" style="font-size: 60px;"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Portfolio End -->
/* =================== Portfolio section ==================*/
.portfolio-item .portfolio-btn {
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 50%;
border-radius: 4px;
opacity: 0;
transition: .5s;
}
.portfolio-item:hover .portfolio-btn {
opacity: 1;
width: calc(100% - 60px);
height: calc(100% - 60px);
top: 30px;
left: 30px;
}
<!-- Testimonial Start -->
<div class="container-fluid py-5" id="testimonial">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Review</h1>
<h1 class="position-absolute text-uppercase text-primary">Clients Say</h1>
</div>
<div class="row justify-content-center">
<div class="col-lg-9">
<div class="owl-carousel testimonial-carousel">
<div class="text-center">
<i class="fa fa-3x fa-quote-left text-primary mb-4"></i>
<h4 class="font-weight-light mb-4">Dolor eirmod diam stet kasd sed. Aliqu rebum est eos. Rebum elitr dolore et eos labore, stet justo sed est sed. Diam sed sed dolor stet accusam amet eirmod eos, labore diam clita</h4>
<img class="img-fluid rounded-circle mx-auto mb-3" src="img/testimonial-1.jpg" style="width: 80px; height: 80px;">
<h5 class="font-weight-bold m-0">Client Name</h5>
<span>Profession</span>
</div>
<div class="text-center">
<i class="fa fa-3x fa-quote-left text-primary mb-4"></i>
<h4 class="font-weight-light mb-4">Dolor eirmod diam stet kasd sed. Aliqu rebum est eos. Rebum elitr dolore et eos labore, stet justo sed est sed. Diam sed sed dolor stet accusam amet eirmod eos, labore diam clita</h4>
<img class="img-fluid rounded-circle mx-auto mb-3" src="img/testimonial-2.jpg" style="width: 80px; height: 80px;">
<h5 class="font-weight-bold m-0">Client Name</h5>
<span>Profession</span>
</div>
<div class="text-center">
<i class="fa fa-3x fa-quote-left text-primary mb-4"></i>
<h4 class="font-weight-light mb-4">Dolor eirmod diam stet kasd sed. Aliqu rebum est eos. Rebum elitr dolore et eos labore, stet justo sed est sed. Diam sed sed dolor stet accusam amet eirmod eos, labore diam clita</h4>
<img class="img-fluid rounded-circle mx-auto mb-3" src="img/testimonial-3.jpg" style="width: 80px; height: 80px;">
<h5 class="font-weight-bold m-0">Client Name</h5>
<span>Profession</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonial End -->
/* ====================== Testimonial ================*/
.testimonial-carousel .text-center{
background-color: #eaecf0d0;
border-radius: 20px;
margin: 20px;
}
.testimonial-carousel .text-center h4{
}
.testimonial-carousel .owl-dots {
margin-top: 25px;
text-align: center;
}
.testimonial-carousel .owl-dot {
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 10px;
background: #dddddd;
}
.testimonial-carousel .owl-dot.active {
background: #0BCEAF;
}
<!-- Contact Start -->
<div class="container-fluid py-5" id="contact">
<div class="container">
<div class="position-relative d-flex align-items-center justify-content-center">
<h1 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Contact</h1>
<h1 class="position-absolute text-uppercase text-primary">Contact Me</h1>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="contact-form text-center">
<div id="success"></div>
<form name="sentMessage" id="contactForm" novalidate="novalidate">
<div class="form-row">
<div class="control-group col-sm-6">
<input type="text" class="form-control p-4" id="name" placeholder="Your Name"
required="required" data-validation-required-message="Please enter your name" />
<p class="help-block text-danger"></p>
</div>
<div class="control-group col-sm-6">
<input type="email" class="form-control p-4" id="email" placeholder="Your Email"
required="required" data-validation-required-message="Please enter your email" />
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<input type="text" class="form-control p-4" id="subject" placeholder="Subject"
required="required" data-validation-required-message="Please enter a subject" />
<p class="help-block text-danger"></p>
</div>
<div class="control-group">
<textarea class="form-control py-3 px-4" rows="5" id="message" placeholder="Message"
required="required"
data-validation-required-message="Please enter your message"></textarea>
<p class="help-block text-danger"></p>
</div>
<div>
<button class="btn btn-outline-primary" type="submit" id="sendMessageButton">Send
Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Contact End -->
/* ========================== Contact Us ========================*/
.contact-form .help-block ul {
margin: 0;
padding: 0;
list-style-type: none;
}
<!-- Footer Start -->
<div class="container-fluid bg-primary text-white mt-5 py-1 px-sm-1 px-md-5">
<div class="container text-center py-5">
<div class="d-flex justify-content-center mb-4">
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-twitter"></i></a>
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-light btn-social mr-2" href="#"><i class="fab fa-linkedin-in"></i></a>
<a class="btn btn-light btn-social" href="#"><i class="fab fa-instagram"></i></a>
</div>
<div class="d-flex justify-content-center mb-3">
<a class="text-white" href="#">Privacy</a>
<span class="px-3">|</span>
<a class="text-white" href="#">Terms</a>
<span class="px-3">|</span>
<a class="text-white" href="#">FAQs</a>
<span class="px-3">|</span>
<a class="text-white" href="#">Help</a>
</div>
<p class="m-0">© <a class="text-white font-weight-bold" href="#">MysteryCode</a>. All Rights Reserved. Designed by <a class="text-white font-weight-bold" href="#">Mystery Code</a>
</p>
</div>
</div>
<!-- Footer End -->
No Css code
<!-- Back to Top -->
<a href="#" class="btn btn-outline-dark px-0 back-to-top"><i class="fa fa-angle-double-up"></i></a>
/*====================== Back to buttom ==================*/
.back-to-top {
position: fixed;
display: none;
width: 30px;
text-align: center;
right: 30px;
bottom: 30px;
z-index: 11;
animation: action 1s infinite alternate;
}
@keyframes action {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-15px);
}
}
あなたがビデオから何かを学ぶことができるならば、あるいは、ビデオがあなたに役立つようであるならば、あなたはビデオを好きにして、購読しなければなりません.その結果、私は他の新しいデザインを作成する動機を得る.
関連記事:
Weather App JavaScript
Automatic Image Slider in Html CSS
Sidebar Menu Using HTML CSS
Reference
この問題について(HTML、CSS、およびJavaScriptを使用して応答個人ポートフォリオサイト), 我々は、より多くの情報をここで見つけました https://dev.to/code_mystery/responsive-personal-portfolio-website-using-html-css-and-javascript-556mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol