100daysofcode/index.html at master · nishitv2898/100daysofcode · 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
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <title>My 100 Days of Code Projects</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

<h1 style="text-align: center; color: #fff;"><strong>100 Days of Code</strong></h1>

<div class="container">
    <div class="card">
        <div class="card__image-container">
            <span class="tag">DAY 0</span>
            <img class="card__image" src="https://images.unsplash.com/photo-1519999482648-25049ddd37b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2126&q=80" alt="">
        </div>

        <svg class="card__svg" viewBox="0 0 800 500">

            <path d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400 L 800 500 L 0 500" stroke="transparent" fill="#333"/>
            <path class="card__line" d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400" stroke="pink" stroke-width="3" fill="transparent"/>
        </svg>
<a href="/">
        <div class="card__content">
            <h1 class="card__title">This Dashboard</h1>
            <p> This is day 0. I built this dashboard to showcase the upcoming projects in this challenge</p>
        </div>
    </a>
    </div>

<!--    DAY 01 -->

    <div class="card">
        <div class="card__image-container">
            <span class="tag">DAY 01</span>
            <img class="card__image" src="./images/day1.png" alt="">
        </div>

        <svg class="card__svg" viewBox="0 0 800 500">

            <path d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400 L 800 500 L 0 500" stroke="transparent" fill="#333"/>
            <path class="card__line" d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400" stroke="pink" stroke-width="3" fill="transparent"/>
        </svg>
        <a href="./Day01-Weather%20Location%20Info%20App/index.html">
            <div class="card__content">
                <h1 class="card__title">Weather Info</h1>
                <p> I've built a Weather Location Info App which detects a users location and displays weather along with icon </p>
            </div>
        </a>
    </div>

    <!--    DAY 02 -->

    <div class="card">
        <div class="card__image-container">
            <span class="tag">DAY 02</span>
            <img class="card__image" src="./images/day2.png" alt="">
        </div>

        <svg class="card__svg" viewBox="0 0 800 500">

            <path d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400 L 800 500 L 0 500" stroke="transparent" fill="#333"/>
            <path class="card__line" d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400" stroke="pink" stroke-width="3" fill="transparent"/>
        </svg>
        <a href="./Day02-Progress%20Bar%20Task%20Tracker">
            <div class="card__content">
                <h1 class="card__title">Form with Progress Bar</h1>
                <p> I've built a form in which a proress bar fill up as the user enters valid values in form fields</p>
            </div>
        </a>
    </div>
</div>


</body>
</html>