Html 如何实现这样的设计风格？

我知道标题很模糊。我不知道如何更好地表述标题，因为我不知道设计风格的名称

这种设计“风格”的名称是什么？如何使用css和html实现效果

我尝试用HTML和css重新创建设计。这是密码

*{
保证金：0；
填充：0；
盒子尺寸：0；
}
/*背景*/
主要的，
.集装箱{
高度：100vh；
宽度：100vw；
}
身体{
溢出：隐藏；
}
#左上角，
#左下角，
#对{
位置：绝对位置；
z指数：-10；
}
#左上角{
左：0；
排名：0；
}
#左下角{
左：0；
底部：0；
转换：转换（-0.5vw）；
}
#对{
右：0；
排名：0；
底部：0；
转化：转化（10vw）；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
最大高度：100vh；
最大宽度：100vw；
边框：1vh固体石灰；
}
.标志{
最大宽度：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.logo img{
宽度：80vw；
身高：继承；
}
.链接{
}

文件

*{
保证金：0；
填充：0；
盒子尺寸：0；
}
/*背景*/
主要的，
.集装箱{
高度：100vh；
宽度：100vw；
}
身体{
溢出：隐藏；
}
#左上角，
#左下角，
#对{
位置：绝对位置；
z指数：-10；
}
#左上角{
左：0；
排名：0；
宽度：20vw；
}
#左下角{
左：0；
底部：0；
高度：50vh；
}
#对{
右：0；
排名：0；
底部：0；
高度：100vh；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
最大高度：100vh；
最大宽度：100vw；
}
.标志{
最大宽度：70vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.logo img{
顶部：45vh；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
宽度：100%；
身高：继承；
z指数：-10；
}
.链接{
利润率：51vh汽车7vw；
宽度：110vw；
显示：网格；
网格模板列：自动；
栅柱间隙：1vw；
栅排间隙：1vw；
}
.链接文本{
宽度：100%；
文本对齐：居中；
}
.链接文本a{
文字装饰：无；
颜色：#777；
字体大小：1.25vw；
字体系列：helvetica；
}

文件

谢谢，代码工作得很好！你能编辑一下你的答案并解释一下为什么我的答案不起作用而你的答案起作用吗？（我接受这个答案）