formsubmit/main.html at main · chanBeltran2019/formsubmit · 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
<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <link rel= "icon" href= "assets/logo.png">
    <title>Chantal Beltran</title>
</head>
<body>
    <div class = "nav-container">
        <nav class = "navbar navbar-expand-lg navbar-light shadow p-3 mb-5 rounded">
            <button class = "navbar-toggler" data-toggle = "collapse" data-target = "#navbarMenu">
                <span class = "navbar-toggler-icon"></span>
            </button>
                <div class = "collapse navbar-collapse" id = "navbarMenu">
                    <a href = "#" class = "navbar-brand"><img class = "logo" src = "assets/logo.png"/></a>
                        <ul class = "navbar-nav ms-auto">
                            <li class = "nav-item"><a href = "#" class = "nav-link active" aria-current="page">Home</a></li>
                            <li class = "nav-item"><a href = "about.html" class = "nav-link">About</a></li>
                            <li class = "nav-item"><a href = "projects.html" class = "nav-link last">Projects</a></li>
                        </ul>
                </div>
        </nav>
    </div>
    <div class="container-fluid intro">
        <div class="row">
            <div class="col d-flex flex-column justify-content-center">
                <h1 class = "left-center-1"> Hello,</h1>
                <h1 class = "left-center-2">I am <span class = "chantal-coral">Chantal</span>.</h1>
                <p> Designer and Front-End Developer</p>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
          <div class = "col blue-bg">
            <div class = "about-margin">
              <h2><span class = "cursive-intro" data-mdb-toggle="animation" data-mdb-animation-reset="true" data-mdb-animation-on-scroll="repeat" data-mdb-animation="slide-in-down">My name is <span class = "white-underline">Chantal Beltran</span>,</span></h2>
              <div class = "sm-margin">
                <h2 class = "lh-lm">and my passion is <span class = "white-underline">technology </span>and <span class = "white-underline ">design</span>. I love to combine aesthetically pleasing designs with a user experience
                  that is as equally functional as it is beautiful. I have advanced experience with <span class = "white-underline">HTML5</span> and <span class = "white-underline">CSS</span>, and beginner to intermediate experience
                    with <span class = "white-underline">PHP, MySQL, JavaScript, React</span> and <span class = "white-underline">React Native</span>. I am always looking for ways to improve myself and am <span class = "white-underline">constantly in a state of learning.</span></h2>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-fluid">
        <div class="row">
            <div class = "col d-flex flex-column justify-content-center">
                <section class = "margin-auto line-heights">
                    <h2 class = "fw-bold">Design</h2>
                    <p>I love to create asthetically pleasing designs through the use of colors and space.  Click here to see logos, icons, styleguides, and more pieces I have created.</p>
                    <a href="projects.html" class="btn btn-primary">See more</a>
                </section>
            </div>
            <div class = "col coral-bg">
                <img class="phone-assets" src = "assets/Hi-fi Proto Phone.png" alt = "An imaginary app design with a photo of a women dancing with white text hovering over it that says dance">
            </div>
        </div>
      </div>
      <div class="container-fluid">
        <div class="row">
            <div class = "col coral-bg">
                <img class="phone-assets" src = "assets/Fresh Eats phone.JPG" alt = "An imaginary application that says Fresh Eats on it.">
            </div>
            <div class = "col d-flex flex-column justify-content-center">
                <section class = "margin-auto">
                    <h2 class ="fw-bold"> Front-End Development</h2>
                    <p> Coding is where I like to challenge myself. The possibilities are endless here. Click here to see websites and bits of functionality I have created.</p>
                    <a href="projects.html#design_destination" class="btn btn-primary">See more</a>
                </section>
            </div>
        </div>
      </div>
      <div class = "container-fluid">
        <div class = "row">
            <div class = "col d-flex flex-column justify-content-center">
                <img class = "img-fluid" src = "assets/intro-photo.jpg" alt = "professional picture of Chantal Beltran ">
            </div>
            <div class = "col d-flex flex-column contact gray-bg">
                <h2 class = "fw-bold header-padding">Contact Me</h2>
                <form class = "contact-form" action="https://formsubmit.co/kingdompiano19@email.com" method="POST">
                    <div class="form-group input-pad">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Enter full name" required>
                    </div>
                    <div class="form-group input-pad">
                        <label for="phone-number">Phone Number</label>
                        <input type="text" class="form-control" id="phone-number" placeholder="+1(xxx) xxx-xxxx (optional)">
                    </div>
                    <div class="form-group input-pad">
                        <label for="email">Email address</label>
                        <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" required>
                    </div>
                    <div class="form-group input-pad">
                        <label for="message">Message</label>
                        <textarea class="form-control" id="message" rows="3" placeholder = "Leave a message here" required></textarea>
                    </div>
                    <div class = "row align-items-center">
                        <div class = "col d-flex flex-column justify-content-center">
                            <button class="btn btn-primary" type="submit">Submit form</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
      </div>
      <div class = "container get-in-touch">
            <div class = "row">
                <h1 class = "text-center font-weight-bold"> Get in Touch</h1>
                <div class = "col d-flex flex-column">
                    <a href = "https://www.facebook.com/chantal.beltran.5494" target = "_blank"><img class = "social-logo" src = "assets/facebook-logo-lg.png" alt = "facbook logo in the color of coral"></a>
                </div>
                <div class = "col d-flex flex-column">
                    <a href = "https://www.linkedin.com/in/chantal-beltran/" target = "_blank"><img class = "social-logo" src = "assets/linkedin-logo-lg.png" alt = "linkedin logo in the color of coral"></a>
                </div>
            </div>
      </div>
      <div class = "container-fluid">
        <div class = "row">
          <div class = "col d-flex flex-column text-center">
            <footer>
                <img class = "footer-icon" src = "assets/logo.png" alt = "brand-logo">
              <p class = "fw-bold"> Chantal Beltran</p>
            </footer>
          </div>
        </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>
</body>