Bootstrap Snippet For my gf's birthday (credit to Marco Barría XD) using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
    <head>
        <title>Happy Birthday</title>
        <!--<link rel="stylesheet" href="style.css">-->
        <!--<link rel="stylesheet" href="bootstrap.min.css">-->
    </head>
    <body>
        <!-- 
autor: Marco Barría 
https://twitter.com/marco_bf
-->
        <div class="container">
            <div class="velas">
                <div class="fuego"></div>
                <div class="fuego"></div>
                <div class="fuego"></div>
                <div class="fuego"></div>
                <div class="fuego"></div>
            </div>
            <svg id="cake" version="1.1" x="0px" y="0px" width="200px" height="500px" viewBox="0 0 200 500" enable-background="new 0 0 200 500" xml:space="preserve">
                <path fill="#a88679" d="M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
                    c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z">
                    <animate id="bizcocho_3" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1" begin="relleno_2.end" dur="0.3s" fill="freeze" values="
                                    M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
                    c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z
                                    ;
                                    M173.667,411.567c-47.995,12.408-102.955,12.561-147.334,0
                    c-3.848-1.089-0.189-16.089,3.661-15.002c44.836,12.66,90.519,12.753,139.427,0.07
                    C173.293,395.631,177.541,410.566,173.667,411.567z
                                    ;
                                    M173.667,427.569c-49.795,0-101.101,0-147.334,0c-3.999,0-4-16.002,0-16.002
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Lato:300italic);
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background: #ee9ca7 !important;
}
#cake {
  display: block;
  position: relative;
  margin: -10em auto 0 auto;
}
/* ============================================== Candle
*/
.velas {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 50%;
  margin-left: -2.4px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  transform: translateY(-300px);
  backface-visibility: hidden;
  animation: in 500ms 6s ease-out forwards;
}
.velas:after,
.velas:before {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"For my gf's birthday (credit to Marco Barría XD)"
Bootstrap 4.1.1 Snippet by SArkarHtet

Related: See More

Questions / Comments:

"For my gf's birthday (credit to Marco Barría XD)" Bootstrap 4.1.1 Snippet by SArkarHtet

Related: See More

Questions / Comments:

"For my gf's birthday (credit to Marco Barría XD)"
Bootstrap 4.1.1 Snippet by SArkarHtet