Membuat web seperti starbucks
Membuat web seperti starbucks
File yang sudah jadi : Click here
Youtube turorial : Click here
Url Modified File starbucks : https://phpsance.blogspot.com/p/membuat-web-seperti-starbucks.html
Url Gradien warna : https://dewankomputer.com/2019/03/22/cara-membuat-warna-gradien-dengan-css-dan-html/
Color w3school : https://www.w3schools.com/colors/colors_mixer.asp
===========
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
section{
position: relative;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #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;
}
.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: 600;
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;
justify-content: center;
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);
}
index.php
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Starbucks website landing page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="circle"></div>
<header>
<a href="#" ><img src="images/logo.png" class="logo"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">What's new</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="content">
<div class="textBox">
<h2>It's not just Coffee<br>It's <span>Starbucks</span></h2>
<p>On the Insert tab, the galleries include
items that are designed to coordinate with the overall
look of your document. You can use these galleries to insert tables,
headers, footers, lists, cover pages, and other document building blocks. When you create pictures,
charts, or diagrams, they also coordinate with your current document look. <span style="color:#017143;font-weight: 600;">Sance Channel</span> </p>
<a href="">Learn More</a>
</div>
<div class="imgBox">
<img src="images/img1.png" class="starbucks">
</div>
</div>
<ul class="thumb">
<li><img src="images/thumb1.png" onclick="imgSlider('images/img1.png');changeCircleColor('#017143')"></li>
<li><img src="images/thumb2.png" onclick="imgSlider('images/img2.png');changeCircleColor('#eb7495')"></li>
<li><img src="images/thumb3.png" onclick="imgSlider('images/img3.png');changeCircleColor('#d752b1')"></li>
</ul>
<ul class="sci">
<li><a href="#"><img src="images/facebook.png"></a></li>
<li><a href="#"><img src="images/twitter.png"></a></li>
<li><a href="#"><img src="images/instagram.png"></a></li>
</ul>
</section>
<script type="text/javascript">
function imgSlider(anything){
document.querySelector('.starbucks').src = anything;
}
function changeCircleColor(color){
const circle = document.querySelector('.circle');
circle.style.background = color;
}
</script>
</body>
</html>
Reviewed by Leo
on
08:57
Rating:
.png)
No comments