ValeryBMSTU · YR988 · Dec 14, 2024 · Dec 14, 2024 · Dec 14, 2024
diff --git a/projects/card/index.html b/projects/card/index.html
@@ -1,20 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="style.css">
-    <!-- Подключите шрифт -->
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Document</title>
+<link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <div class="container">
-        <!-- Здесь должен быть ваш код -->
-    </div>
+<header class="header">
+<nav class="menu">
+<ul class="menu  url">
+<li class="menu  li">
+<a class="menu  link" href="#">Products</a>
+</li>
+<li class="menu  li">
+<a class="menu  link" href="#">About</a>
+</li>
+<li class="menu  li">
+<a class="menu  link" href="#">Blog</a>
+</li>
+<li class="menu  li">
+<a class="menu  link" href="#">Contacts</a>
+</li>
+</ul>
+<a class="menu  logo" href="index.html">MYCOMPANY</a>
+<button class="menu  signup">Sing Up</button>
+<button class="menu  login">Login</button>
+</nav>
+</header>
 </body>
 </html>
 
-
-
-
diff --git a/projects/card/style.css b/projects/card/style.css
@@ -1,22 +1,49 @@
-*{
-    margin: 0;
-    padding: 0;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100.. 900&display=swap');
+*	{
+margin: 0;
+padding: 0;
 }
-body{
-    font-family: 'Open Sans', sans-serif;
+body {}
+.header { width: 100%;
+box-sizing: border-box; font-family: "Montserrat";
+box-shadow: 0px 4px 7px #81818140;
 }
-
-.container{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100vh;
-    padding: 20px;
-    background-color: #15638F;
-
+.menu {
+display: flex;
+align-items: center; padding-inline: 40px; height: 100px;
 }
+.menu  url {
+list-style-type: none; display: flex;
+}
+.menu li:not(:last-child) { margin-right: 40px;
+}
+.menu link { color: black;
+text-decoration: none; font-weight: 300; font-size: 16px;
+line-height: 19.5px; letter-spacing: -0.015em;
+}
+.menu link:hover { color: #05A88D;
+}
+.menu logo { margin-left: auto; margin-right: auto;
+text-decoration: none; font-weight: 700; font-size: 24px;
+line-height: 29.26px; letter-spacing: -0.015em;
 
-
-
-
+color: #05A88D;
+}
+.menu signup { margin-right: 40px;
+padding: 12.5px 21.5px; background: white;
+border: solid 1px #05A88D; border-radius: 3px;
+font-weight: 300; font-size: 16px; line-height: 19.5px;
+letter-spacing: -0.015em; font-family: "Montserrat"; color: #05A88D;
+cursor: pointer;
+}
+.menu signup:hover { background: #05A88D; color: white;
+}
+.menu  login {
+padding: 12.5px 21.5px; background: white; border-radius: 3px;
+font-weight: 300; font-size: 16px; line-height: 19.5px;
+letter-spacing: -0.015em; font-family: "Montserrat"; color: #05A88D;
+border: solid 1px white; cursor: pointer;
+}
+.menu  login:hover {
+border: solid 1px #05A88D;
+}
diff --git a/projects/footer/index.html b/projects/footer/index.html
@@ -1,26 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="style.css">
-    <!-- Подключите шрифт -->
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Document</title>
+<link rel="stylesheet" href="style.css">
 </head>
 <body>
-     <div class="wrapper">
-        <main class="main"></main>
-        <footer class="footer">
-            <!-- Здесь должен быть ваш код -->
-        </footer>
-    </div>
+<div class="wrapper">
+<main class="main"></main>
+<footer class="footer">
+<div class="footer  top">
+<div class="footer  left">
+<a class="logo">COMPANY</a>
+
+<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. </div>
+</div>
+<div class="footer  right">
+<div class="contact"> Как с нами связаться
+</div>
+<a class="phone">+7 (495) 000-00-00</a>
+<div class="address">
+Москва, ул. Московская, д. 2, стр. 1
+</div>
+</div>
+</div>
+<div class="footer  bottom">
+© 2021 COMPANY All Rights Reserved.
+</div>
+</footer>
+</div>
 </body>
 </html>
-
-
-
-
-
-
-
diff --git a/projects/footer/style.css b/projects/footer/style.css
@@ -1,21 +1,51 @@
-*{
-    margin: 0;
-    padding: 0;
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900 &display=swap');
+*	{
+margin: 0;
+padding: 0;
 }
-html,body{
-    font-family: 'Exo 2', sans-serif;
-    height: 100%;
+html, body {
+font-family: 'Exo 2', sans-serif; height: 100%;
 }
-.wrapper {
-	display: flex;
-	flex-direction: column;
-	min-height: 100%;
+.wrapper { display: flex;
+flex-direction: column; min-height: 100%;
 }
-.main {
-	flex: 1 0 auto;
+.main { flex: 1 0 auto; }
+.footer {
+flex: 0 0 auto; padding: 40px;
+background-color: #05A88D;
 }
-.footer{
-    flex: 0 0 auto;
+.footer  top {
+border-bottom: 2px solid white;
+display: flex;
+justify-content: space-between;
+}
+.footer  left {
+max-width: 437px; margin-bottom: 40px;
+}
+.logo {
+font-size: 28px; line-height: 33.6px; color: #F1E67D; font-weight: 700;
+}
+.text {
+margin-top: 40px; font-size: 12px; line-height: 14.4px;
+letter-spacing: -0.015em; color: white;
+font-weight: 300;
+}
+.contact {
+margin-top: 18px; font-weight: 700; font-size: 14px; line-height: 16.8px;
+letter-spacing: -0.015em; color: white;
+margin-bottom: 16px;
+}
+.phone {
+font-weight: 700; font-size: 24px; line-height: 28.8px;
+letter-spacing: -0.015em; color: #F1E67D;
+}
+.address {
+margin-top: 16px; font-weight: 300; font-size: 12px; line-height: 14.4px;
+letter-spacing: -0.015em; color: white;
 }
 
-
+.footer  bottom {
+font-weight: 300; font-size: 12px; line-height: 14.4px;
+letter-spacing: -1.5%; color: #ffffff;
+margin-top: 40px;
+}
diff --git a/projects/header/index.html b/projects/header/index.html
@@ -1,21 +1,34 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="style.css">
-    <!-- Подключите шрифт -->
-</head>
-<body>
-    <header class="header">
-        <nav class="menu">
-            <!-- Здесь должен быть ваш код -->
-        </nav>
-    </header>  
-</body>
-</html>
-
-
-
+<!DOCTYPE html> 
+<html lang="en"> 
+<head> 
+<meta charset="UTF-8"> 
+<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
+<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+<title>Document</title> 
+<link rel="stylesheet" href="style.css"> 
+<!-- Подключите шрифт --> 
+</head> 
+<body> 
+<div class="container"> 
+<div class="card"> 
+<div class="card__image"> 
+<img 
+src="https://images.unsplash.com/photo-1501785888041
+af3ef285b470?ixlib=rb
+4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=for mat&fit=crop&w=1770&q=80" /> 
+</div> 
+<div class="card__content"> 
+<div class="card__title"> 
+Pragser Wildsee, Italy 
+</div> 
+<div class="card__text"> 
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
+tempor incididunt ut labore 
+et dolore magna aliqua. Ut enim ad minim veniam. 
+</div> 
+<button class="card__btn">BOOKING</button> 
+</div> 
+</div> 
+</div> 
+</body> 
+</html> 
diff --git a/projects/header/style.css b/projects/header/style.css
@@ -1,13 +1,56 @@
-*{
-    margin: 0;
-    padding: 0;
-}
-
-body{
-
-}
-
-.header{
-    width: 100%;
-    box-sizing: border-box;
-}
+@import 
+url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900 &display=swap'); 
+* { 
+margin: 0; 
+padding: 0; 
+} 
+body { 
+font-family: 'Exo 2', sans-serif; 
+} 
+.container { 
+display: flex; 
+justify-content: center; 
+align-items: center; 
+width: 100%; 
+height: 100vh; 
+background-color: #15638F; 
+} 
+.card { 
+width: 200px; 
+background-color: white; 
+border-radius: 10px; 
+box-shadow: 0px 0xp 7px rgba(0, 0, 0, 30%); 
+} 
+.card__image img { 
+width: 100%; 
+height: 100%; 
+border-radius: 10px 10px 0px 0px; 
+} 
+.card__content { 
+padding: 17.5px; 
+} 
+.card__title { 
+font-size: 12px; 
+font-weight: 700; 
+line-height: 16.34px; 
+margin-bottom: 17.5px; 
+} 
+.card__text { 
+font-weight: 300; 
+font-size: 10px; 
+margin-bottom: 17.5px; 
+} 
+.card__btn { 
+width: 98px; 
+height: 27px; 
+border-radius: 50px; 
+border: none; 
+background-color: #2797B2; 
+font-size: 10px; 
+font-weight: 700; 
+line-height: 13.62px; 
+color: white; 
+} 
+.card__btn:hover { 
+background-color: #2489a3; 
+}