diff --git a/style.css b/style.css index 6b8cda6..eca3d10 100644 --- a/style.css +++ b/style.css @@ -1,29 +1,35 @@ /* Default styles */ + * { padding: 0; margin: 0; text-decoration: none; list-style: none; } + html { scroll-behavior: smooth; } + body { color: #222222; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Navbar */ + nav { display: flex; justify-content: space-around; align-items: center; padding: 10px 0; } + nav ul { display: flex; gap: 25px; } + nav li { list-style: none; display: flex; @@ -31,31 +37,39 @@ nav li { gap: 4px; cursor: pointer; } + li i { font-size: 11px; } + .logo img { width: 170px; cursor: pointer; } + nav li a { color: #222222; padding: 0 5px; transition: 0.5s; } + nav li a:hover { color: #7a7a7a; } + #checkbox, /* For burger menu*/ .burger-menu { display: none; } /*Main Section*/ + main { - width: 65vw; + /* width: 65vw; */ + max-width: 1000px; margin: auto; } + section.first { display: flex; flex-direction: column; @@ -63,18 +77,21 @@ section.first { gap: 40px; padding: 70px 0; } + .heading { font-size: 48px; } + section.first > span > img { margin-left: 10px; cursor: pointer; } + section.first span:nth-child(2) { font-size: 24px; text-align: center; - /* width: 60vw; */ } + .btn { border: none; background-color: #00b6d1; @@ -86,61 +103,75 @@ section.first span:nth-child(2) { cursor: pointer; transition: 0.5s; } + .btn:hover { background-color: #12a7be; } + section.second { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px 30px; padding-bottom: 70px; } + section.second .download :nth-child(1) { font-size: 25px; } + section.second .download :nth-child(2) { font-size: 14px; } + section.second .title { display: flex; gap: 20px; grid-column: 1/4; } + section.second .btns { display: flex; justify-content: center; gap: 10px; } + .green { background-color: #5cb85c; } + .green:hover { background-color: #8bdb8b; } + section.second .box { text-align: center; padding: 15px; background-color: #f9f9f9; } + .hidden { visibility: hidden; } + section.second .box p { padding-bottom: 15px; font-size: 19px; } /* Aside */ + aside.first { padding: 0 17.5vw; background-color: #222222; color: azure !important; } + aside.first .top { display: flex; justify-content: center; align-items: center; } + aside.first .item-1 { text-align: center; display: flex; @@ -148,6 +179,7 @@ aside.first .item-1 { gap: 15px; flex: 60%; } + aside.first .item-2 { margin: 80px; background-color: white; @@ -157,14 +189,17 @@ aside.first .item-2 { width: 260px; flex-shrink: 0; } + aside.first .item-2 h2 { color: #00b6d1; font-weight: 400; margin-bottom: 30px; } + aside.first label { color: #222222; } + .input { width: 100%; padding: 15px; @@ -172,27 +207,33 @@ aside.first label { border: 1px solid rgb(193, 191, 191); box-sizing: border-box; } + input:focus { outline: none; } + .btn2 { width: 100%; font-size: 15px; font-weight: 700; } + aside.first .bottom { display: flex; flex-direction: column; gap: 15px 0; padding-bottom: 80px; } + aside.first .bottom h2 { font-weight: 400; } + aside.first .bottom a { text-decoration: none; color: #00b6d1; } + aside.second { width: 65vw; margin: auto; @@ -202,22 +243,27 @@ aside.second { flex-wrap: wrap; gap: 40px; } + aside.second h4 { margin: 20px 0; } + aside.second ul { list-style: none; flex: 1; } + aside.second li { color: #464343; padding: 3px 0; cursor: pointer; transition: 0.5s; } + aside.second li:hover { color: #646363; } + aside.second div { flex: 1; } @@ -227,28 +273,34 @@ aside.second input { } /* Footer */ + footer { width: 65vw; margin: auto; } + footer .logo { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; } + footer i { font-size: 25px; margin: 5px; transition: 0.5s; } + footer i:hover { font-size: 30px; color: #383636; } + .copyright { font-size: small; } + .cookie { position: fixed; bottom: 0; @@ -261,9 +313,11 @@ footer i:hover { border-radius: 15px 15px 0 0; cursor: pointer; } + .cookie:hover { padding-bottom: 12px; } + .fa-arrow-up-long { position: sticky; left: 100%; @@ -273,33 +327,41 @@ footer i:hover { color: azure; padding: 25px; } + .arrow i:hover { background-color: #0096ad; } /* Media queries */ -@media screen and (max-width: 1520px) { + +@media screen and (max-width: 1200px) { section.second { grid-template-columns: 1fr 1fr; } + section.second .title { grid-column: 1/3; } } + @media screen and (max-width: 1010px) { .burger-menu { display: block; } + #checkbox:checked ~ .right { transform: translateY(0) scaleY(1); } + .logo { align-self: flex-start; width: 50%; } + svg { fill: #00b6d1; } + .right { width: 80%; position: fixed; @@ -311,6 +373,7 @@ footer i:hover { border: 1px solid #e9e6e6; transition: 0.5s linear; } + .right::before { content: ''; height: 2px; @@ -320,6 +383,7 @@ footer i:hover { left: 0; top: 0; } + nav ul { display: flex; flex-direction: column; @@ -327,43 +391,55 @@ footer i:hover { width: 80%; padding: 40px 0; } + nav li { justify-content: space-between; border-bottom: 1px solid #e9e6e6; } + nav a { font-weight: 500; } + main { width: 90vw; } + .heading { font-size: 35px; text-align: center; } + section.second { grid-template-columns: 1fr; } + section.second .title { grid-column: 1/2; } + aside.first .top { flex-wrap: wrap; } + aside.first .item-2 { max-width: 260px; min-width: 260px; } + aside.first .item-1 { padding-top: 50px; } + aside.second { flex-wrap: wrap; gap: 40px; } + footer .logo { flex-direction: column; } + footer i { font-size: 12px; margin: 0px;