Это 8-й день моего участия в ноябрьском испытании обновлений.Подробности о событии:Вызов последнего обновления 2021 г."
Приближается конец семестра, а вы все еще разрабатываете финальное домашнее задание для веб-страниц в формате HTML. Чувствуете себя перегруженными требованиями учителя? Запрошено слишком много страниц? Веб-домашнее задание HTML не может начаться? Нет подходящего шаблона? Дождитесь серии вопросов. Проблема, которую вы хотите решить, общие темы заданий веб-дизайна здесь: личные, еда, компания, спорт, косметика, логистика, защита окружающей среды, книги, свадебное платье, военные, игры, фестивали, отказ от курения, кино, школа фотографии, путешествия , электронная коммерция, домашние животные, электроприборы, чай, мебель для дома, отели, танцы, анимация, звезды, одежда, культура, родной город, цветы, подарки, автомобили и другие темы веб-дизайна, задания уровня A+, которые могут соответствовать Интернету потребности студентов в дизайне. Удовлетворение ваших потребностей. Оригинальный дизайн страницы HTML + CSS + JS, исходный код домашнего задания веб-колледжа веб-дизайна, это хорошее производство веб-страницы для фитнеса, экран проницателен, очень подходит для начинающих, чтобы учиться и использовать.
Демо-видео станции B:Окончательная работа веб-интерфейса - адаптивный веб-дизайн свадебной компании.mp4
Скриншот реализации веб-страницы:
домашняя страница сайта:
Преимущества фитнеса:
Представляем тренера:
связаться с нами:
Организационная структура проекта:
Основной исходный код:
index.html
<section id="our-team">
<div class="container">
<div class="section-header">
<h2 class="section-title wow fadeInDown">
OUR TRAINERS
</h2>
<p class="wow fadeInDown">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa <br> semper aliquam quis mattis quam.</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-delay="100ms">
<div class="team-img">
<img class="img-responsive" src="images/team/02.jpg" alt="">
</div>
<div class="team-info">
<h3>Mike Timobbs</h3>
<span>Sr. Trainer</span>
</div>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-delay="0ms">
<div class="team-img">
<img class="img-responsive" src="images/team/01.jpg" alt="">
</div>
<div class="team-info">
<h3>Micky Deo</h3>
<span>Founder</span>
</div>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-delay="200ms">
<div class="team-img">
<img class="img-responsive" src="images/team/03.jpg" alt="">
</div>
<div class="team-info">
<h3>Remo Silvaus</h3>
<span>Sr. Trainer</span>
</div>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-delay="300ms">
<div class="team-img">
<img class="img-responsive" src="images/team/04.jpg" alt="">
</div>
<div class="team-info">
<h3>Niscal Deon</h3>
<span>Jr. Trainer</span>
</div>
<ul class="social-icons">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--/#our-team-->
<section id="portfolio">
<div class="container">
<div class="section-header">
<h2 class="section-title wow fadeInDown">Gallery</h2>
<p class="wow fadeInDown">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa <br> semper aliquam quis mattis quam.</p>
</div>
<div class="text-center">
<ul class="portfolio-filter" style="display:none">
<li><a class="active" href="#" data-filter="*">All Works</a></li>
<li><a href="#" data-filter=".designing">Designing</a></li>
<li><a href="#" data-filter=".mobile">Mobile App</a></li>
<li><a href="#" data-filter=".development">Development</a></li>
</ul>
<!--/#portfolio-filter-->
</div>
<div class="portfolio-items">
<div class="portfolio-item designing">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/01.jpg" alt="">
<div class="portfolio-info">
<a class="preview" href="images/portfolio/01.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
<!--/.portfolio-item-->
<!--/.portfolio-item-->
<div class="portfolio-item designing">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/03.jpg" alt="">
<div class="portfolio-info">
<a class="preview" href="images/portfolio/03.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
<div class="portfolio-item mobile development">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/02.jpg" alt="">
<div class="portfolio-info">
<a class="preview" href="images/portfolio/02.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
<!--/.portfolio-item-->
<div class="portfolio-item mobile">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/04.jpg" alt="">
<div class="portfolio-info">
<a class="preview" href="images/portfolio/04.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
<!--/.portfolio-item-->
<div class="portfolio-item designing development">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/05.jpg" alt="">
<div class="portfolio-info">
<a class="preview" href="images/portfolio/05.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
<!--/.portfolio-item-->
<div class="portfolio-item mobile">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/06.jpg" alt="">
<div class="portfolio-info">
<a class="preview" href="images/portfolio/06.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
<!--/.portfolio-item-->
<div class="portfolio-item designing development">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/07.jpg" alt="">
<div class="portfolio-info">
<a class="preview" href="images/portfolio/07.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
<!--/.portfolio-item-->
<div class="portfolio-item mobile">
<div class="portfolio-item-inner">
<img class="img-responsive" src="images/portfolio/08.jpg" alt="">
<div class="portfolio-info">
<a class="preview" href="images/portfolio/08.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
</div>
</div>
</div>
<!--/.portfolio-item-->
</div>
</div>
<!--/.container-->
</section>`
body CSS:
body {
padding-top: 100px;
background: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 400;
color: #282828;
line-height: 26px;
padding: 0;
}
Другие стили стилей css
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
font-family: 'Raleway', sans-serif;
}
a {
color: #45aed6;
-webkit-transition: color 400ms, background-color 400ms;
-moz-transition: color 400ms, background-color 400ms;
-o-transition: color 400ms, background-color 400ms;
transition: color 400ms, background-color 400ms;
}
a:hover,
a:focus {
text-decoration: none;
color: #2a95be;
}
.gradiant-horizontal {
background-image: -moz-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
background-image: -webkit-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
background-image: -ms-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
}
hr {
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #fff;
}
.gradiant {
background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
}
.section-header {
margin-bottom: 50px;
}
Некоторые работы происходят из сети, нарушение авторских прав и немедленное удаление
КаждыйНравится, Избранное, Следите, КомментируйтеЛа,
Обновление статьи о пунше93/ 100 дней