Lab 2

МІНІСТЕРСТВО ОСВІТИ І НАУКИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»
Web-технології та Web-дизайн
Лабораторна робота робота №2
Варіант 15
Виконав студент
групи ІР-22
Матвійчук Андрій.
Львів 2020
ГІТ: https://github.com/thefreekley/Web_lab1
2. Advanced landing
Description: Improve a landing page following the given design (same as
previous) by adding full responsiveness and some animation.
Requirements:
 The website should be partly responsive:
Required: for 320px (iPhone 5s) 2560px (4K screens).
Hint: for extra-large screen width, you can just fit website content inside
a previously set container for the regular screen width and centre it
horizontally.
 The header should collapse to a hamburger on small screens
 The website must contain animations (at least 3). Can be made in any
possible way, preferably with css properties (animation/transition).
 Your project should be logically structured (all your CSS can’t be in
just one-two files)
 All of the previous work requirements must be kept.
index.html
Є три блоки: header, main,footer

Header містить в собі навігацію та силки,
Main містить в собі основний контент якій розбитий по блоках
Footer містить в собі заглушку в кінці сторінки.
Wrapper_check клас містить в собі бургер меню для мобільної версії сайта
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" >
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/header_styles.css">

<link rel="stylesheet" type="text/css" href="./css/intro_styles.css">
<link rel="stylesheet" type="text/css" href="./css/innovative_styles.css">
<link rel="stylesheet" type="text/css" href="./css/kind_materials.css">
<link rel="stylesheet" type="text/css" href="./css/materials_styles.css">
<link rel="stylesheet" type="text/css" href="./css/footer.css">
<link rel="stylesheet" type="text/css" href="./css/burger-menu.css">
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<title>Lab1 V1</title>
</head>
<body>
<div class="body__container">
<div class="wrapper">
<section class="wrapper__check">
<input type="checkbox" id="check-menu">
<label for="check-menu">
<img src="./images/svg/Logo horizontal.svg" alt="EcoCabins" class="header__logo_img">
</label>
<div class="burger-line first"></div>

