クリップWeb

月乃らぅ

今回はクリップ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%;
 }
}

続いて画像

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