クリップWeb

2024年1月10日 18:19

今回はクリップWebのコードを書きます。VSコードを使って書きました。普通のWindows標準メモ帳に入力してください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clip-Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<img src="./images/logo.png" alt="" />
<h3>Clip Life</h3>
</header>

<div class="clip-bg">
<h1>Clip Website</h1>
<button>More</button>
</div>
</body>
</html>

続いてCSSこれは違うメモで入力をお願いします

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Zen+Antique&display=swap");

* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}

body {
background: linear-gradient(
90deg,
rgba(96, 89, 227, 1) 20%,
rgba(133, 183, 195, 1) 55%
);
overflow: hidden;
}

.clip-bg {
background-image: url("./images/bg.jpg");
clip-path: polygon(100% 0, 100% 74%, 0 100%, 0 26%);
height: 100vh;
display: grid;
place-items: center;
position: relative;
}

.clip-bg::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.3;
}

.clip-bg h1 {
color: white;
font-size: 9rem;
z-index: 1;
}

.clip-bg button {
position: absolute;
top: 65%;
left: 20%;
padding: 1rem 3.6rem;
background-color: transparent;
border: 1px solid white;
color: white;
font-size: 1.4rem;
z-index: 1;
transition: all 0.5s ease;
cursor: pointer;
}

.clip-bg button:hover {
background-color: white;
color: rgb(57, 120, 202);
}

header {
position: absolute;
display: flex;
align-items: center;
padding: 2rem;
}

header h3 {
font-size: 1.7rem;
margin-left: 1.3rem;
color: white;
}

@media (max-width: 992px) {
html {
font-size: 60%;
}
}

続いて画像

この記事が気に入ったらサポートをしてみませんか？