Skip to content

Instantly share code, notes, and snippets.

@ZaynahGiti

ZaynahGiti/dailycssimages-google-ai.markdown

Created May 19, 2017 20:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ZaynahGiti/5f880d78c1509f4789cf98a81b824c64 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ZaynahGiti/5f880d78c1509f4789cf98a81b824c64 to your computer and use it in GitHub Desktop.
Download ZIP
#DailyCSSImages : Google AI
Raw
index.html
<html>
<body>
<div class="main-container">
<div class="phone-container">
<div class="body">
<!-- class for adding effect -->
<div class="body-copy"></div>
<div class="screen">
<div class="speaker"></div>
<div class="menu-button">
<div class="button-triangle"></div>
<div class="botton-circle"></div>
<div class="botton-circle2"></div>
<div class="botton-square"></div>
</div>
<!-- Google Assistant symbol -->
<div class="voice-circle">
<div class="node1"></div>
<div class="node2"></div>
<div class="node3"></div>
<div class="node4"></div>
<div class="node5"></div>
</div>
<div class="google-assistant">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
<div class="message">
<span>
<h5>
Hi , How Can I help ?
</h5>
</span>
</div>
</div>
</div> <!-- end of screen -->
</div>
</div>
<div class="text-credit">
<h5>@ZeinaChallenges</h5>
<div>
</body>
</html>
Raw
style.scss
$background-color:#5565fd;
$googleRed: #F90101;
$googleYellow: #F2B50F;
$googleGreen: #00933B;
$shadow: linear-gradient(to top, #000 0%, #5565fd 120%);
$border: #111111;
body{
background:$background-color;
}
.main-container{
position:relative;
margin:0 auto;
width:800px;
height:800px;
border : 1px solid none;
display:block;
background: none;
}
.body{
position: absolute;
top: 0%;
left: 27%; //100-46=54 54/2=27
width: 40%;
height: 78%;
background: black;
border: solid 4px $border;
border-radius: 15%;
}
.body-copy{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 60%;
border-top-left-radius: 16%;
border-top-right-radius: 16%;
background: $shadow;
}
.screen{
position: absolute;
top: 11%; //100-78=22, 22/2=11
left: 5%;
width: 90%;
height: 78%;
background: lighten(#000,90%);
border: solid 2px $border;
}
.speaker{
position: absolute;
top: -9%;
left: 39%; //100-22=78, 78/2=39
width: 22%;
height: 2%;
background: black;
border: solid 2px $border;
border-radius: 25%;
}
.menu-button{
position: absolute;
bottom: -12%;
left: 44%; //100-12=88, 88/2=44
width: 12%;
height: 9%;
background: black;
border: solid 2px $border;
border-radius: 15%;
}
.button-triangle{
position:absolute;
clip-path: polygon(49% 0, 49% 100%, 0 47%);
background:white;
top: 35%;
left: -85px;
width: 70%;
height: 50%;
box-shadow:20px 20px 20px $background-color;
}
.botton-circle{
position:absolute;
clip-path: circle(50% at 50% 50%);
background:white;
top: 35%;
left: 2px;
width: 50%;
height: 50%;
box-shadow:20px 20px 20px $background-color;
}
.botton-circle2{
position:absolute;
clip-path: circle(50% at 50% 50%);
background:none;
border:3px solid white;
top: 20%;
left: -6px;
width: 80%;
height: 70%;
box-shadow:20px 20px 20px $background-color;
}
.botton-square{
position:absolute;
background:white;
//border:3px solid white;
top: 35%;
left: 95px;
width: 50%;
height: 40%;
}
.voice-circle{
position:absolute;
width:80px;
height:80px;
background:white;
top:78%;
left:35%;
border-radius:50%;
}
.node1{
position:absolute;
width:5px;
height:10px;
background:$googleGreen;
top:50px;
left:37px;
}
.node2{
position:absolute;
width:50px; height:100px;
border:solid 5px #000;
border-color:$googleYellow transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
transform:rotate(180deg);
top:-60px;
left:10px;
}
.node4{
position:absolute;
border-radius:35%;
background:$background-color;
width:20%;
height:35%;
left:40%;
top:13%;
}
.google-assistant{
position:absolute;
width:300px;
height:300px;
background:none;
border:1px solid none;
}
.circle1{
position:asbolute;
width:100px;
height:100px;
background:$background-color;
border-radius:50%;
margin-top:30%;
margin-left:5px;
}
.circle2{
position:asbolute;
width:50px;
height:50px;
background:$googleRed;
border-radius:50%;
margin-top:-20%;
margin-left:38%;
}
.circle3{
position:asbolute;
width:70px;
height:70px;
background:$googleYellow;
border-radius:50%;
margin-top:5%;
margin-left:35%;
}
.circle4{
position:asbolute;
width:30px;
height:30px;
background:$googleGreen;
border-radius:50%;
margin-top:-55%;
margin-left:52%;
}
.message{
position:absolute;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 80% 75%, 0% 75%);
width:220px;
height:80px;
background:white;
transform:rotate(180deg);
margin-top:125px;
margin-left:20px;
}
span{
position:absolute;
transform:rotate(180deg);
left:30%;
top:-5px;
}
.text-credit{
position:absolute;
top:80%;
left:42%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment