Question

我目前正在尝试重新创建其他网站，作为练习HTML和CSS的一种方式。当前是我要重新创建https://dribbble.com/shots/3671872-Matchpool-Landing-Page

的网站

我在页面底部创建白框并关闭其中的文本并使所有内容居中时遇到麻烦。

Codepen链接：https://codepen.io/muchkler/project/editor/ZPkBYp#0

HTML：

<html>
<head>
    <title> Matchpool</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>


<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
    <a href="/" class="test">Matchpool</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">How It Works</a>
            </li>
            <li class="nav-item">
                <button type="button" class="btn btn-danger">Join Free</button>
            </li>
        </ul>
    </div>
</nav>

    <div class="container">
    <div class="row">
    <div class="col-sm text-center">
        <h1> Join and create <br>communities you love.</h1>
        <button type="button" class="btn btn-primary">Get started</button>
        <div class="box red"></div>
    </div>
    </div>    
    </div>

    <div class="boxed">
        <h2>This is a quick test</h2>
    </div>
</body>
</html>

CSS：

body{
    background: url(images/thumb-1920-754564.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    font-family: 'Raleway', sans-serif !important;
    height: 100vh;
}

button{
    border-radius: 50px !important; 
}

.navbar{
    padding: 20px 500px !important; 
}

.nav-item a{
    color: white !important; 
}

.test{
    color: white !important;
    text-decoration: none; 
}

h1{
    color: white !important; 
}

.row{
    padding-top: 250px
}

.boxed{
    width: 500px; 
    height: 500px;
    background: white;
    margin-left: 700;
    margin-top: 250px;
    border: 1px; 
    border-radius: 10px;

}

感谢您的帮助！

文本框内包含（响应）

0 个答案: