ValeryBMSTU · ZeusKronosovich · Sep 6, 2024 · Sep 14, 2024
diff --git a/projects/card/README.md b/projects/card/README.md
@@ -0,0 +1,3 @@
+Ссылка на задание: https://stepik.org/lesson/585818/step/2?unit=580581
+
+После решения задания полученный код файлов .html и .css необходимо перенести в данный репозиторий
diff --git a/projects/card/index.html b/projects/card/index.html
@@ -0,0 +1,32 @@
+<!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">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Exo+2&display=swap" rel="stylesheet">
+</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=format&fit=crop&w=1770&q=80" alt="">
+			</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/card/style.css b/projects/card/style.css
@@ -0,0 +1,78 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    font-family: "Exo 2";
+}
+
+.container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 95vh;
+    padding: 20px;
+    background-color: #15638F;
+
+}
+.card {
+	display: flex;
+	flex-direction: column;
+	background: #FFFFFF;
+	width: 250px;
+	border-radius: 10px;
+    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
+}
+.card__image {
+	width: 100%;
+}
+
+
+img {
+	width: 100%;
+    height: 100%;
+    border-radius: 10px 10px 0px 0px;
+}
+
+.card__content {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	padding: 15px 15px;
+
+}
+
+.card__title {
+	font-style: normal;
+	font-weight: bold;
+	font-size: 16px;
+	line-height: 16px;
+	color: #000000;
+	padding-bottom: 15px;
+}
+
+.card__text {
+	font-style: normal;
+	font-weight: 300;
+	font-size: 14px;
+	line-height: 14px;
+	color: #000000;
+	padding-bottom: 15px;
+}
+
+
+.card__btn {
+	background: #2797B2;
+	border: none;
+	border-radius: 50px;
+	padding: 5px 10px;
+	font-style: normal;
+	font-weight: bold;
+	font-size: 12px;
+	line-height: 14px;
+	color: #FFFFFF;
+	text-transform: uppercase;
+}
+
+
diff --git a/projects/footer/README.md b/projects/footer/README.md
@@ -0,0 +1,3 @@
+Ссылка на задание: https://stepik.org/lesson/503356/step/2?unit=495190
+
+После решения задания полученный код файлов .html и .css необходимо перенести в данный репозиторий
diff --git a/projects/footer/index.html b/projects/footer/index.html
@@ -0,0 +1,43 @@
+<!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">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="wrapper">
+        <main class="main"></main>
+        <footer class="footer">
+            <div class="footer__top">
+
+                <div class="footer__left">
+                    <a class="logo" href="#"> COMPANY</a>
+                        <div class="text">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br> incididunt ut labore et dolore magna aliqua. 
+                        </div>
+                </div>
+
+                <div class="footer__right">
+                    <div class="contact">Как с нами связаться</div>
+                    <a class="phone" href="#">+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
@@ -0,0 +1,95 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+html,body{
+    font-family: 'Exo 2', sans-serif;
+    height: 100%;
+}
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+}
+
+.main {
+	flex: 1 0 auto;
+}
+
+.footer{
+    flex: 0 0 auto;
+    background-color: #05A88D;
+    padding: 40px;
+}
+
+.footer__left{display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 22px;
+}
+
+.logo{font-style: normal;
+    font-weight: 700;
+    font-size: 28px;
+    text-transform: capitalize;
+    color:#F1E67D;
+    text-decoration: none;
+}
+
+.text{
+    font-style: normal;
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 14px;
+    color: #FFFFFF;
+}
+
+.footer__right{display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+    gap: 22px;  
+}
+.contact{
+    font-weight: 700;
+    font-size: 14px;
+    text-transform: uppercase;
+    color: #FFFFFF;
+    padding-top: 1px;
+}
+
+.phone{ 
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    text-transform: uppercase;
+    color: #F1E67D;
+    display: block;
+    text-decoration: none;
+}
+
+.address{
+    font-style: normal;
+    font-weight: 300;
+    font-size: 12px;
+    color: #FFFFFF;
+
+}
+
+.footer__top{ display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #FFFFFF;
+    align-items: center;
+    padding-bottom: 16px;
+}
+
+.footer__bottom{
+    font-style: normal;
+    font-weight: 300;
+    font-size: 15px;
+    color: #FFFFFF;
+    padding-top: 36px;
+
+}
+
diff --git a/projects/header/README.md b/projects/header/README.md
@@ -0,0 +1,3 @@
+Ссылка на задание: https://stepik.org/lesson/503355/step/2?unit=495189
+
+После решения задания полученный код файлов .html и .css необходимо перенести в данный репозиторий
diff --git a/projects/header/index.html b/projects/header/index.html
@@ -0,0 +1,33 @@
+<!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">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header class="header">
+        <nav class="menu">
+            <ul class="menu__ul">
+                <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>
+            <div class="user">
+                <a class="menu__signup" href="#">Sign Up</a>
+                <a class="menu__login" href="#">Login</a>
+            </div>
+        </nav>
+    </header>  
+</body>
+</html>
+
+
+
diff --git a/projects/header/style.css b/projects/header/style.css
@@ -0,0 +1,81 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    background-color: rgb(200, 200, 200);
+    font-family: 'Montserrat', sans-serif;
+}
+.header{
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0px;
+}
+
+.menu {
+    background-color: #FFFFFF;
+    margin: 20px 10px;
+    height: 100px;
+    display: flex;
+    box-shadow:00px 4px 7px 0px #81818140;
+}
+
+.menu__ul {
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+
+.menu__link{
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 300;
+    color:black;
+    margin: 20px;
+}
+
+.menu__logo{
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 24px;
+    color: #05A88D;
+    margin: auto;
+}
+
+.menu__signup{
+    text-decoration: none;
+    font-weight: 300;
+    width: 105px;
+    height: 45px;
+    font-size: 16px;
+    color: #05A88D;
+    margin: auto;
+    margin-right: 70px;
+    border: 1px solid #05A88D;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left:40px;
+}
+
+.menu__login{
+    text-decoration: none;
+    text-decoration: none;
+    font-weight: 300;
+    font-size: 16px;
+    color: #05A88D;
+    margin: auto;
+    margin-right: 70.5px;
+}
+
+.menu__link:hover {
+    color: #05A88D;
+}
+
+.user{
+    margin-right: 50px;
+    display: flex;
+    justify-content: center;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Ссылка на задание: https://stepik.org/lesson/585818/step/2?unit=580581

		После решения задания полученный код файлов .html и .css необходимо перенести в данный репозиторий