Я новичок в HTML / CSS, и я хотел бы создать простой профиль для моего проекта в школе. Как я могу сделать что-то вроде этого изображения: Проблема
Я хочу избавиться от проблем, которые я объясняю на изображении. Я застрял, делая и меняя свой css, так как это всего лишь css проблема. Вот то, что я сделал:
<div class="wrapper">
<div class="box-nav">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="toggle-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="border">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
</div>
<div class="box-particle">
<div id="particles-js">
<h1>Hello, </h1>
</div>
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Вот мой CSS:
*{
box-sizing: border-box;
}
.wrapper{
background-color: #ccc;
width: 500px;
margin: 0
padding: 0;
width: 100%;
}
.box{
float: left;
margin: 0px;
background-color: #f1f1f1;
width: 100%;
}
.navbar {
background-color:#000;
display: inline-block;
width: 100%;
height: 10vh;
}
nav {
height: 10vh;
}
.navbar-nav {
margin:auto;
}
.nav-link {
margin:10px 25px;
color:#fff;
}
.nav-link:hover {
color:yellow;
}
.border {
width:100%;
height:25px;
float: left;
top: -2px;
margin:0;
background-color:transparent;
position:relative;
z-index: 1;
}
.box-1 {
width:50%;
height:100%;
border-radius:0px 40px 0px 0px;
border-top:5px solid yellow;
border-right:5px solid yellow;
}
.box-2 {
position:absolute;
height:100%;
width:50%;
right:0;
top:0;
border-radius:40px 0px 0px 0px;
border-top:5px solid yellow;
border-left:5px solid yellow;
}
.box-nav{
float: left;
margin: 0px;
background-color: #f1f1f1;
width: 100%;
position: fixed;
z-index: 2;
}
.box-particle{
position: absolute;
top:9vh;
margin: 0px;
background-color: #f1f1f1;
width: 100%;
}
#particles-js {
position: relative;
/*background-image: linear-gradient(rgb(0,0,0,0.5), rgba(0,0,0,0.5)),url(background.jpg);*/
/*background-color: rgb(0,0,0,0.5);*/
background-color: blue;
height: 105vh;
background-size: cover;
background-position: center;
margin:0;
float: left;
padding: 0;
width: 100%;
}
#particles-js h1 {
position: relative;
top:47%;
color:yellow;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
margin:0;
padding:0;
}
canvas {
display: block;
vertical-align: bottom;
height: 90vh !important;
width: 100% !important;
background-attachment:fixed;
}