This is the 16th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021″
Near the end of the semester, are you still writing an HTML web design class assignment and the teacher’s homework requirements are overwhelming? Is the total number of pages required too high? Don’t know how to do your HTML web homework? Don’t have the right template? And so on. The problem you’re trying to solve, There are personal, food, company, sports, cosmetics, logistics, environmental protection, books, wedding, military, games, festivals, smoking cessation, film, photography school, tourism, e-commerce, pets, electrical appliances, tea, home, hotel, dance, animation, stars, Clothing, culture, hometown, flowers, gifts, cars, other web design topics, A+ level homework, can meet college students web design needs can meet your needs. Original HTML+CSS+JS page design, Web college students web design homework source code, this is a good response beauty fitness instructor yoga studio web design production, picture smart, very suitable for beginners to learn to use.
Video demo:Beauty fitness instructor Yoga studio web design. mp4
Webpage implementation screenshot: home pageJava yang-yong liAccess to the source code
Homepage:
About us:
News:
Yoga classes:
Coaching Team:
Club Environment:
Contact us:
Main source code structure:
There are close to 20 static pages
Main source code display:
index.html
<body class=" nav-header">
<header class="">
<div class="head-box">
<div class="container">
<div class="head-left">
<div class="head-left-wrapper">
<div class="head-left-slide">
<p>Welcome to the yoga studio,</p>
<hr>
<a href="#" rel="nofollow">
<i class="fa fa-qq">
</i>
</a>
<hr>
<a href="#" rel="nofollow">
<i class="fa fa-weibo">
</i>
</a>
</font>
</div>
</div>
</div>
<div class="head-right">
<div class="head-other">
<b>Pay more attention to<i class="caret">
</i>
</b>
<span>
<a class="bookmark" data-alert="Failed to add favorites, please use Ctrl+D to add.">
<i class="fa fa-bookmark">
</i>Collect this site</a>
<hr />
<a href="#" title="Leave a message online">
<i class="fa fa-book">
</i>Online message</a>
</span>
</div>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default met-nav " role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger hamburger-close collapsed" data-target="#navbar-default-collapse" data-toggle="collapse">
</a>
<h2 class='hide'>
</h2>
</div>
<div class="collapse navbar-collapse navbar-collapse-toolbar" id="navbar-default-collapse">
<div class="navbar-right search-box">
<div class="search-button">
<i class="wb-search">
</i>
</div>
<div class="search-form">
<form name="formsearch" action="/plus/search.php">
<input type="hidden" name="kwtype" value="0" />
<input type="text" placeholder="Please enter your search terms!" name="q" value="">
<button type="submit" class="wb-search">
</button>
</form>
</div>
</div>
<ul class="nav navbar-nav navbar-right navlist">
<li class="margin-right-20">
<a href="index.html" title="Home page" class="link active">Home page</a>
</li>
<li class="dropdown margin-right-20">
<a data-toggle="dropdown" data-hover="dropdown" aria-expanded="false" class="dropdown-toggle link " href="about.html">About us<span class="caret">
</span>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet">
<li>
<a href="about1.html" class="">Shaping the body</a>
</li>
<li>
<a href="about2.html" class="">Classic pure</a>
</li>
<li>
<a href="about3.html" class="">Physical therapy to repair</a>
</li>
<li>
<a href="about4.html" class="">Emotional release</a>
</li>
<li>
<a href="about5.html" class="">Professional teacher</a>
</li>
</ul>
</li>
<li class="dropdown margin-right-20">
<a data-toggle="dropdown" data-hover="dropdown" aria-expanded="false" class="dropdown-toggle link " href="news.html">News and information<span class="caret">
</span>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet">
<li>
<a href="news1.html" class="">Hall activities</a>
</li>
<li>
<a href="news2.html" class="">Yoga information</a>
</li>
<li>
<a href="news3.html" class="">Q&A</a>
</li>
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="course.html">Yoga classes</a>
<ul style="display:none">
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="team.html">Coach team</a>
<ul style="display:none">
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="huanjing.html">The whole environment</a>
<ul style="display:none">
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="contact.html">Contact us</a>
<ul style="display:none">
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="message.html">Online message</a>
<ul style="display:none">
</ul>
</li>
</ul>
</div>
</div>
Copy the code
CSS style implementation
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0
}
article.aside.details.figcaption.figure.footer.header.hgroup.main.menu.nav.section.summary {
display: block
}
audio.canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent
}
a:active.a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b.strong {
font-weight: 700
}
dfn {
font-style: italic
}
h1 {
margin:.67em 0;
font-size: 2em
}
Copy the code
JavaScript implementation:
m.fn = m.prototype = {
jquery: l,
constructor: m,
selector: "".length: 0.toArray: function() {
return d.call(this)},get: function(a) {
return null! = a ?0 > a ? this[a + this.length] : this[a] : d.call(this)},pushStack: function(a) {
var b = m.merge(this.constructor(), a);
return b.prevObject = this, b.context = this.context, b
},
each: function(a, b) {
return m.each(this, a, b)
},
map: function(a) {
return this.pushStack(m.map(this.function(b, c) {
return a.call(b, c, b)
}))
},
slice: function() {
return this.pushStack(d.apply(this.arguments))},first: function() {
return this.eq(0)},last: function() {
return this.eq(-1)},eq: function(a) {
var b = this.length,
c = +a + (0 > a ? b : 0);
return this.pushStack(c >= 0 && b > c ? [this[c]] : [])
},
end: function() {
return this.prevObject || this.constructor(null)},push: f,
sort: c.sort,
splice: c.splice
}, m.extend = m.fn.extend = function() {
var a, b, c, d, e, f, g = arguments[0] || {},
h = 1,
i = arguments.length,
j = !1;
for ("boolean"= =typeof g && (j = g, g = arguments[h] || {}, h++), "object"= =typeof g || m.isFunction(g) || (g = {}), h === i && (g = this, h--); i > h; h++)
if (null! = (e =arguments[h]))
for (d ine) a = g[d], c = e[d], g ! == c && (j && c && (m.isPlainObject(c) || (b = m.isArray(c))) ? (b ? (b = !1, f = a && m.isArray(a) ? a : []) : f = a && m.isPlainObject(a) ? a : {}, g[d] = m.extend(j, f, c)) : void 0! == c && (g[d] = c));return g
}, m.extend({
expando: "jQuery" + (l + Math.random()).replace(/\D/g.""),
isReady:!0.error: function(a) {
throw new Error(a)
},
noop: function() {},
isFunction: function(a) {
return "function" === m.type(a)
},
isArray: Array.isArray || function(a) {
return "array" === m.type(a)
},
isWindow: function(a) {
return null! = a && a == a.window },isNumeric: function(a) {
return! m.isArray(a) && a -parseFloat(a) + 1> =0
},
isEmptyObject: function(a) {
var b;
for (b in a) return !1;
return !0
},
isPlainObject: function(a) {
var b;
if(! a ||"object"! == m.type(a) || a.nodeType || m.isWindow(a))return !1;
try {
if(a.constructor && ! j.call(a,"constructor") && !j.call(a.constructor.prototype, "isPrototypeOf")) return !1
} catch (c) {
return !1
}
if (k.ownLast)
for (b in a) return j.call(a, b);
for (b in a);
return void 0 === b || j.call(a, b)
},
type: function(a) {
return null == a ? a + "" : "object"= =typeof a || "function"= =typeof a ? h[i.call(a)] || "object" : typeof a
},
globalEval: function(b) {
b && m.trim(b) && (a.execScript || function(b) {
a.eval.call(a, b)
})(b)
}
Copy the code
Note: some works are collected from the network and deleted from infringement
Get the source code:
Everyone likes, favorites, follows, comments, check the author’s homepage: Java Li Yangyong to get contact
Clocked articles updated 104/365 days