Wonderful column recommendation?
About the author: A technical blogger who loves to turn logical thinking into code
Author’s homepage: [Homepage–? Get more high-quality source code]
Web front-end major homework: 【Practice cases of high-quality project projects (1000 sets) 】
Programmer’s interesting confession method: 【HTML Tanabata Valentine’s Day Confession Web Page Production (110 sets) 】
Super cool Echarts large-screen visualization source code: [ echarts large-screen display big data platform visualization (150 sets) 】
Free and practical WEB front-end learning guide: [Web front-end zero basic to advanced learning video tutorial 120G dry goods sharing]
About the author: He has successively served as R&D engineer, technical team leader, and teaching director; he was awarded CSDN’s Top Ten Blog Stars twice in 2016 and 2020. Ten years of cold ice, it is difficult to cool the blood; many years have passed, and after changes, things have changed. However, the exploration and pursuit of technology never stops. Insist on originality, love to share, keep the original intention, carry on the past and open up the future!
Article directory
- 1. ?Website title
- 2. Website description
- 3. Introduction to the website
- 4. Website Demo
- 5. Website code
-
- HTML structure code
- CSS style code
- 6. How to make learning no longer blind
- 7. More dry goods
1. ?Website title
Personal web design, ?♂?CV production, ?simple static HTML personal webpage works,?personal introduction website templates, and other website design and production.
2. Website description
?The website template of personal web design is made with DIV CSS layout. The web works have multiple pages, such as: personal introduction (text page), my works (picture list), personal skills (graphic page), online message (form page) In terms of CSS style, the overall web page adopts a left-right layout structure, and a web page background image is made. Each navigation background color in the navigation area is different, and the navigation background color echoes the page background.
A set of A + web pages should contain (specifically can be determined according to individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably pull down), the middle content section, and the footer.
- All pages are hyperlinked to each other, leading to three-level pages, consisting of 5-10 pages.
- The unified layout of the page style is normal, not messy, using Div + Css technology.
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally.
- There must be JS special effects, such as timing switching and manual switching of picture carousels.
- There are multimedia elements in the page, such as gif, video, music, and the use of form technology. .
- The page is clean, beautiful, generous, and not the same. .
- Not only must it be able to present the content requested by users, but it must also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.
3. Website introduction
Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has stable display effects.
Web site program: It is planned to use the latest web programming language HTML5 + CSS3 + JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers currently on the market, so that the website can be seen immediately after opening.
Website materials: plan to collect good-looking picture materials from various platforms, carefully select pictures suitable for the style of the webpage, and then use PS to make pictures suitable for the size of the webpage.
Website files: The types of website system files include: html web page structure files, css web page style files, js web page special effect files, images web page image files;
Webpage editing: The code of the webpage works is simple, and any HTML editing software can be used (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad + + , etc. Any html editing software for operation, modification and editing).
in:
(1) The html file contains: index.html is the home page, and other html is the second-level page;
(2) The css file contains: all css page styles, text scrolling, image zooming, etc.;
(3) The js file includes: js to achieve dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).
4. Website demo
5. Website code
HTML structure code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tam - Creative Portfolio Template</title>
<meta name="description" content="Tam - Creative Portfolio Template">
<meta name="keywords" content="blog, business card, creative, creative portfolio, cv theme, online resume, personal, portfolio, professional cv, responsive portfolio, resume, resume theme, vcard">
<meta name="author" content="being orge">
<meta name="theme-color" content="#2a2d35">
<!-- TamTemplate style Css -->
<link href="css/tam.css" rel="stylesheet">
</head>
<body>
<div id="bar">
<img src="picture/bar.png" alt="">
</div>
\t
<!-- START: Aside -->
<aside class="aside">
<!-- START: NAVBAR -->
<div class="nav-wrapper">
\t\t\t
<nav class="navbar text-center align-items-center justify-content-center">
<div class="collapse navbar-collapse show" id="navbarCollapse">
<div class="about-avatar mb-5">
<a href="">
<img src="picture/1.jpg" alt="" class="img-fluid mx-auto d-block shadow-sm rounded-full">
</a>
<div class="about-avatar-details mt-4">
<h1>BTS</h1>
<p class="badge">My Love</p>
</div>
</div>
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="resume.html">Introduction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="work.html">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Albums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="biaodan.html">Contact</a>
</li>
<li class="nav-item">
</li>
</ul>
</div>
\t
</nav>
</div>
<!-- END: NAVBAR -->
</aside>
<!-- START: Aside -->
<div class="page-overlay">
<span class="overlay-1"></span>
<span class="overlay-2"></span>
</div>
<div class="page-wrapper">
<!-- START: HOME -->
<section class="section-home" id="home">
<div class="glass">BTS</div>
<!-- <img src="images/banner.jpg" /> -->
</section>
<!-- END: HOME -->
<!-- START: ABOUT -->
<section class="section section-about" id="about">
<div class="container">
<div class="section-head">
<span>Get to know</span>
<h2>About Me</h2>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-md-6">
<img class="about-img img-fluid wow fadeInUp" data-wow-duration="1s" src="picture/1.jpg" alt="About Picture">
</div>
<div class="col-md-6">
<div class="about-desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="500ms">
<div class="about-desc-content">
<h1 class="font-weight-light mb-5">BTS</h1>
<p class="font-weight-light my-3">BTS is a South Korean male singing group launched by BigHit Entertainment on June 13, 2013. , Kim Taehyung, and Jungkook are 7 members.</p>
<p class="font-weight-light my-3">The prototype of BTS originated in 2010. The representative of BigHit Entertainment in South Korea, Bang Si Hyuk, was overwhelmed when he heard Kim Namjoon’s voice for the first time. In 2010, Kim Namjoon was just a rookie in the rap circle. After signing him, Bang Shi Hyuk interviewed and selected the rest six members. After more than two years of preparation, BTS finally formed a group [20] .</p>
</div>
<div class="about-desc-more text-left mt-5">
<div class="row">
<div class="col-md-6">
<div class="about-desc-info">
<b>Age: </b>
<span>19</span>
</div>
</div>
<div class="col-md-6">
<div class="about-desc-info">
<b>Location:</b>
<span>Miami, FL</span>
</div>
</div>
<div class="col-md-6">
<div class="about-desc-info">
<b>Degree: </b>
<span>Master</span>
</div>
</div>
<div class="col-md-6">
<div class="about-desc-info">
<b>Skype:</b>
<a href="tel:beingeorge">beingeorge</a>
</div>
</div>
<div class="col-md-6">
<div class="about-desc-info">
<b>Phone :</b>
<a href="tel:0987654321">XXX</a>
</div>
</div>
<div class="col-md-6">
<div class="about-desc-info">
<b>Email:</b>
<a href="mailto:XXX">XXX</a>
</div>
</div>
\t\t\t\t\t\t\t\t\t
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5 pt-3">
<div class="section-head">
<span>ABILITIES</span>
<h2>My Skills</h2>
</div>
<div class="section-skills-wrap">
<div class="row">
<div class="col-md-6">
<p>From June 3, 2013, BTS began to release teaser photos of its members through its official website[21]; on June 12, it released its first single album "2 COOL 4 SKOOL", which included the title song "No 9 songs including "More Dream"[1]; on the 13th, starred in the Mnet music program "M! Countdown", performed the first stage in the program, and officially debuted[2];</p>
<p> tempor iaculis massa. Sed placerat justo sed libero varius vulputate. Ut a mi tempus massa malesuada fermentum.</p>
</div>
<div class="col-md-6">
<div class="resume-panel">
<div class="mb-4 wow fadeInUp" data-wow-duration="1.5s">
<h6>Kim Namjoon, Kim Seokjin,</h6>
<div class="progress mt-2">
<div class="progress-bar" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".2s">
<h6>Min Yoongi, Jung Ho-seok, </h6>
<div class="progress mt-2">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".3s">
<h6>Park Jimin, Kim Taehyung,</h6>
<div class="progress mt-2">
<div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-0 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".4s">
<h6>Tian Jungkook</h6>
<div class="progress mt-2">
<div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END: ABOUT -->
<!-- START: SERVICES -->
<section class="section section-dark section-services" id="services">
<div class="container">
<div class="section-head">
<span>WHAT I DO</span>
<h2>My Services</h2>
</div>
<div class="row mt-4">
<div class="col-sm-6 col-lg-6">
<div class="services-list b-box hover-state p-4 mt-4 wow fadeInUp" data-wow-duration="1.5s">
<div class="services-list-icon">
<i class="lni-color-pallet"></i>
<span>01</span>
</div>
<div class="mt-4">
<h5 class="mb-0">January 2014</h5>
<p class="mt-3">BTS has won the 28th Golden Disc Awards Newcomer Award in the album category and the 23rd Seoul Music Awards Newcomer Award[24-25]; February 12 , released the second mini album "Skool Luv Affair",</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6">
<div class="services-list b-box hover-state p-4 mt-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".2s">
<div class="services-list-icon">
<i class="lni-laptop-phone"></i>
<span>02</span>
</div>
<div class="mt-4">
<h5 class="mb-0">April 29, 2015</h5>
<p class="mt-3">Released the third mini-album "In the Mood for Love pt.1", the title song "I NEED U" won the first place in 5 Korean music programs[34], this is also the debut of BTS After the first time won a music show[7]</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center mt-5 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".5s">
<a href="services.html" class="btn hover-state">View All</a>
</div>
</div>
</div>
</section>
<!-- END: SERVICES -->
<!--START: FOOTER-->
<footer class="footer section section-light">
<div class="container">
<p class="copyright text-center mb-0"> & amp;copy;</p>
</div>
</footer>
<!--END: FOOTER-->
</div>
<!-- JAVASCRIPTS -->
<script src="js/js.js"></script>
\t
</body>
</html>
CSS style code
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {<!-- -->
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {<!-- -->
display: block;
}
body {<!-- -->
font: 400 16px/1.8 'Roboto Condensed', sans-serif;
color: #333;
overflow-x: hidden;
}
ol, ul {<!-- -->
list-style: none;
}
blockquote, q {<!-- -->
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {<!-- -->
content: '';
content: none;
}
table {<!-- -->
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------------------- /*
* 2. General
/* ------------------------------------------------- */
body {<!-- -->
overflow-x: hidden;
background: #50a3a2;
background: linear-gradient(135deg, rgb(165, 155, 224) 0%, rgba(242,147,113,1) 100%);
background: linear-gradient(135deg, rgb(165, 155, 224) 0%, rgba(242,147,113,1) 100%);
}
#bar{<!-- -->
display: none;
position: fixed;
top: 10px;
left: 10px;
z-index: 9999;
}
#bar img{<!-- -->
width: 40px;
height: 40px;
}
::selection {<!-- -->
background: rgba(166, 175, 189, 0.3);
}
::-moz-selection {<!-- -->
background: rgba(166, 175, 189, 0.3);
}
*, *:after, *:before {<!-- -->
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::-webkit-scrollbar {<!-- -->
display: none;
}
a, .ease-3 {<!-- -->
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a: link,
a: visited,
a:hover,
a:active {<!-- -->
text-decoration: none;
}
p {<!-- -->
color: #5F6F81;
font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {<!-- -->
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 2px;
color: #333;
font-weight: 700;
}
h1 {<!-- -->
font-size: 40px;
}
h2 {<!-- -->
font-size: 36px;
margin: 0 0 30px;
}
h3 {<!-- -->
font-size: 24px;
letter-spacing: 1px;
margin: 0 0 5px;
}
h4 {<!-- -->
font-size: 20px;
letter-spacing: 1px;
}
h5 {<!-- -->
font-size: 16px;
letter-spacing: 1px;
font-weight: 400;
}
h6 {<!-- -->
font-size: 14px;
letter-spacing: 1px;
font-weight: 400;
}
img {<!-- -->
max-width: 100%;
vertical-align: middle;
}
textarea {<!-- -->
height: 100px;
resize: none;
}
b, strong {<!-- -->
font-weight: 500;
}
/* ----------------------------------------------
* 3. Helper Classes
/* ------------------------------------------------- */
.section {<!-- -->
padding: 80px 0;
position: relative;
background-color: #fff;
}
.section .container {<!-- -->
padding: 0 30px;
}
.text-custom{<!-- -->
color: #30b6e4!important
}
.h-100vh{<!-- -->
height: 100vh;
}
.btn {<!-- -->
padding: 12px 40px;
font-size: 14px;
font-weight: 400;
transition: all 0.5s;
letter-spacing: 2px;
color: #fff;
box-shadow: none;
text-transform: uppercase;
outline: none !important;
background-color: #333;
border-radius: 0px;
min-width: 140px;
}
.btn:hover {<!-- -->
color: #fff;
box-shadow: 0px 10px 40px 0px rgba(0,0,0,0.2);
}
.btn-small {<!-- -->
padding: 7px 10px;
font-size: 12px;
}
.rounded-full {<!-- -->
border-radius: 50%;
}
.page-content-wrap {<!-- -->
margin-left: 50%;
width: 50%;
background: #F8FAFB;
}
.b-box {<!-- -->
background: #fff;
border-radius: 5px;
overflow: hidden;
border: 1px solid #eee;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
/*box-shadow: 0px 4px 8px rgba(134, 151, 168, 0.1);*/
}
.hover-state:hover {<!-- -->
transform: translateY(-5px);
box-shadow: 0px 4px 8px rgba(134, 151, 168, 0.1);
}
.aside-banner {<!-- -->
position: fixed;
top: 0;
left: 0;
right: 0;
width: 50%;
height: 100%;
background: #fbd0a1;
}
.aside-open .aside {<!-- -->
left: 0;
}
.section-head {<!-- -->
position: relative;
margin-bottom: 50px;
}
.section-head h2 {<!-- -->
font-size: 30px;
}
/* ----------------------------------------------
* 5. Header
/* ------------------------------------------------- */
.ham {<!-- -->
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 400ms;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hamRotate.active {<!-- -->
transform: rotate(45deg);
}
.hamRotate180.active {<!-- -->
transform: rotate(180deg);
}
.line {<!-- -->
fill:none;
transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
stroke:#000;
stroke-width: 3.5;
stroke-linecap: round;
}
.ham1 .top {<!-- -->
stroke-dasharray: 40 139;
}
.ham1 .bottom {<!-- -->
stroke-dasharray: 40 180;
}
.ham1.active.top {<!-- -->
stroke-dashoffset: -98px;
}
.ham1.active.bottom {<!-- -->
stroke-dashoffset: -138px;
}
.nav-wrapper .navbar-toggler {<!-- -->
position: fixed;
left: 0;
z-index: 20;
top: 0;
padding: 0;
display: none;
}
.nav-wrapper .navbar {<!-- -->
/* background: #2a2d35; */
transition: all 750ms cubic-bezier(0.8, 0, 0.55, 0.94);
padding-bottom: 40px;
}
.nav-wrapper .navbar.active {<!-- -->
transform: translate3d(0%, 0, 0);
}
.nav-wrapper .navbar-nav {<!-- -->
display: block;
margin-top: 30px;
}
#navbarCollapse{<!-- -->
text-align: center;
padding-bottom: 40px;
}
.navbar {<!-- -->
width: 100%;
margin-top: 40px;
margin-left: 30px;
height: 100%;
}
.navbar-nav .nav-link {<!-- -->
font-size: 12px;
letter-spacing: 2px;
position: relative;
display: inline-block;
color: rgba(255, 255, 255, .7);
text-transform: uppercase;
padding-left: 10px;
opacity: 1;
padding-right: 5px;
display: block;
margin-bottom: 8px;
text-align: left;
border-radius: 6px;
padding: 7px 10px;
vertical-align: middle;
display: flex;
align-items: center;
}
.navbar-nav .nav-link:after {<!-- -->
position: absolute;
content: "";
left: 0;
right: 0;
width: 100%;
height: 0;
background: #fbd0a1;
bottom: 20px;
z-index: -1;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar-nav .nav-link.active {<!-- -->
opacity: 1;
}
.navbar-nav .nav-link i {<!-- -->
margin-right: 15px;
font-size: 16px;
width: 17px;
}
.navbar-nav .nav-link:hover, .navbar-nav .active .nav-link {<!-- -->
color: #fff;
background: rgba(255,255,255,.2);
}
.aside {<!-- -->
float: left;
position: fixed;
top: 0;
left: 0;
height: 100vh;
bottom: 0;
width: 20%;
z-index: 999;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
padding: 0 10px;
max-width: 300px;
}
.page-wrapper {<!-- -->
width: 80%;
float: left;
margin-left: 20%;
overflow: hidden;
margin-top: 40px;
border-radius: 20px 0 0 0px;
/*box-shadow: -10px 0px 50px 0px rgba(0,0,0,0.1);*/
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.page-overlay {<!-- -->
display: none;
}
.page-overlay .overlay-1,
.page-overlay .overlay-2 {<!-- -->
content: "";
position: fixed;
background: #fff;
width: 100%;
height: 100%;
border-radius: 20px;
z-index: 0;
}
.page-overlay .overlay-1 {<!-- -->
top: 80px;
left: 320px;
opacity: 0.3;
}
.page-overlay .overlay-2 {<!-- -->
top: 130px;
left: 290px;
opacity
.home-pagination .swiper-pagination-bullet {<!-- -->
width: 30px;
}
.price-box.featured {<!-- -->
transform: none;
margin: 30px auto;
}
.price-box {<!-- -->
max-width: 400px;
}
.resume-panel {<!-- -->
margin-top: 30px;
}
.list-item img {<!-- -->
height: 200px;
}
.filter {<!-- -->
margin: 40px auto;
}
.about-avatar {<!-- -->
margin-bottom: 30px !important;
}
}
6. How to make learning no longer blind
Many beginners who have just started programming have learned basic grammar, but they don’t know the purpose of grammar, how to deepen the image, and how to improve themselves. Go to Niuke.com’s introductory training for programming beginners. This topic is an introductory programming level, suitable for beginners who have just learned grammar. The topics involve basic programming grammar, basic structure, etc. Each question has a practice mode and an exam mode. You can restore the exam mode for simulation, or you can use the practice mode Practice.
7. More dry goods
1. If my blog is helpful to you, if you like my blog content, Please "Like" "Comment" "Favorite" One click and three links!
2. 【?Follow me | Get more source code | High-quality articles】 Take you to learn various front-end plug-ins, 3D cool effects, and picture display , text effects, and templates for the whole site, HTML templates for college graduates, final homework templates, etc.! “There are a lot of front-end developers here, discuss front-end Node knowledge and learn from each other”!
3.
Questions related to the above content technology? Welcome to exchange and learn together?
