This is the 14th 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 cool beautiful response scenic tourism web design production, picture smart, very suitable for beginners to learn to use.
Video demo:Responsive Travel Web design. Mp4
Screenshot of webpage implementation:Home page source code
Homepage:
Company Profile:
Its businesses:
Enterprise Projects:
Contact us:
Main source code display:
index.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><a href=""><img src="./files/logo.png" class="logo" alt="Calligraphy and Painting in Hanmo Hall"></a> </div>
<div id="navbar" class="navbar-collapse collapse">
<div class="row dh">
<div class="col-xs-12 col-sm-12 col-md-12">
<ul class="nav navbar-nav navbar-nav-c">
<li class="active" id="nv0"><a href="#sy ">The first page</a> </li>
<li class="dropdown " id="nv1"><a href="#gsjj " title="About us">Company profile</a></li>
<li class="dropdown " id="nv2"><a href="#hzjl2" title="Cooperation and Exchange">Cooperation and communication</a></li>
<li class="dropdown " id="nv3"><a href="#yewu-1 " title="Branded business">Brand business</a></li>
<li class="dropdown " id="nv4"><a href="#qyxm " title="Enterprise Project">Enterprise project</a></li>
<li class="dropdown " id="nv5"><a href="#lxwm " title="Contact us">Contact us</a></li>
</ul>
</div>
</div>
</div>
<! --/.nav-collapse -->
</div>
</nav>
</header>
<script type="text/javascript">
$('.bxslider').bxSlider({
adaptiveHeight: true.infiniteLoop: false.hideControlOnEnd: true.auto: true
});
</script>
<div id="gsjj">
<div class="container aboutus">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 jianjie">
<h2>Company profile</h2>
<p class="pjj"></p>
<p class="ptm">Beijing XXXX Culture Communication Co., LTD</p>
<p class="about_contents">Beijing XXXX Culture Communication Co., LTD was founded in 2014.<br/>Is a professional engaged in art trading, art auction, art collection:<br/>Art training, art planning; Art conferences and exhibitions, senior Art workshops,<br/>Artist image publicity, artist cooperation promotion, art market operation,<br/>Chinese and foreign art and cultural exchange of comprehensive art service company.<br/>
</p>
<p></p>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<img src="./images/1551343051.jpg" alt="Company Profile">
</div>
</div>
</div>
</div>`
Copy the codeCSS style implementation:
img {
width: 100%
}
#container0 {
display: block;
}
#container1 {
display: none;
}
@media only screen and (max-width: 738px) {
#container0 {
display: none;
}
#container1 {
display: block;
}
.swiper-wrapper img {
width: 100%;
}
.swiper-container-horizontal>.swiper-pagination-bullets..swiper-pagination-custom..swiper-pagination-fraction {
position: relative;
bottom: 0;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 300ms;
transform: scale(0.5);
margin-top: 52px;
}
.swiper-slide-active..swiper-slide-duplicate-active {
transform: scale(1.3) ! important;
margin-top: 50px;
}
.xlb {
width: 30px;
}
/* .swiper1{ overflow: initial ! important; } * /
}
Copy the codeJavaScript implementation:
<script>
$(document).ready(function() {$("#nv0").click(function() {$("html, body").animate({
scrollTop: $("#sy").offset().top - 80 + "px"
}, {
duration: 500.easing: "swing"
});
return false;
});
$("#nv1").click(function() {$("html, body").animate({
scrollTop: $("#gsjj").offset().top - 80 + "px"
}, {
duration: 500.easing: "swing"
});
return false;
});
$("#nv2").click(function() {$("html, body").animate({
scrollTop: $("#hzjl2").offset().top - 90 + "px"
}, {
duration: 500.easing: "swing"
});
return false;
});
$("#nv3").click(function() {$("html, body").animate({
scrollTop: $("#yewu-1 ").offset().top - 60 + "px"
}, {
duration: 500.easing: "swing"
});
return false;
});
$("#nv4").click(function() {$("html, body").animate({
scrollTop: $("#qyxm").offset().top - 90 + "px"
}, {
duration: 500.easing: "swing"
});
return false;
});
$("#nv5").click(function() {$("html, body").animate({
scrollTop: $("#lxwm").offset().top - 50 + "px"
}, {
duration: 500.easing: "swing"
});
return false;
});
});
</script>
<script>
// The official website has the smooth rotation style you want
var mySwiper = new Swiper('.swiper1', {
/* loop: true, pagination: { el: '.swiper-pagination', clickable :true, }, autoplay:{ delay:3000, disableOnInteraction:false },*/
slidesPerView: 2.spaceBetween: "10%".centeredSlides: true.loop: true.pagination: {
el: '.swiper-pagination'.clickable: true,},freeMode: true.autoplay: {
delay: 1000.disableOnInteraction: true}});</script>
Copy the codeNote: part of the content comes from the network collection, infringement and deletion
Get the source code:
Everyone likes, favorites, follows, comments, check the author’s homepage: Java Li Yangyong to get contact
Clocked articles updated 102/365 days