Add files via upload

2023-05-30 09:18:39 +03:00 · 2023-05-30 09:18:39 +03:00 · 6e6d6e8113
commit 6e6d6e8113
parent b864b5463e
4 changed files with 155 additions and 0 deletions
--- a/100_projects/98-sushi-day-components/index.html
+++ b/100_projects/98-sushi-day-components/index.html
@ -0,0 +1,38 @@
+<!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">
+  <link rel="stylesheet" href="style.css">
+  <title>Document</title>
+</head>
+<body>
+  <div class="container">
+    <div class="nav">
+      <h3>すし</h3>
+      <ul>
+        <li>Home</li>
+        <li>Blog</li>
+        <li>Album </li>
+      </ul>
+    </div>
+    <div class="sec">
+      <div class="content">
+        <h3>すし</h3>
+        <p>
+          Sushi is a traditional Japanese dish of prepared <br>
+          vinegared rice, usually with some sugar and salt,
+          accompanied by a variety of ingredients, such as 
+        </p>
+        <span>🇯🇵 Japanese</span>
+      </div>
+      <img src="pexels-photo-248444.webp" alt="Sushi">
+    </div>
+    <div class="explore">
+      <a href="#">EXPLORE</a>
+    </div>
+    <p>powered by <a href="#">x39OME</a></p>
+  </div>
+</body>
+</html>
--- a/100_projects/98-sushi-day-components/pexels-photo-2339009.jpeg
+++ b/100_projects/98-sushi-day-components/pexels-photo-2339009.jpeg
--- a/100_projects/98-sushi-day-components/pexels-photo-248444.webp
+++ b/100_projects/98-sushi-day-components/pexels-photo-248444.webp
--- a/100_projects/98-sushi-day-components/style.css
+++ b/100_projects/98-sushi-day-components/style.css
@ -0,0 +1,117 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+:root{
+  --blakc:#000000;
+}
+body{
+  height:100vh;
+  background-image: url(pexels-photo-2339009.jpeg);
+  object-fit: cover;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #F5F4F0;
+  position: relative;
+  z-index: 999;
+}
+body::before{
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .3);
+}
+.container{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+  position: relative;
+  z-index: 99;
+}
+.container .nav{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  backdrop-filter: blur(1.875rem);
+  background-color: rgba(0, 0, 0, .4);
+  width: 100%;
+  padding: 0 20px;
+  border-radius: 10px;
+}
+.container .nav h3{
+
+}
+.container .nav ul{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}
+.container .nav ul li{
+  padding: 20px 5px;
+  list-style: none;
+  color: rgba(255, 255, 255, .5);
+}
+.container .nav ul li:hover{
+  color: #F5F4F0;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, .6);
+}
+.container .sec{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 30px;
+  backdrop-filter: blur(1.875rem);
+  background-color: rgba(0, 0, 0, .4);
+  max-width: 500px;
+  border-radius: 10px;
+}
+@media(max-width:767px){
+  .container .sec{
+    flex-direction: column;
+    text-align: center;
+    gap: 15px;
+  }
+}
+.container .sec .content{
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+h3{
+  font-size: 24px;
+}
+.container .sec .content span{
+  margin-top: 15px;
+  font-size: 12px;
+}
+.container .sec img{
+  max-width: 150px;
+  height: 150px;
+  border-radius: 10px;
+}
+.container .explore a{
+  text-align: center;
+  color: #F5F4F0;
+  backdrop-filter: blur(1.875rem);
+  background-color: rgba(0, 0, 0, .3);
+  padding: 15px;
+  width: 150px;
+  text-decoration: none;
+  border-radius: 10px;
+}
+.container p a{
+  color: #F5F4F0;
+  font-size: 12px;
+}