Projects/index.html at master · eecyril-git/Projects · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en-US">
    <head>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body{
                background: url("9ywbca6G.png");
                background-size:cover;
                background-repeat: no-repeat;
                margin: auto;
            }
            a{
                text-decoration: unset;
                color:unset;
            }
            /************************/
            header{
                height: 40vh;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
            }
            header h1{
                font-family: "Press Start 2P";
                text-align: center;
                text-transform: uppercase;
            }
            #avatarimg{
                position: relative;
                animation-name: float;
                animation-duration: 3s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
            }
            header img{
                border-radius: 50%;
                width: auto;
            }
            @keyframes float{
                0%{
                    top: 0px;
                }
                50%{
                    top: 10px;
                }
                100%{
                    top: 0px;
                }
            }
            /************************/
            main{
                margin: auto;
                width: 80vw;
                height: 100%;
                padding:10px;
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
            }
            .option {
                position: relative;
                width:200px;
                height:120px;
                padding:10px;
                background-color: white;
                border-radius: 5px;
                border: black 1px solid;
                font-family: "Press Start 2P";
                font-size: 1rem;
                text-align: center;
                line-height: 22px;
            }
            .option:hover{
                animation-name: move;
                animation-duration: 0.5s;
                animation-fill-mode: forwards;
            }
            @keyframes move{
                0%{
                    bottom:0;
                    right:0;
                }
                100%{
                    bottom:5px;
                    right:5px;
                    -webkit-box-shadow: 6px 10px 5px 0px rgba(0,0,0,0.52);
                    -moz-box-shadow: 6px 10px 5px 0px rgba(0,0,0,0.52);
                    box-shadow: 6px 10px 5px 0px rgba(0,0,0,0.52);
                }
            }
            /************************/
            footer{
                position: absolute;
                bottom: 0px;
                margin: auto;
                width:100%;
                height: 13vh;
                background-color: rgba(243, 243, 243, 0.699);
                font-family:"Press Start 2P";
                font-size: 0.8em;
            }
            #social-links{
                margin: auto;
                width: 50vw;
                height:100%;
                display: flex;
                flex-direction: column;
                justify-content:center;
            }
        </style>
    </head>
    <header>
        <div id="avatarimg">
            <img src="CSS BASIC/IMAGES/profilepicture.jpeg">
        </div>
        <h1 id="title">Project Portfolio</h1>
    </header>
    <main>
            <a href="old-index.html" class="option">
                <p>Freecodecamp<br>Responsive<br>Web Design<br>Certification</p>
            </a>
            <a href="#" class="option">
                <p>Google<br>Homepage</p>
            </a>
            <a href="Resume/resume.html" class="option">
                <p>Resume</p>
            </a>
    </main>
    <footer>
        <div id="social-links">
            <div id="youtube">
                <p>https://www.youtube.com/channel/UCUBdssDS2cZ2994Yy7-Eaxw</p>
            </div>
            <div id="facebook">
                <p>facebook.com/SumandeCoco</p>
            </div>
        </div>
    </footer>
</html>