Форум программистов [Powered by Invision Power Board]

Код


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <title>Raelis</title>
</head>
<body>
    <header>
    <img class="logo" src="img/logo.png" alt="logo">
    <div class="container">
        <ul class="menu">
            <li><a href="#">Ремонт</a></li>
            <li><a href="#">Строительство</a></li>
            <li><a href="#">Цены</a></li>
            <li><a href="#">Информация</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </div>
    </header>
    <section>
        <div class="container">
            <div class="intro">
            <h1>Дизайн-студия Raelis</h1>
            <p>Мы опытная дизайн-студия, за <br>плечами которой ряд крупных <br>реализаций.
            <br> 
            От частных заказчиков до больших <br>проектов международных компаний.<br>
            Воплотим в реальный дизайн<br> любую вашу мечту! Попробуйте!</p>
        <button onclick="location.href='#'" class="bt" type="button">Заказать проект</button>
        </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <div class="info">
                <a href="tel:+79999999999">+7 999 999 99 99</a>
                <h2> г. Москва ул. Театральная 51А</h2>
                <h3>Copyright © 2007-2020. All rights reserved. Политика конфиденциальности.</h3>
            </div>
        </div>
    </footer>
</body>
</html>

Код


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');

html {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background: url(../img/bg.png) top center no-repeat;
    background-size: cover;
    margin:0;
    padding:0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.container {
    width: 1710px;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
}

header {
    display: flex;
    flex-direction: row;
}

.menu {
    padding-top: 20px;
    padding-right: -5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.menu li {
    display: inline-block;
    margin-right: 70px;
}

.menu li a {
    font-weight: 500;
    font-size: 22px;
    color: #645C54;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}

.logo {
    position: absolute;
    top: 20px;
    left: 48px;
}

h1 {
    padding-top: 40px;
    font-weight: 700;
    font-size: 40px;
    color: #645C54;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(100, 92, 84, 0.35);
}

section {
    height: 800px;
}

section p {
    font-size: 24px;
    color: #645C54;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(100, 92, 84, 0.35);
    line-height: 28px;
}

.intro {
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
}

.bt {
    display: block;
    width: 282px;
    height: 61px;
    position: relative;
    left: 50px;
    border-radius: 20px;
    background: #C3C8C2;
    -webkit-box-shadow: 2px 4px 12px 3px rgba(0,0,0,0.58); 
    box-shadow: 2px 4px 12px 3px rgba(0,0,0,0.58);
    font-weight: 700;
    font-size: 20px;
    color: rgba(100, 92, 84, 0.8);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(100, 92, 84, 0.35);
    cursor: pointer;
}

.bt:focus {
    outline: none;
}

.bt:hover {
    background: #A8A8A8;
}

footer {
    height: 63px;
}

.info {
    display: flex;
    align-items: baseline;
    position: absolute;
    bottom: 0;
}

.info a {
    margin-right: 170px;
    list-style-type: none;
    font-size: 20px;
    color: rgba(100, 92, 84, 0.7);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

h2 {
    margin-right: 350px;
    font-size: 20px;
    color: rgba(100, 92, 84, 0.7);
    font-weight: 500;
}

h3 { 
    font-size: 20px;
    color: rgba(100, 92, 84, 0.7);
    font-weight: 500; 
}