diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7ef6183
--- /dev/null
+++ b/index.html
@@ -0,0 +1,72 @@
+
+
+
+ Webleb
+
+
+
+
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..ac961ab
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,182 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
+body{
+ font-family: 'Poppins', sans-serif;
+ font-weight: 300;
+ line-height: 1.7;
+ color: #ffeba7;
+ background-color: #1f2029;
+}
+a:hover {
+ text-decoration: none;
+}
+.link {
+ color: #ffeba7;
+}
+.link:hover {
+ color: #c4c3ca;
+}
+p {
+ font-weight: 500;
+ font-size: 14px;
+}
+h4 {
+ font-weight: 600;
+}
+h6 span{
+ padding: 0 20px;
+ font-weight: 700;
+}
+.section{
+ position: relative;
+ width: 100%;
+ display: block;
+}
+.full-height{
+ min-height: 100vh;
+}
+[type="checkbox"]:checked,
+[type="checkbox"]:not(:checked){
+display: none;
+}
+.checkbox:checked + label,
+.checkbox:not(:checked) + label{
+ position: relative;
+ display: block;
+ text-align: center;
+ width: 60px;
+ height: 16px;
+ border-radius: 8px;
+ padding: 0;
+ margin: 10px auto;
+ cursor: pointer;
+ background-color: #ffeba7;
+}
+.checkbox:checked + label:before,
+.checkbox:not(:checked) + label:before{
+ position: absolute;
+ display: block;
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ color: #ffeba7;
+ background-color: #020305;
+ font-family: 'unicons';
+ content: '\eb4f';
+ z-index: 20;
+ top: -10px;
+ left: -10px;
+ line-height: 36px;
+ text-align: center;
+ font-size: 24px;
+ transition: all 0.5s ease;
+}
+.checkbox:checked + label:before {
+ transform: translateX(44px) rotate(-270deg);
+}
+.card-3d-wrap {
+ position: relative;
+ width: 440px;
+ max-width: 100%;
+ height: 400px;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ perspective: 800px;
+ margin-top: 60px;
+}
+.card-3d-wrapper {
+ width: 100%;
+ height: 100%;
+ position:absolute;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ transition: all 600ms ease-out;
+}
+.card-front, .card-back {
+ width: 100%;
+ height: 100%;
+ background-color: #2b2e38;
+ background-image: url('/img/pattern_japanese-pattern-2_1_2_0-0_0_1__ffffff00_000000.png');
+ position: absolute;
+ border-radius: 6px;
+ -webkit-transform-style: preserve-3d;
+}
+.card-back {
+ transform: rotateY(180deg);
+}
+.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
+ transform: rotateY(180deg);
+}
+.center-wrap{
+ position: absolute;
+ width: 100%;
+ padding: 0 35px;
+ top: 50%;
+ left: 0;
+ transform: translate3d(0, -50%, 35px) perspective(100px);
+ z-index: 20;
+ display: block;
+}
+.form-group{
+ position: relative;
+ display: block;
+ margin: 0;
+ padding: 0;
+}
+.form-style {
+ padding: 13px 20px;
+ padding-left: 55px;
+ height: 48px;
+ width: 100%;
+ font-weight: 500;
+ border-radius: 4px;
+ font-size: 14px;
+ line-height: 22px;
+ letter-spacing: 0.5px;
+ outline: none;
+ color: #c4c3ca;
+ background-color: #1f2029;
+ border: none;
+ -webkit-transition: all 200ms linear;
+ transition: all 200ms linear;
+ box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
+}
+.form-style:focus,
+.form-style:active {
+ border: none;
+ outline: none;
+ box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
+}
+.input-icon {
+ position: absolute;
+ top: 0;
+ left: 18px;
+ height: 48px;
+ font-size: 24px;
+ line-height: 48px;
+ text-align: left;
+ -webkit-transition: all 200ms linear;
+ transition: all 200ms linear;
+}
+.btn{
+ border-radius: 4px;
+ height: 44px;
+ font-size: 13px;
+ font-weight: 600;
+ text-transform: uppercase;
+ -webkit-transition : all 200ms linear;
+ transition: all 200ms linear;
+ padding: 0 30px;
+ letter-spacing: 1px;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ align-items: center;
+ background-color: #ffeba7;
+ color: #000000;
+}
+.btn:hover{
+ background-color: #000000;
+ color: #ffeba7;
+ box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
+}
+