This is the 13th 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 job source code, this is a good cool response network technology company model web design production, picture smart, very suitable for beginners to learn to use.
Web page screenshots: home page source code
homepage
About us
Car manufacturers take humanization as the origin of the artisan concept, but also take user experience into account in every detail
In every point of contact between the object and the human pursuit of the ultimate shape, subtle but strict standards.
Automotive companies understand the user experience, using the five senses of the consumer as the five senses of the craftsman. You think what you think, and you look what you don’t.
In the process of strict quality control, the practice of acute five senses.
News:
What is pseudo-static? What does pseudo – static state do? What kind of good? Pseudo static is relative to real static, real static will generate an HTML or HTM suffix file, visitors can access the real existence of the static page, and pseudo static does not generate solid static page file, but only a kind of. HTML static page…
Product Display:
Customer Cases:
Contact us:
Project organization structure:
index.html
<head>
scalable=0, minimal-ui">
<meta name="generator" content="Dede58 5.3.9." " data-variable="" />
<title>HTML5 high-end atmosphere responsive web technology company website template -</title>
<link rel="stylesheet" href="css/3af1bf1fa0061831.css">
</head>
<body>
<nav class="navbar navbar-default met-nav " role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger collapsed" data-target="#example-navbar-default-collapse" data-toggle="collapse">
<span class="sr-only">
Toggle navigation
</span>
<span class="hamburger-bar">
</span>
</button>
</div>
</a>
</div>
<div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-default-collapse">
<ul class="nav navbar-nav navbar-right navlist">
<li>
<a href="index.html" title="Homepage" class="link">homepage</a>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="about.html" aria-expanded="false" role="button" title="About us">About us<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="gaikuang.html" title="Company Profile">Company profile</a>
</li>
<li>
<a href="wenhua.html" title="Corporate Culture">The enterprise culture</a>
</li>
<li>
<a href="fankui.html" title="Online Feedback">Online feedback</a>
</li>
</ul>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="news.html" aria-expanded="false" role="button" title="News and Information">News and information<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="#" title="Optimized promotion">Optimize the promotion</a>
</li>
<li>
<a href="#" title="Company News">The company dynamic</a>
</li>
<li>
<a href="#" title="Site Building Experience">Website building experience</a>
</li>
</ul>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="product.html" aria-expanded="false" role="button" title="Product Demonstration">Product display<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="#" title="Marketing site">Marketing site</a>
</li>
<li>
<a href="#" title="Responsive Web">Responsive web site</a>
</li>
<li>
<a href="#" title="E-commerce Site">E-commerce website</a>
</li>
<li>
<a href="#" title="Foreign trade Website">Foreign trade website</a>
</li>
<li>
<a href="#" title="Enterprise Website">Corporate website</a>
</li>
</ul>
</li>
<li class="margin-left-20">
<a href="case.html" title="Customer Case" class="link ">Customer case</a>
</li>
<li class="margin-left-20">
<a href="contact.html" title="Contact us" class="link ">Contact us</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="met-banner">
<div class="carousel slide" id="met-banner-slide" data-ride="carousel">
<ol class="carousel-indicators carousel-indicators-fall">
<li class="active" data-slide-to="0" data-target="#met-banner-slide">
</li>
<li class="" data-slide-to="1" data-target="#met-banner-slide">
</li>
</ol>
<div class="carousel-inner carousel-height" role="listbox">
<div class="item active">
<picture>
<source srcset="images/1470992331.jpg" media="(min-width: 768px)" />
<img class="cover-image overlay-scale" srcset="images/1470992331.jpg" alt="7 years of focus, website construction" />
</picture>
<div class="carousel-caption p-5">
<h3 class="animation-slide-top animation-delay-300" style="color:#ffffff; background:#1e8bc3;">7 years of focus, website construction</h3>
<p class="animation-slide-bottom animation-delay-500" style="color:#ffffff">Focus on design experience, specializing in solutions</p>
<div class='btn animation-slide-bottom animation-delay-700'>
<a style="border:2px solid #ffffff; color:#ffffff" href="#" title="7 years of focus, website construction" target='_self'>
MORE>>
</a>
</div>
</div>
</div>
<div class="item ">
<picture>
<source srcset="images/1470991881.jpg" media="(min-width: 768px)" />
<img class="cover-image overlay-scale" srcset="images/1470991881.jpg" alt="Thinking first, planning for the future." />
</picture>
<div class="carousel-caption p-1">
<h3 class="animation-slide-top animation-delay-300" style="color:#ffffff; background:#1e8bc3;">First, layout the future</h3>
<p class="animation-slide-bottom animation-delay-500" style="color:#ffffff">Responsive layout, intelligent identification of a variety of terminal devices</p>
<div class='btn animation-slide-bottom animation-delay-700'>
<a style="border:2px solid #ffffff; color:#ffffff" href="#" title="Thinking first, planning for the future." target='_self'>
MORE>>
</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#met-banner-slide" role="button" data-slide="prev">
<span class="icon wb-chevron-left" aria-hidden="true">
</span>
<span class="sr-only">
Previous
</span>
</a>
<a class="right carousel-control" href="#met-banner-slide" role="button" data-slide="next">
<span class="icon wb-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">
Next
</span>
</a>
</div>
</div>
<div class="met-index-service met-index-body">
<div class="container">
<h3 class="invisible" data-plugin="appear" data-animate="slide-top" data-repeat="false">Focus on website construction for seven years</h3>
<p class="desc invisible" data-plugin="appear" data-animate="fade" data-repeat="false">What do we do?</p>
<ul class="blocks blocks-2">
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-laptop" aria-hidden="true">
</i>
<h4>High-end website customization</h4>
<p>Enterprise high-end website custom design<br />Highlight the brand image</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-code" aria-hidden="true">
</i>
<h4>System software development</h4>
<p>"Reject mediocrity and produce excellence."<br/>Capture requirements and analyze design</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-group" aria-hidden="true">
</i>
<h4>Marketing planning and promotion</h4>
<p>"Professional team thinking ahead" to promote your brand and products in all directions</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-refresh" aria-hidden="true">
</i>
<h4>Cloud server operation and maintenance</h4>
<p>"Quick response, intimate service" care for the healthy growth of your enterprise website</p>
</li>
</ul>
</div>
</div>
<div class="met-index-product met-index-body">
<div class="container">
<h3 class="invisible" data-plugin="appear" data-animate="slide-top" data-repeat="false">Successful cases</h3>
<p class="desc invisible" data-plugin="appear" data-animate="fade" data-repeat="false">The best e-commerce platform and related system service provider in China</p>
<ul class="nav nav-tabs invisible" role="tablist" data-plugin="appear" data-animate="fade" data-repeat="false">
<li class="active" role="presentation" data-allnum='8'>
<a href="#productlist" title="All" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="*">all</a>
</li>
<li role="presentation">
<a href="#productlist" title="Marketing site" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_7">Marketing site</a>
</li>
<li role="presentation">
<a href="#productlist" title="Responsive Web" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_8">Responsive web site</a>
</li>
<li role="presentation">
<a href="#productlist" title="E-commerce Site" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_107">E-commerce website</a>
</li>
<li role="presentation">
<a href="#productlist" title="Foreign trade Website" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_9">Foreign trade website</a>
</li>
<li role="presentation">
<a href="#productlist" title="Enterprise Website" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_12">Corporate website</a>
</li>
</ul>
<ul class="blocks no-space blocks-md-4 blocks-sm-3 blocks-xs-2" id="productlist" data-filterable="true">
<li data-type="list_7">
<div class="widget widget-shadow">
<div class="img-holder">
<img data-original="picture/1-1609231g6403r.jpg" alt="Grand Tours" src="picture/1-1609231g6403r.jpg">
<a href="caseshow.html" title="Grand Tours" target='_self'>
<div class="overlay">
<div class="inner">
<ul class="social">The overall effect highlights the fashion sense with the visual tension of the background.</ul>
</div>
</div>
</a>
</div>
<div class="content-holder hvr-sweep-to-bottom">
<h4>Grand Tour</h4>
</div>
</div>
</li>
</html>
Copy the codestyle.css
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
}
dfn {
font-style: italic
}
h1 {
margin:.67em 0;
font-size: 2em
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}
Copy the codeNote: 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 101/365 days