diff --git a/100_projects/79-starbucks-landing/images/close.png b/100_projects/79-starbucks-landing/images/close.png new file mode 100644 index 0000000..78c8d8a Binary files /dev/null and b/100_projects/79-starbucks-landing/images/close.png differ diff --git a/100_projects/79-starbucks-landing/images/facebook.png b/100_projects/79-starbucks-landing/images/facebook.png new file mode 100644 index 0000000..7f4e680 Binary files /dev/null and b/100_projects/79-starbucks-landing/images/facebook.png differ diff --git a/100_projects/79-starbucks-landing/images/img1.png b/100_projects/79-starbucks-landing/images/img1.png new file mode 100644 index 0000000..b88b8cb Binary files /dev/null and b/100_projects/79-starbucks-landing/images/img1.png differ diff --git a/100_projects/79-starbucks-landing/images/img2.png b/100_projects/79-starbucks-landing/images/img2.png new file mode 100644 index 0000000..22b3f07 Binary files /dev/null and b/100_projects/79-starbucks-landing/images/img2.png differ diff --git a/100_projects/79-starbucks-landing/images/img3.png b/100_projects/79-starbucks-landing/images/img3.png new file mode 100644 index 0000000..55f8ce6 Binary files /dev/null and b/100_projects/79-starbucks-landing/images/img3.png differ diff --git a/100_projects/79-starbucks-landing/images/instagram.png b/100_projects/79-starbucks-landing/images/instagram.png new file mode 100644 index 0000000..4efeb5d Binary files /dev/null and b/100_projects/79-starbucks-landing/images/instagram.png differ diff --git a/100_projects/79-starbucks-landing/images/logo.png b/100_projects/79-starbucks-landing/images/logo.png new file mode 100644 index 0000000..57de90d Binary files /dev/null and b/100_projects/79-starbucks-landing/images/logo.png differ diff --git a/100_projects/79-starbucks-landing/images/menu.png b/100_projects/79-starbucks-landing/images/menu.png new file mode 100644 index 0000000..5a20ec1 Binary files /dev/null and b/100_projects/79-starbucks-landing/images/menu.png differ diff --git a/100_projects/79-starbucks-landing/images/thumb1.png b/100_projects/79-starbucks-landing/images/thumb1.png new file mode 100644 index 0000000..bd8cae8 Binary files /dev/null and b/100_projects/79-starbucks-landing/images/thumb1.png differ diff --git a/100_projects/79-starbucks-landing/images/thumb2.png b/100_projects/79-starbucks-landing/images/thumb2.png new file mode 100644 index 0000000..d40117b Binary files /dev/null and b/100_projects/79-starbucks-landing/images/thumb2.png differ diff --git a/100_projects/79-starbucks-landing/images/thumb3.png b/100_projects/79-starbucks-landing/images/thumb3.png new file mode 100644 index 0000000..ae39533 Binary files /dev/null and b/100_projects/79-starbucks-landing/images/thumb3.png differ diff --git a/100_projects/79-starbucks-landing/images/twitter.png b/100_projects/79-starbucks-landing/images/twitter.png new file mode 100644 index 0000000..009fbb9 Binary files /dev/null and b/100_projects/79-starbucks-landing/images/twitter.png differ diff --git a/100_projects/79-starbucks-landing/index.html b/100_projects/79-starbucks-landing/index.html new file mode 100644 index 0000000..44df434 --- /dev/null +++ b/100_projects/79-starbucks-landing/index.html @@ -0,0 +1,49 @@ + + + + + + + document + + + +
+
+
+ +
+ +
+
+
+

It's not just coffee
It's Starbucks

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's + standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled

