learning-css/index.html at master · olifer97/learning-css · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Learning CSS</title>
  <meta name="description" content="Learning CSS">
  <meta name="author" content="olifer97">
  <link rel="canonical" href="https://olifer97.github.io/learning-css/" />
  <meta property="og:url" content="https://olifer97.github.io/learning-css/">
  <link rel="stylesheet"  type="text/css" href="application.css">
  <link rel="stylesheet" href="flickity.css" media="screen">
  <link rel="icon" href="https://images-na.ssl-images-amazon.com/images/I/61R1h58rHML._SX569_.jpg" type="image">
</head>
<body class="site">
    <h1 class="title">Learning CSS</h1>
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    <div class="main-carousel js-flickity" data-flickity='{ "cellAlign": "left", "contain": true, "autoPlay": true, "draggable": true }'>
        <div class="carousel-cell">
                <iframe height="470" style="width: 100%;" scrolling="no" title="Totoro" src="https://codepen.io/olifer97/embed/JjjpOmJ?height=470&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
                    See the Pen <a href='https://codepen.io/olifer97/pen/JjjpOmJ'>Totoro</a> by Olivia Fernandez
                    (<a href='https://codepen.io/olifer97'>@olifer97</a>) on <a href='https://codepen.io'>CodePen</a>.
                  </iframe>
        </div>
        <div class="carousel-cell">
            <iframe height="470" style="width: 100%;" scrolling="no" title="jackS." src="https://codepen.io/olifer97/embed/VwwXaVv?height=470&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
                See the Pen <a href='https://codepen.io/olifer97/pen/VwwXaVv'>jackS.</a> by Olivia Fernandez
                (<a href='https://codepen.io/olifer97'>@olifer97</a>) on <a href='https://codepen.io'>CodePen</a>.
            </iframe>
        </div>
        <div class="carousel-cell">
            <iframe height="470" style="width: 100%;" scrolling="no" title="Pacman" src="https://codepen.io/olifer97/embed/RwwyJqN?height=470&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
                See the Pen <a href='https://codepen.io/olifer97/pen/RwwyJqN'>Pacman</a> by Olivia Fernandez
                (<a href='https://codepen.io/olifer97'>@olifer97</a>) on <a href='https://codepen.io'>CodePen</a>.
            </iframe>
        </div>
        <div class="carousel-cell">
            <iframe height="470" style="width: 100%;" scrolling="no" title="Draw!" src="https://codepen.io/olifer97/embed/OJJZKjB?height=470&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
                See the Pen <a href='https://codepen.io/olifer97/pen/OJJZKjB'>Draw!</a> by Olivia Fernandez
                (<a href='https://codepen.io/olifer97'>@olifer97</a>) on <a href='https://codepen.io'>CodePen</a>.
            </iframe>
        </div>
        <div class="carousel-cell">
            <iframe height="470" style="width: 100%;" scrolling="no" title="The power of eyebrows" src="https://codepen.io/olifer97/embed/mddjJWa?height=470&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
                See the Pen <a href='https://codepen.io/olifer97/pen/mddjJWa'>The power of eyebrows</a> by Olivia Fernandez
                (<a href='https://codepen.io/olifer97'>@olifer97</a>) on <a href='https://codepen.io'>CodePen</a>.
            </iframe>
        </div>
        <div class="carousel-cell">
            <iframe height="470" style="width: 100%;" scrolling="no" title="Click pokeball" src="https://codepen.io/olifer97/embed/dyyjqqW?height=470&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
                See the Pen <a href='https://codepen.io/olifer97/pen/dyyjqqW'>Click pokeball</a> by Olivia Fernandez
                (<a href='https://codepen.io/olifer97'>@olifer97</a>) on <a href='https://codepen.io'>CodePen</a>.
            </iframe>
        </div>
        <div class="carousel-cell">
            <iframe height="470" style="width: 100%;" scrolling="no" title="daria" src="https://codepen.io/olifer97/embed/xxxmwmY?height=470&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
                See the Pen <a href='https://codepen.io/olifer97/pen/xxxmwmY'>daria</a> by Olivia Fernandez
                (<a href='https://codepen.io/olifer97'>@olifer97</a>) on <a href='https://codepen.io'>CodePen</a>.
            </iframe>
        </div>
        <div class="carousel-cell">
            <iframe height="470" style="width: 100%;" scrolling="no" title="me ♀" src="https://codepen.io/olifer97/embed/mddgJmd?height=470&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
                See the Pen <a href='https://codepen.io/olifer97/pen/mddgJmd'>me ♀</a> by Olivia Fernandez
                (<a href='https://codepen.io/olifer97'>@olifer97</a>) on <a href='https://codepen.io'>CodePen</a>.
            </iframe>
        </div>
    </div>
</body>
</html>