diff --git a/components/cover.html b/components/cover.html
new file mode 100644
index 0000000..f590c9c
--- /dev/null
+++ b/components/cover.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cover-team</title>
+  <link rel="stylesheet" href="../style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,800;1,300&family=Roboto:ital,wght@0,300;0,500;0,900;1,300;1,500&display=swap" rel="stylesheet">
+</head>
+<body style="min-height: 100vh;">
+  <!-- component -->
+<section class="cover">
+  <div class="cover-column">
+<div class="cover-image">  </div>
+<div class="cover-contenent">
+  <h1 class="cover-title">Lorem, ipsum dolor sit amet </h1>
+  <br>
+  <h4 class="cover-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo fuga,tempore animi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo fuga,tempore animi!</h4>
+  <br>
+</div>
+<a href="#" class="cover-btn"> <img class="cover-btn-png" src="../styles/assets/3298607-document-download-downloads_107006.png" alt="freccia"> to action</a> 
+
+</div>
+</section>
+</body>
+</html>
+<!--http://localhost:8080/components/cover.html-->
\ No newline at end of file
diff --git a/styles/assets/3298607-document-download-downloads_107006.png b/styles/assets/3298607-document-download-downloads_107006.png
new file mode 100644
index 0000000..4f05708
Binary files /dev/null and b/styles/assets/3298607-document-download-downloads_107006.png differ
diff --git a/styles/assets/Rectangle 2.10.png b/styles/assets/Rectangle 2.10.png
new file mode 100644
index 0000000..cce91a7
Binary files /dev/null and b/styles/assets/Rectangle 2.10.png differ
diff --git a/styles/main.scss b/styles/main.scss
index b1b4228..fb5106f 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -8,4 +8,6 @@
 @import "./layouts/container.scss";
 
 //modules
-@import "./modules/header.scss";
\ No newline at end of file
+@import "./modules/header.scss";
+
+@import "./modules/cover.scss"
\ No newline at end of file
diff --git a/styles/modules/cover.scss b/styles/modules/cover.scss
new file mode 100644
index 0000000..b8c3cef
--- /dev/null
+++ b/styles/modules/cover.scss
@@ -0,0 +1,60 @@
+$primary-color: #ffc74d;
+$secondary-color: #ffb53d;
+$thr-color :#5c0297;
+
+.cover {
+background-color: $thr-color;
+
+  display: flex;
+  padding: 2rem;
+box-sizing: border-box;
+min-height: 70vh;
+
+
+&-image{
+  background-image: url("../assets/Rectangle\ 2.10.png");
+  float: right; width: 50%; 
+}
+
+&-column{
+ width: 100%; 
+ 
+}
+
+&-title{
+color: $primary-color;
+font-family: 'Roboto', sans-serif;
+font-size: 3rem;
+
+}
+
+&-subtitle{
+  color: $secondary-color;
+  font-family: 'Open Sans', sans-serif;
+ font-size: 1.1rem;
+}
+
+&-btn{
+text-decoration: none;
+  color:#ffc74d;
+  font-size: 2rem;
+  padding: 3rem 3rem;
+  margin: 4rem;
+
+  
+
+  &-png {
+    max-width: 2rem;
+    max-height: 2rem
+  
+  }
+
+}
+
+
+&-contenent{
+  float: left; width: 50%;
+
+//margin :2.5rem 0.25rem;
+  }
+}
