CSS/HTML5 사이징 문제

현재 작은 웹 사이트에서 작업 중입니다. 나는 위치에 관해서 몇 가지 질문을 가지고, 크기, 내 일부 버튼의 정렬 ...CSS/HTML5 사이징 문제

내가 (✔)는 항상 화면 중앙에 머물 내 상자를하고 싶습니다.
적응 형 단추 체계를 사용하여 창 크기가 충분히 작아지면 서로 쌓을 수 있도록하고 싶습니다. 현재 그들은 모두 번들로 묶어서 페이지가 특정 크기 (그림 참조)에 도달하면 읽을 수 없습니다.
내 두 개의 버튼 하단에 내 가입 텍스트를 원합니다. 그것은 현재 그들 오른쪽에 있습니다. 또한, 창문이 상자가 옆에있는 대신에 서로의 꼭대기에 있어야하는 특정 크기에있을 때, 나는 두 번째 상자 아래에 따라 가야하고 내 서명 텍스트를 원합니다. 아래 코드 (, html & CSS)를 보내 주시면 웹 사이트의 현재 상태에 대한 사진을 보내 드리겠습니다.

미리 감사드립니다.

CSS 코드

body{ 
    margin-top: 300px; 
    text-align: center; 
} 


.ownerButton, .employeeButton { 
    background-color: #333; 
    text-align: center; 
    text-decoration: none; 
} 



.ownerButton, .employeeButton { 
    font-family: "georgia", sans-serif; 
    font-size: 24px; 
    padding: 1em 2em; 
    margin: 3px; 
    border: 0; 
    outline: 0; 
    color: #000000; 
    background-color: #2196F3; 
    text-transform: uppercase; 
    border-radius: 0.15em; 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); 

    font-weight: bold; 

    overflow: hidden; 
    position: relative; 
} 

.footer{ 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 14px; 

    position: fixed; 
    left: 0; 
    bottom: 0; 
    width: 100%; 

    background-color: #2196F3; 
    text-align: center; 
}

HTML 코드

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
     <title>Belper</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body bgcolor=#4286f4> 

     <a href="http://www.google.com" class="ownerButton">Sign in as OWNER</a> 
     <a href="http://www.google.com" class="employeeButton">Sign in as EMPLOYEE</a> 

     <a href="http://google.com" class="signUp">Dont have an account? Sign up here!</a> 

     <div class="footer"> 
     <p>Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved.</p> 
     </div> 

    </body> 
</html>

Image while window is large

Image while window is small

출처

2017-10-05 Larocque