diff --git a/README.md b/README.md new file mode 100644 index 0000000..dd666e3 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# easythingzV2 +This project is a simple website design using HTML CSS and JS diff --git a/assets/articles/img1.png b/assets/articles/img1.png new file mode 100644 index 0000000..b85055c Binary files /dev/null and b/assets/articles/img1.png differ diff --git a/assets/articles/img2.png b/assets/articles/img2.png new file mode 100644 index 0000000..2880195 Binary files /dev/null and b/assets/articles/img2.png differ diff --git a/assets/articles/img3.png b/assets/articles/img3.png new file mode 100644 index 0000000..d3e9d6d Binary files /dev/null and b/assets/articles/img3.png differ diff --git a/assets/backgroundpng.png b/assets/backgroundpng.png new file mode 100644 index 0000000..52a7922 Binary files /dev/null and b/assets/backgroundpng.png differ diff --git a/assets/bgimg1.png b/assets/bgimg1.png new file mode 100644 index 0000000..3ae5727 Binary files /dev/null and b/assets/bgimg1.png differ diff --git a/assets/img1.png b/assets/img1.png new file mode 100644 index 0000000..99e6c0e Binary files /dev/null and b/assets/img1.png differ diff --git a/assets/img2.png b/assets/img2.png new file mode 100644 index 0000000..45bd493 Binary files /dev/null and b/assets/img2.png differ diff --git a/assets/img3.png b/assets/img3.png new file mode 100644 index 0000000..3db6297 Binary files /dev/null and b/assets/img3.png differ diff --git a/assets/work/img1.png b/assets/work/img1.png new file mode 100644 index 0000000..1a11528 Binary files /dev/null and b/assets/work/img1.png differ diff --git a/assets/work/img2.png b/assets/work/img2.png new file mode 100644 index 0000000..39da4ca Binary files /dev/null and b/assets/work/img2.png differ diff --git a/assets/work/img3.png b/assets/work/img3.png new file mode 100644 index 0000000..c766467 Binary files /dev/null and b/assets/work/img3.png differ diff --git a/assets/work/img4.png b/assets/work/img4.png new file mode 100644 index 0000000..0452a31 Binary files /dev/null and b/assets/work/img4.png differ diff --git a/assets/work/img5.png b/assets/work/img5.png new file mode 100644 index 0000000..136f747 Binary files /dev/null and b/assets/work/img5.png differ diff --git a/assets/work/img6.png b/assets/work/img6.png new file mode 100644 index 0000000..5776ddc Binary files /dev/null and b/assets/work/img6.png differ diff --git a/assets/work/img7.png b/assets/work/img7.png new file mode 100644 index 0000000..a7ad406 Binary files /dev/null and b/assets/work/img7.png differ diff --git a/assets/work/img8.png b/assets/work/img8.png new file mode 100644 index 0000000..278b6eb Binary files /dev/null and b/assets/work/img8.png differ diff --git a/assets/work/img9.png b/assets/work/img9.png new file mode 100644 index 0000000..a89f96f Binary files /dev/null and b/assets/work/img9.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..cf165a7 --- /dev/null +++ b/index.html @@ -0,0 +1,569 @@ + + + + + + + Digital Marketing Agency + + + + + + + + + + + +
+ +
+ + + + + + +
+ + + + + + + + + + +
+
+ Join our Agency +
+

We design beautiful digital
products that make a difference

+
+ + + +
+
+
+ +
+
+

Grow your Business

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dolores doloribus aliquam quia veritatis.

+
+
+
+
+ +
+
+

Digital Marketing

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dolores doloribus aliquam quia veritatis.

+
+
+
+
+ +
+
+

Search Engine Optimization

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dolores doloribus aliquam quia veritatis.

+
+
+
+
+
+ + + + + + +
+
+ +
+
+
+
+
+ +
+ digital experience +
+

+ Connect people in
+ digital life +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus doloremque commodi maiores adipisci esse aspernatur!

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis dignissimos ratione explicabo architecto possimus nulla doloremque, natus perspiciatis nostrum libero reprehenderit, recusandae quia quasi aut, quidem cum quas consectetur consequuntur! Ex labore doloremque optio, similique itaque omnis dolor unde nihil at illo! Fugit eaque expedita repellendus ad, consectetur sunt voluptatum! +

+ +
+ More About Us +
+
+ + +
+
+ + + + + + + +
+
+
+ digital experience +
+

+ The hundred of
+ completed works
+ still counting +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus officia non nisi harum distinctio iste doloribus, animi ipsam reiciendis autem labore tenetur quae fugit eius, explicabo minima fuga? Natus quis labore mollitia, cumque corrupti numquam fugiat quo possimus eos ipsa. +

+
+
+ + +
+
+
+
+

21+

+ Total Top Services +
+ +
+

29+

+ Countries +
+ + +
+

21%

+ Positive Feedback +
+ +
+

3798

+ Usual Users +
+ +
+
+
+
+
+ + + + + + +
+
+
+
+ + + + +

Mobile App

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci beatae mollitia error atque deleniti nam suscipit aspernatur tempora accusantium aliquam voluptate reprehenderit corrupti voluptas saepe dignissimos sed cupiditate, iste laborum accusamus. Sint quibusdam quisquam nam id quia dolor in. Similique? +

+
+
+ + +
+
+ + + + +

Strategy

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci beatae mollitia error atque deleniti nam suscipit aspernatur tempora accusantium aliquam voluptate reprehenderit corrupti voluptas saepe dignissimos sed cupiditate, iste laborum accusamus. Sint quibusdam quisquam nam id quia dolor in. Similique? +

+
+
+ + +
+
+ + + + +

Ecommerce

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci beatae mollitia error atque deleniti nam suscipit aspernatur tempora accusantium aliquam voluptate reprehenderit corrupti voluptas saepe dignissimos sed cupiditate, iste laborum accusamus. Sint quibusdam quisquam nam id quia dolor in. Similique? +

+
+
+ +
+
+ + + + +

Branding

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci beatae mollitia error atque deleniti nam suscipit aspernatur tempora accusantium aliquam voluptate reprehenderit corrupti voluptas saepe dignissimos sed cupiditate, iste laborum accusamus. Sint quibusdam quisquam nam id quia dolor in. Similique? +

+
+
+ + +
+
+ + + + +

Experience Design

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci beatae mollitia error atque deleniti nam suscipit aspernatur tempora accusantium aliquam voluptate reprehenderit corrupti voluptas saepe dignissimos sed cupiditate, iste laborum accusamus. Sint quibusdam quisquam nam id quia dolor in. Similique? +

+
+
+ + +
+
+ + + + +

Mobile App

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci beatae mollitia error atque deleniti nam suscipit aspernatur tempora accusantium aliquam voluptate reprehenderit corrupti voluptas saepe dignissimos sed cupiditate, iste laborum accusamus. Sint quibusdam quisquam nam id quia dolor in. Similique? +

+
+
+
+
+ + + + + + +
+
+ + digital experience + + +
+

+ Some recent work
+ we really proud of
+

+
+ +
+
+ +

Photo Retouching

+ Branding +
+ +
+ +

Apple iPhone

+ Branding +
+ +
+ +

Yoga

+ Branding +
+ + +
+ +

Recent News

+ Branding +
+ +
+ +

New Apps

+ Branding +
+ + +
+ +

Share Market

+ Branding +
+ +
+ +

Desktop

+ Branding +
+
+
+
+ + + + + + + +
+ +
+ Our Recent Articles +

Articles daily updated

+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ + + + +
+
+
+

Ready to get started

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi rerum neque temporibus maiores harum, sunt soluta voluptate officiis voluptatibus voluptatem.'' +

+
+
+ + Get Started + +
+
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..ac8fcc1 --- /dev/null +++ b/main.js @@ -0,0 +1,28 @@ +// execute script after page loads + +window.onload = function ready(){ + // toggle button + + let toggle = document.querySelector("#nav .toggle-btn"); + let collapse = document.querySelector("#nav .collapse"); + + toggle.addEventListener('click', function(event){ + collapse.classList.toggle('active'); + }); + + + //masonry js + let grid = document.querySelector('#site-main .recent-work-area .images-flex'); + let masonry = new Masonry(grid, { + itemSelector: ".flex-item", + gutter: 100, + fitWidth: true + }); +} + + +// rellax js code + +let rellax = new Rellax('.rellax', { + center: true +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..77e4a20 --- /dev/null +++ b/style.css @@ -0,0 +1,677 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); + +/* --------------- Variables --------------- */ + +:root{ + /* text colors */ + --text-gray: #808291; + --text-white: #f8f9fa; + --text-light: #f6f6f6; + --text-dark: #1A3260; + --text-dark2: #1A3760D4; + --text-red: #ff4d6d; + + --box-shadow: 0 0 50px 0 rgb(0 0 0 /10%); + + /* background colors */ + --bg-blue: rgb(249, 243, 255); + --bg-red: rgb(254, 247, 252); + --bg-yellow: rgb(255, 255, 246); + --bg-purple: rgb(246, 255, 255); + + /* font family */ + --font-montserrat: "Montserrat", "sans-serif"; + + /* gradient colors */ + + --bg-gradient: linear-gradient(to right, #ff512f, #dd2476); + --bg-gradient-indigo: linear-gradient(to right, #8e2de2, #4a00e0); + --bg-gradient-peach: linear-gradient(to right, #fff7f3, #fff7f3); + + /* images */ + --bg-cover: url('./assets/bgimg1.png'); + --bg-image1: url('./assets/img1.png'); + --bg-image2: url('./assets/img2.png'); + --bg-image3: url('./assets/img3.png'); + +} + + +/* --------------- /Variables ---------------*/ + +/* --------------- Browser reset ---------------*/ + +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body{ + width: 100%; + font-family: var(--font-montserrat); + background:url('./assets/backgroundpng.png') +} + +a{ + text-decoration: none; +} + +ul{ + list-style-type: none; +} +/* --------------- /Browser reset ---------------*/ + + +/* --------------- Global Classes ---------------*/ + +/* ! text */ +.text-dark{ + color: var(--text-dark); +} + +.text-white{ + color: var(--text-white); +} + +.text-light{ + color: var(--text-light); +} + +.text-gray{ + color: var(--text-gray); +} + +.text-red{ + color: var(--text-red); +} + +.text-center{ + text-align: center; +} + +.text-sm{ + font-size: 1em; + line-height: 1.5em; +} + +.text-md{ + font-size: 1.5em; +} + +.text-lg{ + font-size: 2.2em; + line-height: 3rem; +} + +.text-xl{ + font-size: 3em; +} + +.text-2xl{ + font-size: 5em; +} + +.text-uppercase{ + text-transform: uppercase; +} + +/* ! /text */ + +/* ! background */ + +.bg-gradient{ + background: var(--bg-gradient); +} + +.bg-gradient-indigo{ + background: var(--bg-gradient-indigo); +} + +.bg-gradient-peach{ + background: var(--bg-gradient-peach); +} + +.bg-red{ + background: var(--bg-red); +} + +.bg-blue{ + background: var(--bg-blue); +} + +.bg-yellow{ + background: var(--bg-yellow); +} + + +.bg-purple{ + background: var(--bg-purple); +} + +.bg-cover{ + background: var(--bg-cover); + object-fit: fill; + } + +/* ! /background */ + +/* ! font */ +.font-montserrat{ + font-family: var(--font-montserrat); +} +.font-bold{ + font-weight: 800; +} +/* ! /font */ + +/* ! flex properties */ + +.flex{ + display: flex; +} + +.flex-row{ + flex-direction: row; +} + +.flex-column{ + flex-direction: column; +} + +.flex-wrap{ + flex-wrap: wrap; +} + +.flex-initial{ + flex: 0 1 auto; +} + +.flex-grow{ + flex-grow: 1; +} + +.justify-center{ + justify-content: center; +} + +/* ! flex properties */ + +/* ! layout */ + + .container{ + width: 100%; + } + + .container-fluid{ + width: 98%; + } + + .w-100{ + width: 100%; + } + + .w-50{ + width: 50%; + } + + /* ! layout */ + + /* ! Spacing */ + + .mx-auto{ + margin-left: auto; + margin-right: auto; + } + + .py-2{ + padding-top: 1rem; + padding-bottom: 1rem; + } + + .py-5{ + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } + + .py-10{ + padding-top: 4.5rem; + padding-bottom: 4.5rem; + } + + .px-5{ + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .px-10{ + padding-left: 3.5rem; + padding-right: 3.5rem; + } + + /* ! Spacing */ + + /* ! Links and Buttons */ + + .link{ + color: var(--text-dark2); + font-weight: 800; + } + + .link:hover{ + color: var(--text-red); + } + + .btn{ + border: none; + background-color: transparent; + cursor: pointer; + } + + .btn-primary{ + padding: .8rem 2rem; + border-radius: 50px; + font-family: var(--font-montserrat); + font-weight: 800; + } + + .btn-primary:hover{ + background: var(--bg-gradient-indigo); + } + + .btn-shadow{ + box-shadow: var(--box-shadow); + } + +/* ! Links and Buttons */ + +/* ! display */ + +.d-inline{ + display: inline-block; +} + +.d-block{ + display: block; +} + +/* ! display */ + + +/* ! grid */ + +.grid{ + display: grid; +} + +.cols-1{ + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +/* ! grid */ +/* --------------- /Global Classes ---------------*/ + + +/* --------------- Navigation Style ---------------*/ + +#nav{ + position :absolute; + top: 0; left: 0; + width: 100%; + padding: 1rem 1.5rem; + background: var(--text-light); + flex-direction: column; +} + +#nav .collapse{ + max-height: 0px; + overflow-y: hidden; + transition: all 0.9s ease; +} + +#nav .collapse ul{ + flex-direction: column; + text-align: center; + padding: 0 3rem; +} + +#nav .collapse ul > li{ + padding: 0 1.5rem; + line-height: 3rem; + font-size: 1.1em; +} + +#nav .toggle-btn > button{ + font-size: 2em; + position: absolute; + right: 0; top: 0; + padding: 1rem; + color: var(--text-dark2); +} + +#nav .flex-initial ul button{ + display: none; +} + +.active{ + max-height: 50vh !important; +} + +/* --------------- /Navigation Style ---------------*/ + + +/* --------------- Banner area Style ---------------*/ + + +#site-main .banner-area{ + width: 100%; + position: relative; + background: var(--bg-cover); + background-repeat: no-repeat; + background-position-x: right; + z-index: -99; +} + + +#site-main .banner-area .banner-title{ + height: 95vh; + padding-top: 16rem; +} + + +/* --------------- /Banner area Style ---------------*/ + + + +/* --------------- Agency area Style ---------------*/ + +#site-main .agency-area{ + padding: 5em 0; +} + +/* --------------- /Agency area Style ---------------*/ + + +/* --------------- Digital life style ---------------*/ + +#site-main .life-area > .grid{ + column-gap: 10em; +} + +#site-main .life-area .grid-images{ + display: grid; + grid-template-columns: repeat(16, minmax(10px, 1fr)); + grid-template-rows: repeat(8, minmax(100px, 1fr)); +} + +#site-main .life-area .grid-images .item-one{ + grid-column-start: 1; + grid-column-end: 8; + grid-row-start: 2; + grid-row-end: 5; + background: var(--bg-image1) no-repeat; + background-size: cover; + border-radius: 8px; + /* filter: blur(1px); */ +} + +#site-main .life-area .grid-images .item-two{ + grid-column-start: 9; + grid-column-end: 16; + grid-row-start: 1; + grid-row-end: 4; + background: var(--bg-image2) no-repeat; + background-size: cover; + border-radius: 8px; + /* filter: blur(1px); */ +} + + +#site-main .life-area .grid-images .item-three{ + grid-area: 3/4/8/14; + background: var(--bg-image3) no-repeat; + background-size: cover; + border-radius: 8px; + filter: blur(1px); + /* z-index: 99; */ +} + +/* --------------- /Digital life style ---------------*/ + + +/* --------------- Counting area style ---------------*/ + + +#site-main .counting-area{ + padding: 7em 0; +} + +#site-main .counting-area .grid-one p{ + width: 80%; +} + + +#site-main .counting-area .count-box{ + display: flex; + justify-content: center; + margin: 2em 0; +} + +#site-main .counting-area .count-box .grid{ + display: inline-grid; + gap: 4px; + border-radius: 20px; + background-color: var(--text-light); + box-shadow: var(--box-shadow); +} + +#site-main .counting-area .count-box .grid > div{ + background-color: var(--text-white); + padding: 2em 2.5em; + text-align: center; +} + + +/* --------------- /Counting area style ---------------*/ + + +/* --------------- Card area style ---------------*/ + + #site-main .card-area .grid{ + column-gap: 4em; + row-gap: 2em; + } + +/* --------------- /Card area style ---------------*/ + + + +/* --------------- Recent work area style ---------------*/ + +#site-main .recent-work-area .images-flex .flex-item{ + width: 360px; + margin-bottom: 50px; +} + +#site-main .recent-work-area .images-flex .flex-item img{ + border-radius: 10px; +} + +/* --------------- /Recent work area style ---------------*/ + + + +/* --------------- Article card area style ---------------*/ + +#site-main .article-area .grid{ + column-gap: 5em; +} + +#site-main .article-area .card article{ + border-radius: 10px; +} + +/* --------------- /Article card area style ---------------*/ + +/* --------------- Ready area style ---------------*/ + +#site-main .ready-area .flex{ + display: flex; + justify-content: space-around; + align-items: center; + +} + + +/* --------------- /Ready area style ---------------*/ + + + +/* --------------- Footer style ---------------*/ + +#footer{ + border-top: 2px solid var(--text-light); + margin-top: 8em; +} + +#footer .grid{ + column-gap: 3em; + padding: 6em 0; + border-bottom: 2px solid var(--text-light); +} + +#footer .grid input.subscribe-text{ + border:none; + background-color: var(--text-light); + padding: 1em; + font-size: 1em; + color: var(--text-dark2); +} + +#footer .grid input.subscribe-text:focus{ + border: none; + outline: none; +} + +#footer .grid button.btn-go{ + background-color: var(--text-light); + padding: 0 2em; +} + +#footer .grid button.btn-go:hover{ + background-color: var(--text-dark2); + color: var(--text-white); +} + + +/* --------------- /Footer style ---------------*/ + + +/* --------------- Media Query ---------------*/ + +/* ? for large screen sm (640px) */ + +@media(min-width: 640px){ + .container{ + max-width: 640px; + } + + .sm-text-xl{ + font-size: 3em; + } + + .sm-px-10{ + padding-left: 3.5rem; + padding-right: 3.5rem; + } + +} + +/* ? for large screen md (768px) */ + +@media(min-width: 768px){ + .container{ + max-width: 768px; + } + + .md-text-left{ + text-align: left; + } + + .md-mx-initial{ + margin: initial; + } + + .md-cols-2{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + +} + + + +/* ? for large screen lg (1024px) */ + +@media(min-width: 1024px){ + .container{ + max-width: 1024px; + } + + #nav .toggle-btn > button{ + display: none; + } + #nav{ + flex-direction: row !important; + padding-left: 6rem!important; + padding-right: 6rem!important; + } + + #nav .toggle-btn > button { + display: none; + } + + .collapse{ + max-height: initial !important; + } + + .collapse ul{ + flex-direction: row !important; + } + + .active{ + max-height: 100% !important; + } + + .lg-cols-2{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg-cols-3{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg-cols-4{ + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + + +/* ? for large screen xl (1280px) */ + +@media(min-width: 1280px){ + .container{ + max-width: 1280px; + } + + #nav{ + background: transparent !important; + } + + #nav .flex-initial ul button{ + display: inline-block !important; + } + +} + +/* --------------- /Media Query ---------------*/ \ No newline at end of file