+ Learn More +
+
+ +
+
+ + +
+ + + \ No newline at end of file diff --git a/100_projects/79-starbucks-landing/main.js b/100_projects/79-starbucks-landing/main.js new file mode 100644 index 0000000..1792e18 --- /dev/null +++ b/100_projects/79-starbucks-landing/main.js @@ -0,0 +1,14 @@ +function imgSlider(anything){ + document.querySelector('.starbucks').src = anything; +} +function changeCircleColor(color){ + const circle = document.querySelector('.circle'); + circle.style.background = color; +} + +function toggleMenu(){ + const menuToggle = document.querySelector('.toggle'); + const navigation = document.querySelector('.navigation'); + menuToggle.classList.toggle('active'); + navigation.classList.toggle('active'); +} \ No newline at end of file diff --git a/100_projects/79-starbucks-landing/style.css b/100_projects/79-starbucks-landing/style.css new file mode 100644 index 0000000..b2c70ca --- /dev/null +++ b/100_projects/79-starbucks-landing/style.css @@ -0,0 +1,224 @@ +*{ + margin:0; + padding:0; + box-sizing:border-box; +} +section{ + position: relative; + width: 100%; + min-height:100vh; + padding: 100px; + display: flex; + justify-content:space-between; + align-items: center; + background-color: #fff; +} +header{ + position:absolute; + top: 0; + left: 0; + width: 100%; + padding: 20px 100px; + display: flex; + justify-content:space-between; + align-items:center; +} +header .logo{ + position: relative; + max-width: 80px; +} + +header ul{ + position: relative; + display: flex; +} +header ul li{ + list-style: none; +} +header ul li a { + display: inline-block; + color: #333; + font-weight: 400; + margin-left: 40px; + text-decoration: none; + font-size: 1.2em; +} +.content{ + position: relative; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} +.content .textBox{ + position: relative; + max-width: 600px; +} +.content .textBox h2{ + color: #333; + font-size: 4em; + line-height: 1.4em; + font-weight: 500; +} +.content .textBox h2 span{ + color: #017143; + font-size: 1.2em; + font-weight: 900; +} +.content .textBox p{ + color: #333; +} +.content .textBox a{ + display: inline-block; + margin-top:20px; + padding:8px 20px; + background: #017143; + color: #fff; + border-radius: 40px; + font-weight: 500; + letter-spacing: 1px; + text-decoration: none; +} +.content .imgBox{ + width: 600px; + display: flex; + justify-content: flex-end; + padding-right: 50px; + margin-top: 50px; +} +.content .imgBox img{ + max-width: 340px; +} +.thumb{ + position: absolute; + left: 50%; + bottom: 20px; + transform: translateX(-50%); + display: flex; +} +.thumb li{ + list-style: none; + display: inline-block; + margin: 0 20px; + cursor: pointer; + transition: 0.5s; +} +.thumb li:hover{ + transform: translateY(-15px); +} +.thumb li img{ + max-width: 60px; +} +.sci{ + position: absolute; + top:50%; + right: 30px; + transform: translateY(-50%); + display: flex; + align-items: center; + flex-direction: column; +} +.sci li{ + list-style: none; +} +.sci li a { + display: inline-block; + margin: 5px 0; + transform: scale(0.6); + filter:invert(1); +} +.circle{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #017143; + clip-path: circle(600px at right 800px); +} +@media(max-width:991px){ + header{ + padding: 20px; + } + header .logo{ + max-width: 60px; + } + header ul{ + display: none; + } + .toggle{ + position: relative; + width: 30px; + height: 30px; + cursor: pointer; + background: url(images/menu.png); + background-size: 30px; + background-position: center; + background-repeat: no-repeat; + filter: invert(1); + transition: .3s; + z-index: 11; + } + .toggle.active{ + position: fixed; + right: 20px; + background: url(images/close.png); + background-size: 20px; + background-position: center; + background-repeat: no-repeat; + } + header ul.navigation.active{ + position: fixed; + top: 0; + left:0; + width: 100%; + height: 100%; + background: #fff; + display: flex; + justify-content: center; + align-items: center; + z-index: 10; + gap: 50px; + } + header ul li{ + display: flex; + flex-direction: column; + } + header ul li a{ + margin: 10px 0; + text-decoration: none; + } + section{ + padding: 20px 20px 120px + } + .content{ + flex-direction: column; + margin-top: 100px; + } + .content .textBox{ + max-width: 100%; + } + .content .textBox h2{ + font-size: 2.5em; + margin-bottom:15px; + } + .content .imgBox{ + max-width: 100%; + justify-content: center; + } + .content .imgBox img{ + max-width: 250px; + } + .thumb li img{ + max-width: 40px; + } + .circle{ + clip-path: circle(400px at bottom center); + } + .sci{ + background: #017143; + right: 0; + width: 50px; + border-radius: 10px; + } +} \ No newline at end of file