sample_portfolio_html_css/index.html at main · Ceci222/sample_portfolio_html_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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />    <title>Mi Portfolio</title>
    <link rel="stylesheet" href="./index_styles.css">
    <link rel="stylesheet" href="./media_queries.css">


    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Marvel:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <title>My Portfolio</title>
</head>
<body>

    <div class="index-wrapper">

        <header class="index-header">

            <section class="top-section">
                <article class="top-headline">
                    <h1> Portfolio </h1>
                </article>

                    <nav class="index-nav-links">
                        <!-- ul>li*3>a -->
                            <a href="./index.html" class="active">home</a>
                            <a href="./projects.html" >projects</a>
                            <a href="./contact.html" >contact</a>
                    </nav>
            </section>

        </header>

        <main>

            <div class="mid-section">

                <section class="mid-section-left">

                    <article class="name">
                        <h3>Edward Johnson - Web developer</h3>
                    </article>


                    <pre><code>
                    edwardJohnson = {
                        name: "Edward",

                        code: ["Python", "JavaScript", "React", "HTML", "CSS", "Docker"],
                        languages: ["en_US", "es_ES"],

                        sayHi: function(){
                            console.log("Hello there!");
                        }
                    };

                    edwardJohnson.sayHi();
                    </code></pre>


                    <a href="./files/cv-edward.jpg" download="cv-edward-johnson.jpg">
                        <button class="cv-download">Download CV</button>
                    </a>

                    <audio id="audio" controls muted autoplay>
                        <source src="./audio/Rick Astley - Never Gonna Give You Up (Official Music Video).mp3">
                    </audio>

                </section>

                <section class="mid-section-about-me">


                    <article class="about-me-name">
                        <h2>Edward Johnson - Web developer</h2>
                    </article>

                    <a href="#info_about_me"><h3> About Me</h3></a>


                    <img src="./Images/thispersondoesnotexist.jpeg" alt="Developer-image">


                    <p id="info_about_me">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor, quae minus iste dolores voluptas temporibus. Rerum provident perspiciatis optio illum, veritatis aut blanditiis vero maxime ad quibusdam eum, eaque quia!
                    Impedit a error, doloremque corporis qui vel aut adipisci laborum ullam numquam odit quas similique laudantium illum ex accusamus. Consectetur voluptate in itaque? Inventore perspiciatis iusto dolorum quas voluptate maiores!
                    Ullam dolor magni rerum. Error quam asperiores nulla, ipsa maiores omnis accusantium. </p>

                    <p>Rerum et placeat magni, saepe officia est, quia consectetur fuga autem quibusdam, aspernatur hic maxime rem! Molestias, quia.
                    Necessitatibus quidem cupiditate modi aliquam optio tenetur? Esse officiis quisquam dignissimos aut quam veritatis vel amet, illo animi sed dolor qui, quos, praesentium debitis quis aliquid? Dolore quasi doloribus quo?
                    Eum veniam magnam dolore inventore minus quam, officia adipisci earum exercitationem eligendi voluptatem delectus dolor, id consequuntur tenetur. Rem dolores, minima neque debitis cumque architecto enim fugiat qui ipsum corporis.</p>


                </section>
            </div>

        </main>

    <footer>
            <!--     ul.contanct-list>li.contact-link*2>a-->
            <section class="contact-list">

                <a href="https://linkedin.com" target="_blank">
                    <i class="fa-brands fa-linkedin"></i>
                </a>

                <a href="https://github.com">
                    <i class="fa-brands fa-github" target="_blank"></i>
                </a>

                <a href="https://facebook.com">
                    <i class="fa-brands fa-square-facebook" target="_blank"></i>
                </a>

            </section>

    </footer>
    </div>

</body>
</html>