<div class="burger-line second"></div>
<div class="burger-line third"></div>
<div class="burger-line fourth"></div>
<nav class="main-menu">
<a class ="check__link" href="#">Modellen</a>
<a class ="check__link" href="#">Kopen</a>
<a class ="check__link" href="#">Huren</a>
<a class ="check__link" href="#">Nieuws</a>
<a class ="check__link" href="#">Contact</a>
</nav>
</section>
</div>
<header class="header">
<div class="header__wrapper">
<div class="header__logo">
<a href="#" class="header__logo_link">
</a>
</div>
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a href="#!" class="header__link">Modellen</a>
</li>
<a href="#!" class="header__link">Kopen</a>
</li>
<a href="#!" class="header__link">Huren</a>
</li>
<a href="#!" class="header__link">Nieuws</a>
</li>
<a href="#!" class="header__link" id="header__link_border">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<main class="main">
<section class="intro">
<div class="intro__wrapper">
<div class="intro__titles">
<h1 class="intro__title">Sustainable tiny houses</h1>
<p class="intro__subtitle">An ecological tiny house is constructed from as much sustainable
natural materials as possible </p>
</div>
<div class="intro__button">
<a href="!#" class="intro__button_title">Watch the movie</a>
<div class="intro__button_img">
<img src="./images/svg/Shape.svg" alt="Watch the movie" style="padding:12px">
</div>
</div>
<nav class="intro__info_naw">
<ul class="intro__info_list">
<li class="intro___info_items">
<a href="#!" class="intro__info_link">Instagram</a>
</li>
<a href="#!" class="intro__info_link">Facebook</a>
</li>
<a href="#!" class="intro__info_link">Linkedin</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<section class="materials">
<div class="wrapper__materials">
<div class="materials__titles">
<h1 class="materials__title">Durable materials</h1>
<p class="materials__subtitle">All EcoCabins have a high insulation value, are produced with
sustainable and / or natural materials where possible and have the "round corners" as a striking external
characteristic, made possible by the specific use of materials. The advantages of building with wood are
many: wood is light, flexible, insulates well and builds quickly and efficiently.</p>
<input type="button" class="materials__button" value="Read more">
</div>
<div class="materials__slider">
<img src="./images/materials.jpg" class="materials__slider_img"> </img>
</div>
</div>
</div>
</section>
<section class="innovative">
<div class="wrapper__innovative">
<h1 class="innovative__title">Innovative</h1>
<div class="innovative__titles">
<p class="innovative__subtitle">Our goal is to continuously further develop and innovate the
EcoCabins, so that the EcoCabins are ultimately 100% sustainable and circular. A condition for this is that the
EcoCabins remain affordable. With the help of the sun, the wind and the best insulation you can enjoy.</p>
<p class="innovative__subtitle">All EcoCabins have a high insulation value, are produced with
sustainable and / or natural materials where possible and have the 'round corners' as a striking external
characteristic, made possible by the specific use of materials. The advantages of building.</p>
</div>
</div>
</div>
</section>
<section class="kind_material">
<div class="wrapper_kind_material">
<div class="kind_material__img">
<img src="./images/house.jpg">
</div>
<table class="kind_material__table">
<tr>
<td class="kind_material__td">
<h1 class="kind_material__title">Wood</h1>
<p class="kind_material__subtitle">De draagconstructies van EcoCabins bestaan uit hout.
Hout is duurzaam en.</p>
</td>
<h1 class="kind_material__title">Glass wool </h1>
<p class="kind_material__subtitle">De combinatie van glaswol met een houtskelet constructie
geeft een.</p>
</td>
</tr>
<tr>
<h1 class="kind_material__title">Workmanship</h1>
<p class="kind_material__subtitle">De draagconstructies van EcoCabins bestaan uit hout.
Hout is duurzaam en.</p>
</td>
<h1 class="kind_material__title">Triple glass</h1>
<p class="kind_material__subtitle">De combinatie van glaswol met een houtskelet constructie
geeft een.</p>
</td>
</tr>
<tr>
<td class="kind_material__td" >
<h1 class="kind_material__title">Steel base</h1>
<p class="kind_material__subtitle">Het stalen onderstel is sterk zijn en heeft de benodigde
stijfheid die</p>
</td>
<td class="kind_material__td" >
<h1 class="kind_material__title">Infrared floor</h1>
<p class="kind_material__subtitle">De vloer wordt opgewarmd middels opgewekte warmte uit
eigen zonne-energie.</p>
</td>
</tr>
</table>
</div>
</div>
</section>
<footer class="footer">
<div class="wrapper__footer">
<p class="footer__emeil">info@eco-cabins.com</p>
<a href="!#" class="header__logo_link">
</a>
<div class="footer__cookies-pryvacy">
<p>Cookies</p>
<p>Privacybeleid</p>
</div>
</div>
</footer>
</main>
</div>
</body>
</html>
burger.css
Стилі та анімація для бургер меню
.wrapper__check{
width: 100%;
background: #222F33;
position: fixed;
color: white;
text-align: center;
height: 40px;
font-family: Rubik;
font-style: normal;
opacity: 0.9;
z-index: 6;
}
.wrapper__check:hover{
box-shadow: 0px 2px 100px rgba(0, 0, 0, 0.7);
transition: .5s all;
}
#check-menu{
display: none;
}
label{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 2;
line-height: 40px;
}
.burger-line{
position: absolute;
top: 8px;
width: 35px;
height: 2px;
background-color: #fff;
}
.second, .third{
top: 18px;
}
.fourth{
top: 28px;
}
.main-menu{
display: block;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
transform: translateY(100%);
max-height: 0;
font-size: 0;
overflow: hidden;
}
.check__link{
display: block;
width: 100%;
padding: 10px;
color: white;
text-decoration: none;
border-top: 1px solid rgba(255,255,255,.3);
.check__link:hover{
background-color: rgba(0,0,0,.9);
}
#check-menu:checked ~ .main-menu{
max-height: 500px;
font-size: 16px;
}
#check-menu:checked ~ .first{
display: none;
}
#check-menu:checked ~ .second{
transform: rotate(45deg);
}
#check-menu:checked ~ .third{
transform: rotate(-45deg);
}
#check-menu:checked ~ .fourth{
display: none;
}
footer.css
Стилі для заглушки сторінки
.footer{
width: 100%;
display: flex;
justify-content: space-between;
height: 92px;
align-items: center;
}
.footer__cookies-pryvacy{
display: flex;
flex-direction: row;
width: 155px;
}
.footer p{
font-family: Rubik;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
mix-blend-mode: normal;
opacity: 0.6;
}
header_styles.css
Стилі для основного хедера сторінки пк версії
.header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 6;
}
.header__wrapper{
display: flex;
flex-wrap: wrap; /* without transfer*/
align-items: center; /* bottom alignment */
padding-top: 37px;
}
.header__list{
display: flex;
flex-wrap: wrap;
}
.header__item{
margin-right: 40px;
}
.header__item:last-child{
margin-right: 0;
background: #FFFFFF;
border-radius: 4px;
width: 90px;
height: 34px;
text-align: center;
}
#header__link_border{
color: #606B74;
}
.header__link{
font-family: Rubik;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 34px;
vertical-align: bottom;
text-align: center;
color: #FFFFFF;
}
.header__link:hover{
opacity: 0.75;
transition: all 500ms ease;
}
.header__item:hover{
transform: scale(1.4);
}
innovative_styles.css
Cтилі для блоку з контентом із заголовком innovative.
.innovative{
height: 313px;
}
.innovative__titles{
display: flex;
}
.innovative__title{
padding-top: 66px;
padding-bottom:11px;
font-family: Merriweather;
font-style: normal;
font-weight: 900;
font-size: 30px;
line-height: 38px;
color: #FFFFFF;
}
.innovative__subtitle{
width: 380px;
font-family: Rubik;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 24px;
color: #FFFFFF;
opacity: 0.7;
}
into_styles.css
Стилі для самого першого блоку з контентом. В ньому є три частини:

