ProjectCodePen/index.html at main · jumair/ProjectCodePen · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Fuentes -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500&display=swap" rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Styles -->
    <link rel="stylesheet" href="styles/codepen.css">

    <title>CodePen - Juan Manuel Iriondo</title>
</head>
<body>

    <div class="navigation-wrapper">
        <div class="logo-column">
            <div class="logo">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138 26" fill="none" stroke="white" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"/>
                </svg>
            </div>
        </div>

        <div class="nav-column">
            <div class="explore">
                <p>EXPLORE</p>
            </div>
            <!-- Link wrapper -->
            <div class="links-wrapper">
                <div class="nav-link">
                    <a href="#">Pens</a>
                </div>

                <div class="nav-link">
                    <a href="#">Projects</a>
                </div>

                <div class="nav-link">
                    <a href="#">Posts</a>
                </div>

                <div class="nav-link">
                    <a href="#">Collections</a>
                </div>
            </div>
        </div>

        <div class="spark-column">
            <div class="spark">Spark</div>
            <div class="down-chevron">
                <i class="fas fa-chevron-down"></i>
            </div>
        </div>

        <div class="buttons-column">
            <div class="buttons-wrapper">
                <div class="button-down">
                    <h3>Create<h3>
                    <i class="fas fa-chevron-down"></i>
                </div>

                <div class="button-search">
                    <i class="fas fa-search"></i>
                </div>

                <div class="button-link">
                    <h3>Log In<h3>
                </div>

                <div class="button-link">
                    <h3>Sign Up<h3>
                </div>
            </div>
        </div>
    </div>

    <div class="page-wrapper">
        <div class="page-wrapper-left">
            <div class="left-text-up">
                <p>CodePen is a <b>social development environment</b> for front-end designers and developers.
                    <span>&#x1F590;</span>
                </p>
            </div>
            <div class="left-text-center">
                <p>It's the best place to build and deploy a website, show off your work, build test cases, and find inspiration.</p>
            </div>
            <div class="left-text-down">
                <div class="sign-up">Sign Up for Free</div>
                <div class="learn">Learn More</div>
            </div>
        </div>
        <div class="page-wrapper-right">
            <div class="right-text">
                <div class="right-text-left">This is</div>
                <div class="right-text-center">CodePen Projects</div>
                <div class="right-text-right">!</div>
            </div>
            <div class="right-image">
                <img src="images/page/MyWebsite.png" alt="My Website">
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="square">
            <div class="codepen">CodePen for</div>
            <div class="text-upper">TEAMS</div>
        </div>
        <div class="square">
            <div class="codepen">CodePen for</div>
            <div class="text-upper">EDUCATION</div>
        </div>
        <div class="square">
            <div class="codepen">CodePen for</div>
            <div class="text-upper">PRIVACY</div>
        </div>
        <div class="square">
            <div class="codepen">CodePen for</div>
            <div class="text-upper">WRITING</div>
        </div>
    </div>

</body>
</html>