<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0;
}
header {
width: 100%;
height: 100px;
background-color: #062763;
margin-bottom: 30px;
}
.container666 {
display: flex;
justify-content: space-between;
}
.box {
width: 200px;
height: 200px;
background-color: #2e61b0;
}
.boxes {
display: flex;
justify-content: center;
}
.box-large {
width: 500px;
height: 200px;
background: rgb(46, 98, 175);
color: aliceblue;
font-size: 40px;
margin: 10px;
/*to separate elements from each other*/
}
.box-small {
width: 200px;
height: 200px;
background: rgb(46, 98, 175);
color: aliceblue;
font-size: 40px;
margin: 10px;
/*to separate elements from each other*/
}
.link {
color: #fff;
font-size: 20px;
}
.nav5 {
height: 100px;
background-color: rgb(6, 39, 99);
}
.menu5 {
list-style: none;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.link5 {
color: #fff;
font-size: 20px;
text-decoration: none;
margin: 0 10px;
}
.link5:hover {
color: rgb(114, 173, 240);
}
.nav6 {
padding: 0 50px;
height: 100px;
background-color: rgb(6, 39, 99);
display: flex;
justify-content: space-between;
/*Scattering the logo and menu on different edges*/
align-items: center;
/*Place in the center*/
}
.menu6 {
list-style: none;
height: 100%;
display: flex;
align-items: center;
/*Place the menu in the center*/
}
.logo {
color: rgb(52, 179, 253);
font-size: 40px;
text-decoration: none;
}
.link6 {
color: #fff;
font-size: 20px;
text-decoration: none;
margin-left: 20px;
}
.link6:hover {
color: rgb(114, 173, 240);
}
.block {
margin: 100px auto;
/*Place the block in the center of the page*/
padding: 20px;
background: rgb(253, 219, 187);
width: 800px;
display: flex;
align-items: center;
/*Inside the block, place the elements vertically in the center*/
}
.text {
margin-left: 30px;
/*Move the text away from the picture*/
}
img {
width: 300px;
/*Change the size of the image*/
}
.Taskheader {
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #FFFFFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.Taskmenu {
display: flex;
align-items: center;
}
.menu__ul {
display: flex;
list-style: none;
margin-right: 30px;
}
.menu__li {
margin: 0 15px;
}
.menu__link {
text-decoration: none;
color: #000000;
font-size: 16px;
transition: color 0.3s ease;
}
.menu__link:hover {
color: #05a88d;
}
.menu__logo {
text-decoration: none;
color: #05a88d;
font-size: 24px;
font-weight: bold;
margin-right: 40px;
}
.menu__signup,
.menu__login {
text-decoration: none;
padding: 8px 20px;
border-radius: 4px;
margin-left: 15px;
transition: all 0.3s ease;
}
.menu__signup {
border: 2px solid #05a88d;
color: #05a88d;
background: transparent;
}
.menu__login {
background: transparent;
color: #000000;
}
.menu__signup:hover {
background: #05a88d;
color: #FFFFFF;
}
.menu__login:hover {
color: #05a88d;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
padding: 20px;
background-color: #15638F;
}
.card {
background-color: #FFFFFF;
border-radius: 10px;
overflow: hidden;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card__image {
width: 100%;
height: 200px;
overflow: hidden;
}
.card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card__content {
padding: 20px;
}
.card__title {
color: #000000;
font-size: 24px;
margin-bottom: 10px;
font-weight: 600;
}
.card__text {
color: #000000;
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.card__btn {
background-color: #2797B2;
color: #FFFFFF;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-family: 'Exo 2', sans-serif;
font-size: 16px;
transition: background-color 0.3s ease;
}
.card__btn:hover {
background-color: #1d7a8f;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.main {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
background-color: #05A88D;
color: #FFFFFF;
padding: 40px 20px 20px;
}
.footer__top {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.footer__left {
max-width: 300px;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
margin-bottom: 20px;
display: inline-block;
}
.text {
line-height: 1.5;
margin-bottom: 20px;
}
.footer__right {
text-align: right;
}
.contact {
margin-bottom: 10px;
}
.phone {
color: #F1E67D;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: block;
margin-bottom: 5px;
}
.phone:hover {
text-decoration: underline;
}
.address {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
.footer__bottom {
max-width: 1200px;
margin: 20px auto 0;
/* text-align: center; */
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<header>header</header>
<div class="container666">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="container-t3">
<div class="boxes">
<div class="box-large">1</div>
<div class="box-small">2</div>
</div>
<div class="boxes">
<div class="box-small">3</div>
<div class="box-large">4</div>
</div>
</div>
<div class="nav" style="height: 100px; background-color: #062763;">
<ul class="menu">
<li class="menu-li"><a href="" class="link">Home</a></li>
<li class="menu-li"><a href="" class="link">Blog</a></li>
<li class="menu-li"><a href="" class="link">Story</a></li>
<li class="menu-li"><a href="" class="link">Contact</a></li>
</ul>
</div>
<br>
<nav class="nav5">
<ul class="menu5">
<li class="menu-li5"><a href="#" class="link5">Home</a></li>
<li class="menu-li5"><a href="#" class="link5">Blog</a></li>
<li class="menu-li5"><a href="#" class="link5">Story</a></li>
<li class="menu-li5"><a href="#" class="link5">Contact</a></li>
</ul>
</nav>
<br>
<nav class="nav6">
<a href="#" class="logo">LOGO</a>
<ul class="menu6">
<li class="menu-li6"><a href="#" class="link6">Home</a></li>
<li class="menu-li6"><a href="#" class="link6">Blog</a></li>
<li class="menu-li6"><a href="#" class="link6">Story</a></li>
<li class="menu-li6"><a href="#" class="link6">Contact</a></li>
</ul>
</nav>
<div class="block">
<img src="https://img0.baidu.com/it/u=273762402,3921472370&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800" >
<div class="text">
<div class="title">Title</div>
<div class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, sapiente! At
voluptatem culpa repellat quam voluptatum praesentium assumenda ad, iusto corrupti quibusdam debitis.
</div>
</div>
</div>
<br>
<header class="Taskheader">
<nav class="Taskmenu">
<a href="index.html" class="menu__logo">MYCOMPANY</a>
<ul class="menu__ul">
<li class="menu__li"><a href="#" class="menu__link">Products</a></li>
<li class="menu__li"><a href="#" class="menu__link">About</a></li>
<li class="menu__li"><a href="#" class="menu__link">Blog</a></li>
<li class="menu__li"><a href="#" class="menu__link">Contacts</a></li>
</ul>
</nav>
<div class="menu__buttons">
<a href="#" class="menu__signup">Sign Up</a>
<a href="#" class="menu__login">Login</a>
</div>
</header>
<br>
<div class="container-card">
<div class="card">
<div class="card__image">
<img src="https://th.bing.com/th/id/R.4a2296fbae3eef8ccf014f7411c7ac48?rik=9rEGUpvZrHtitQ&riu=http%3a%2f%2fpic16.nipic.com%2f20110827%2f2127531_105629251000_2.jpg&ehk=BwgrEKqEmLbFhAjvQrvWj4Bd%2fuWbF9Uvu9Lh80hEzF4%3d&risl=&pid=ImgRaw&r=0"
alt="Card Image">
</div>
<div class="card__content">
<h2 class="card__title">Card Title</h2>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<button class="card__btn">Read More</button>
</div>
</div>
</div>
<br>
<div class="wrapper">
<main class="main"></main>
<footer class="footer">
<div class="footer__top">
<div class="footer__left">
<a href="#" 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 href="tel:+74950000000" 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>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容