code_learning/2_FirstProject/index.html at main · Snigf12/code_learning · 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
81
82
83
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Landing Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="./src/favicon.png">
</head>

<body>
    <!--This is the header-->
    <div class="header-container">
        <div class="header-logo">
            <img src="./src/favicon.png" width="80" height="80">
        </div>
        <div class="header-item"><a style="text-decoration: none; color: #FFF;" href="https://www.youtube.com/watch?v=wUlIC0Su4mY" target="_blank">Video 1</a></div>
        <div class="header-item"><a style="text-decoration: none; color: #FFF;" href="https://www.youtube.com/watch?v=6WlI24rv__g&t=68s" target="_blank">Video 2</a></div>
        <div class="header-item"><a style="text-decoration: none; color: #FFF;" href="https://www.youtube.com/watch?v=ghGhHIFD8AE" target="_blank">Video 3</a></div>
    </div>
    <!--This is the title-->
    <div class="title-container">
        <div class="title-item">
            <h2>This website is awsome and relaxing</h2>
            <p>If you press the button or the image, you will find out relaxing things</p>
            <a href="https://www.youtube.com/watch?v=HdkXKq1o5Cg" target="_blank" class="button">Chill out</a>
        </div>
        <div class="title-item">
            <a href="https://www.youtube.com/watch?v=JveI7khZjac" target="_blank">
                <img src="./src/title.jpg">
            </a>
        </div>
    </div>
    <!--This is the main information-->
    <div class="main-container">
        <div class="maintitle-item"><h2>Tips for Relaxing</h2></div>
        <div class="main-item">
            <a href="https://www.youtube.com/watch?v=AGiyA57TTN4" target="_blank">
                <img src="./src/peaceful1.jpg">
            </a>
        </div>
        <div class="main-item">
            <a href="https://www.youtube.com/watch?v=INIMACWzMsI" target="_blank">
                <img src="./src/peaceful2.jpg">
            </a>
        </div>
        <div class="main-item">
            <a href="https://www.youtube.com/watch?v=QfkI5QiHMfM" target="_blank">
                <img src="./src/peaceful3.jpg">
            </a>
        </div>
        <div class="main-item">
            <a href="https://www.youtube.com/watch?v=ui5ykVAZfV4" target="_blank">
                <img src="./src/peaceful4.jpg">
            </a>
        </div>
    </div>
    <!--This is the quoting-->
    <div class="quote-container">
        <div class="quote">
            <h1>Do not let the behavior of others destroy your inner peace</h1>
        </div>
        <div class="author">
            <p>Dalai Lama</p>
        </div>
    </div>
    <!--This is the block to join the team-->
    <div class="footer-container">
        <div class="footer-item">
            <h1>Join our team</h1>
            <p>Get the best relaxing practices and join the team to take back the Misty Mountains Cold clicking the button</p>
        </div>
        <div class="footer-item">
            <a href="https://www.youtube.com/watch?v=BEm0AjTbsac" target="_blank" class="button">Join the dwarf team</a>
        </div>
    </div>
    <!--This is the small copyright footer-->
    <div class="copyright-container">
        <p>
            <span><a href="https://github.com/Snigf12/" target="_blank">Snigf12</a></span>
            for
            <span><a href="https://www.theodinproject.com/" target="_blank">TheOdinProject</a></span>
        </p>
    </div>
</body>