Перша інформаційна (заголовок і підзаголовок) ,силка на фільм яка містить в собі
анімацію і силки на соціальні мережі.
.intro{
height: 686px;
background-color: dark;
background: url(../images/IMG.jpg) no-repeat center;
background-size: cover;
display: flex;
z-index: 3;
}
.intro__wrapper{
width: 808px;
display: flex;
}
.intro__titles{
max-width: 440px;
}
.intro__title{
font-family: Rubik;
font-style: normal;
font-weight: 500;
font-size: font-size: calc(16 * (100vw / 1280));
line-height: 19px;
color: #FFFFFF;
opacity: 0.8;
margin-bottom: 12px;
}
.intro__subtitle{
max-width: 440px;
font-style: normal;
font-weight: 900;
font-size: 30px;
line-height: 38px;
color: #FFFFFF;
}
.intro__button{
padding-bottom: 20px;
padding-top: 20px;
display: flex;
flex-wrap: wrap;
.intro__button_img{
order: -1;
text-align: center;
width: 32px;
height: 32px;
border-radius: 20px;
z-index: 4;
}
.intro__button_title{
font-family: Rubik;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
padding-left:10px;
z-index: 3;
}
.intro__button_title:hover{
opacity: 0.75;
background: white;
color: black;
border-radius: 6px;
padding: 2px;
padding-left: 10px;
}
.intro__button_title:hover + .intro__button_img{
margin-left: 20px;
transform: scale(1.1) rotate(720deg);
background: red;
}
.intro__button_title:hover + .intro__button_img img{
filter: invert(100%);
}
.intro__info_list{
height: 219px;
display: flex;
flex-direction: column;
}
.intro___info_items{
}
.intro___info_items:last-child{
margin-right: 0;
}
.intro__info_link{
font-family: Rubik;
font-style: normal;
font-weight: 500;
font-size: 10px;
line-height: 12px;
color: #FFFFFF;
}
.intro__info_link:hover{
color: black;
opacity: 0.75;
border-radius: 4px;
background: white;
padding: 2px 10px;
}
kind_materials.css
.kind_material__title{
font-style: normal;
font-weight: 900;
font-size: 18px;
line-height: 23px;
color: #222F33;
}
.kind_material__subtitle{
font-family: Rubik;
font-style: normal;
font-size: 12px;
line-height: 22px;
color: #646D70;
mix-blend-mode: normal;
opacity: 0.7;
}
.kind_material__td{
width: 155px;
padding-left: 60px;
}
.kind_material__td:hover{
transform: scale(1.1) translateX(20px);

}
.kind_material__title:hover{
background-color: #222F33;
color: white;
border-radius: 2px;
}
.kind_material__title:hover + .kind_material__subtitle{
border: 1px solid #222F33;
border-top: 0px;
border-radius: 2px;
}
.kind_material__table{
margin-bottom: -37px;
}
materials_styles.css
Стилі для блоку з таблицею в якій містяться різні види матеріалів та картинка.
.materials__title{
font-style: normal;
font-weight: 900;
font-size: 30px;
line-height: 38px;
color: #222F33;
}
.materials__subtitle{
font-family: Rubik;
font-style: normal;
font-size: 14px;
line-height: 26px;
color: #646D70;
}
.materials__button{
width: 90px;
height: 34px;
font-family: Rubik;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
text-align: center;
border: 1px solid #646D70;
border-radius: 4px;
color: #606B74;
}
.materials__button:hover{
color:#FFFFFF;
background: #606B74;
}
.wrapper__materials{
display: flex;
}
styles.css
Підключення шрифтів та підключення адаптивності для екранів в горизонтальним

розширенням до 900 пікселів, від 900 до 1920, і після 1920 пікселів.
/* merriweather-900 - latin */
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
src: url('../fonts/merriweather-v22-latin-900.eot'); /* IE9 Compat Modes */
src: local('Merriweather Black'), local('Merriweather-Black'),
url('../fonts/merriweather-v22-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/merriweather-v22-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/merriweather-v22-latin-900.woff') format('woff'), /* Modern Browsers */
url('../fonts/merriweather-v22-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/merriweather-v22-latin-900.svg#Merriweather') format('svg'); /* Legacy iOS */
}
/* rubik-regular - latin */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
src: url('../fonts/rubik-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/rubik-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/rubik-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/rubik-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/rubik-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/rubik-v11-latin-regular.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* rubik-500 - latin */
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 500;
src: url('../fonts/rubik-v11-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/rubik-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/rubik-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/rubik-v11-latin-500.woff') format('woff'), /* Modern Browsers */
url('../fonts/rubik-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/rubik-v11-latin-500.svg#Rubik') format('svg'); /* Legacy iOS */
}
html{
box-sizing: border-box; /* doing padiing inside block */
}
*,*::before, *:: after{ /*pseudo elementy */
box-sizing: inherit; - /* imitate father element html*/
}
.wrapper{
max-width: 808px;
margin: 0 auto;
}
/**********header************/
.main{
display: flex;
justify-content: flex-end;
align-content: center;
}
@media screen and (max-width: 900px) {

.materials__slider{
overflow:hidden;
}
.materials__slider_img{
margin-right: -30px;
}
body{
overflow-x:hidden;
}
.wrapper__innovative{
padding: 30px;
}
.header{
display: none;
}
.intro__wrapper{
padding: 20px;
width: 100%;
align-items: flex-start;
}
.intro___info_items{
.intro__info_list{
height: 80px;
display: flex;
flex-wrap: wrap;
}
.wrapper{
width: 100%;
}
.intro__info_link:hover{
color: black;
background-color: white;
padding: 1px 10px;
border-radius: 3px;
margin-left: 10px;
}
.wrapper_kind_material{
height: 1032px;
display: flex;
}
.innovative{
height: 600px;
width: 100%;
}
.materials{
height: 850px;
}
.wrapper__materials{
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding-left:30px;
}
.materials__titles{
max-width: 400px;
max-height: 500px;
padding-top: 56px;
}
.materials__slider{
padding-top: 20px;
}
.kind_material__img{
padding-left: 30px;
}
.kind_material__td{
width: 155px;
padding-left: 30px;
}
.wrapper__footer{
display: flex;
}
.header__logo_link{
order: -1;
padding-bottom:10px;
}
}
@media screen and (min-width: 900px) {
.wrapper__check{
display: none;
}
.intro___info_items:hover{

margin-top: 20px;
}
.wrapper_kind_material{
height: 532px;
display: flex;
}
.innovative{
height: 313px;
}
.materials{
max-height: 399px;
}
.materials__titles{
max-width: 400px;
max-height: 275px;
padding-top: 56px;
}
.wrapper__footer{
width: 808px;
display: flex;
}
}
@media screen and (min-width: 1920px){
.body__container{
width: 1920px;
margin: 0 auto;
}

Lab 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 2

Uploaded by

Copyright:

Available Formats

МІНІСТЕРСТВО ОСВІТИ І НАУКИ

НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»

Є три блоки: header, main,footer

<link rel="stylesheet" type="text/css" href="./css/header_styles.css">

<div class="burger-line first"></div>

<img src="./images/svg/Shape.svg" alt="Watch the movie" style="padding:12px">

Стилі та анімація для бургер меню

Стилі для заглушки сторінки

Стилі для основного хедера сторінки пк версії

Стилі для самого першого блоку з контентом. В ньому є три частини:

transform: scale(1.1) translateX(20px);

transition: all 500ms ease;

Підключення шрифтів та підключення адаптивності для екранів в горизонтальним

@media screen and (max-width: 900px) {

transition: all 500ms ease;

You might also like