веб-технології, lab6

Лабораторна робота 7
Тема: «Створення сайту»

Завданням данної роботи буде створення сайту власної компанії чи
приватної справи. Картинки, текст та кольорова гамма мають бути
унікальними.
У кожному завданні наведені приблизні макети, але ваша робота може
докорінно відрізнятись від прикладу.
Хід роботи:
Лістинг сайту:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="IMG_20220720_175117_100.ico"
type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/c
ss/all.min.css">
<title>Розпис одягу</title>
<style>
body{
background-image: url("1111.jpg");
background-size: cover;
}
.menu{
list-style-type: none;
height: 60px;
padding:0;
display:flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
transition: 1s;
background-image: url("завантаження (1).jpeg");
font-family: cursive;
font-size: 15px;
}
.menu a{
text-decoration: none;
color: darkmagenta;
transition: 0.5s;
padding: 10px;
border-radius: 5px;
}
.menu a:hover{
color: orange;
background-color: antiquewhite;
}
@keyframes anim1 {
0%{
opacity: 0;
transform: translateX(-300px);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
@keyframes anim2 {
0%{
opacity: 0;
transform: scale(10);
}
100%{
opacity: 1;
transform: scale(1);
}
}
.header h1{
transition: 1s;
animation: anim1 2s 1;
}
.header h2{
animation: anim2 2s 1;
transition: 1s;
}
.descriptionPhoto{
width:300px;
float: right;
padding-left: 70px;
}
p{
font-size: 18px;
text-align: center;
}
.header{
height: 400px;
background-image: url("33.jpg");
display:flex;
flex-direction: column;
justify-content: center;
color: darkmagenta;
animation:anim2 3s 1;
transition: 1s;
}
h3{
font-size: 20px;
margin-left: 20px;
}
.mainInfo{
padding-left: 10%;
padding-right: 10%;
padding-bottom: 10%;
padding-top: 2%;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
}
section.gallery{
position: relative;
padding: 45px 0;
}
h2.title{
font-size: 44px;
font-weight: bold;
text-align: center;
padding-bottom: 45px;
position: relative;
}
/*післязаголовочний роздільник*/
h2.title:after{
content: "";
position: absolute;
width:100px;
height: 3px;
background-color: #111111;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.gallery-list{
position: relative;
display: flex;
/*дозволяє елементам переноситись на наступний рядок,
якщо вони не поміщ. в поточному*/
flex-wrap: wrap;
overflow: hidden;
font-size: 0;
margin-top: 30px;
}
.gallery-item-hover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
color: #ffffff;
display: flex;
justify-content: center;
font-size: 16px;
opacity: 0;
transition: opacity .5s ease;
z-index: 2;
display: flex;
flex-direction: column;
}
.gallery-item:hover .gallery-item-hover{
opacity: 1;
}
.gallery-item:hover img{
transform: scale(1.3) rotate(5deg);
}
.gallery-item {
display: block;
flex: 25%;
overflow: hidden;
position: relative;
aspect-ratio: 1;
}
.gallery-item img {
object-fit: cover;
width: 100%;
height: 100%;
transition: all .5s ease;
}
.photoContacts {
width: 20px;
height: 20px;
}
.item img {
vertical-align: middle;
margin-right: 10px;
}
.container{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
background-color: #24262b;
padding: 70px 0;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover{
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
</style>
</head>
<body>
<ul class = "menu">
<a href = "#header">
<li>
Початок
</li>
</a>
<a href = "#mainInfo">
<li>
Чим займаємось?
</li>
</a>
<a href = "#photos">
<li>
Товари в наявності
</li>
</a>
<a href = "#footer">
<li>
Засоби зв'язку
</li>
</a>
</ul>
<div class = "header" id="header">
<h1>ALEXANDRA CREATERS</h1>
<h2>Втілюю всі ваші ідеї на тканині. Доставка по всьому
світу.</h2>
</div>
<div class = "mainInfo" id = "mainInfo">
<h2 class="title">Чим займаємось?</h2>
<h3>Історія творчості</h3>
<img class = "descriptionPhoto"src
="IMG_20220415_144900_157.jpg">
<p>Мене звати Олександра. Я почала працювати над розписом одягу
у 2021 році. З того часу я маю вже більшу команду та кількість
робіт. Моїм натхененням є талановиті люди. Кожна річ унікальна,
оскільки виконана вперше.І якщо у вас є свої ідеї і хочете втілити
в життя я з радістю їх реалізую.Спочатку це були мінімалістичні
арти на футболках, шоперах, проте згодом це все переросло у більш
масштабну справу. Зараз нараховуються десятки робіт на джинсовках,
худі, світшотах, взутті, сумках, кепках і це лише короткий
перелік. </p>
<h3>Робота зараз</h3>
<p>Після повномасшабного вторгення робота зупинилась. Проте я
зрозуміла, що покладати рук не можна, а навпаки - треба працювати
на перемогу. Тому взяла пензлики до рук і продовжила
малювати.Розпис одягу займає 7-10 днів. Все залежить від
складності малюнку та об'єму роботи. Проте я ціную сюрпризи та
подарунки, тому за необхідністю - роблю удвічі швидше, якщо
замовник вказує на терміновість. </p>
</div>
<section class="gallery" id = "photos">

<h2 class="title">Товари в наявності</h2>
<div class="gallery-list">
<a href="IMG_20230416_193626_840.jpg" class="gallery-item">
<div class="gallery-item-hover">
<p>РОЗМІР - M</p>
<p>ЦІНА - 1500 грн.</p>
</div>
<img src="IMG_20230416_193626_840.jpg" alt="alt">
</a>
<a href="IMG_20230417_101524.jpg" class="gallery-item">
<p >РОЗМІР - S</p>
<p>ЦІНА - 500 грн.</p>
</div>
<img src="IMG_20230417_101524.jpg" alt="alt">
</a>
<p>РОЗМІР - L</p>
<p>ЦІНА - 1200 грн.</p>
</div>
</a>
<p>РОЗМІР - M</p>
<p>ЦІНА - 1550 грн.</p>
</div>
</a>
<a href="IMG20220729125503.jpg" class = "gallery-item">
<p>РОЗМІР -L</p>
<p>ЦІНА - 1300 грн.</p></div>
<img src="IMG20220729125503.jpg" alt="alt">
</a>
<a href="IMG20220815135318.jpg" class="gallery-item">
<p>РОЗМІР -S</p>
<p>ЦІНА - 1600 грн.</p>
</div>
<img src="IMG20220815135318.jpg" alt="alt">
</a>
</div>
</section>
<footer class="footer" id = "footer">

<div class="container">
<div class="row">
<div class="footer-col">
<h4>Alexandra Creaters</h4>
<ul>
<li><a href="#header">Початок</a></li>
<li><a href="#mainInfo">Про нас</a></li>
<li><a href="#photos">Переглянути
товари</a></li>
</ul>
</div>
<h4>Авторське право</h4>
<ul>
<li><a href="#">Copyright © Олексанра
Панібратець</a></li>
</ul>
</div>
<h4>Способи зв'язку</h4>
<ul>
<li><a>
<img class = "photoContacts"src
="medical-25_icon-icons.com_73900.png">
alexandra.creaters@gmail.com
</a>
</li>
<li><a> <img class = "photoContacts"src
="phone-handset_icon-icons.com_48252.png">
+38 096 050 9883</a></li>
<li><a> <img class = "photoContacts"src ="
calendar_clock_schedule_icon-icons.com_51085.png">
Monday - Sunday 9:00 AM to 22:00
PM</a></li>
</ul>
</div>
<h4>Ми в соцмережах</h4>
<div class="social-links">
<a
href="https://www.facebook.com/alexandra.creaters"><i class="fab
fa-facebook-f"></i></a>
<a href="https://t.me/sasha_panibratets"><i
class="fab fa-telegram"></i></a>
<a
href="https://instagram.com/alexandra_creaters?igshid=OTk0YzhjMDVl
ZA=="><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
Результат виконання:
Рис.1.Початок сайту
Рис.2. Продовження
Рис.3. Галерея
Рис.4. Футер сайту

веб-технології, lab6

Uploaded by

Document Information

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

веб-технології, lab6

Uploaded by

Copyright:

Available Formats

Лабораторна робота 7

Тема: «Створення сайту»

<section class="gallery" id = "photos">

<footer class="footer" id = "footer">

You might also like