first commit

TheoBreaux · Dec 22, 2022 · 0ae33c8 · 0ae33c8
commit 0ae33c8
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 0 deletions.
diff --git a/README.md b/README.md
diff --git a/fonts/PermanentMarker.ttf b/fonts/PermanentMarker.ttf
diff --git a/fonts/PermanentMarker.woff b/fonts/PermanentMarker.woff
diff --git a/images/amsterdam.jpg b/images/amsterdam.jpg
diff --git a/images/london-friends.jpg b/images/london-friends.jpg
diff --git a/images/theo-acting2.png b/images/theo-acting2.png
diff --git a/images/theo-beige-henley.jpg b/images/theo-beige-henley.jpg
diff --git a/images/theo-fitness.jpg b/images/theo-fitness.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>My Story</title>
+  <link rel="stylesheet" href="style.css" />
+  <link rel="icon" type="image/x-icon" href="https://code.s3.yandex.net/web-code/favicon.ico" />
+</head>
+
+<body class="page">
+  <header class="header">
+    <div class="overlay">
+      <h1 class="page-title">Theo Breaux</h1>
+    </div>
+  </header>
+  <section class="content">
+    <!-- add the cards here -->
+    <div class="card">
+      <img class="card-image" src="images/theo-acting2.png" alt="an acting scene">
+      <h2 class="card-title">Acting</h2>
+      <p class="card-description">I have had a passion for television and acting for as long as I can remember. I
+        studied theater in college and for a long period of time persued an acting career in Los Angeles. As it always
+        goes, there were many up and downs along this career path, but I am glad I chose to follow my heart and try to
+        make it happen.</p>
+    </div>
+    <div class="card">
+      <img class="card-image" src="images/theo-fitness.jpg" alt="me doing a bicep curl">
+      <h2 class="card-title">Fitness</h2>
+      <p class="card-description">I was a certified personal trainer in Los Angeles for many years. I did this to
+        supplement my income while I pursued my acting career. I have always been a health and fitness fanatic and to
+        this day am very active in the gym.</p>
+    </div>
+    <div class="card">
+      <img class="card-image" src="images/london-friends.jpg" alt="on a london street with friends">
+      <h2 class="card-title">Friends</h2>
+      <p class="card-description">Friends are your choosen family and I love them all dearly. With my journeys across
+        the world, I have been able to meet wonderful people that have become true friends. I always look to my friends
+        to bring me up when I am down, and to provide the support I need during this career transition.</p>
+    </div>
+    <div class="card">
+      <img class="card-image" src="images/amsterdam.jpg"
+        alt="me and a friend in front of the van gogh museum in amsterdam">
+      <h2 class="card-title">Travel</h2>
+      <p class="card-description">My numebr one favorite thing to do in this world is to travel and create memories with
+        friends and family outside of our own normal lives. I try to travel at least two to three times a year to
+        international destinations to visit friends and make new ones. Travel keeps me sane and invigorates me. I am
+        always excited for my next adventure, which I know is just around the corner.</p>
+    </div>
+  </section>
+  <footer class="footer">
+    <!-- add your signature here -->
+    <p class="footer-signature">Theo Breaux 2022 &#169</p>
+  </footer>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,104 @@
+@font-face {
+  font-family: "Permanent Marker";
+  src: url(./fonts/PermanentMarker.ttf) format("truetype"),
+    url(./fonts/PermanentMarker.woff) format("woff");
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+a {
+  margin: 0;
+  font-size: 100%;
+  font-weight: normal;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.page {
+  font-family: "Inter", sans-serif;
+  background: #eeeeee;
+}
+
+.header {
+  height: 100vh;
+  /* add missing declarations */
+  background-image: url(images/theo-beige-henley.jpg);
+  background-size: cover;
+  background-position: top;
+  background-repeat: no-repeat;
+  text-align: center;
+}
+
+/* add a CSS rule for the page title here */
+.page-title {
+  font-family: "Permanent Marker", cursive;
+  font-size: 140px;
+  line-height: 140px;
+  color: white;
+  text-transform: uppercase;
+  max-width: 1240px;
+  margin: auto;
+}
+
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+}
+
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  /* add missing declarations */
+  max-width: 790px;
+  margin: 100px auto 50px;
+}
+
+/* add CSS rules for cards and their content here */
+.card {
+  width: 350px;
+  margin-bottom: 60px;
+  padding: 45px 45px 70px;
+  background: #ffffff;
+  box-shadow: 4px 4px 5px rgba(0, 132, 255, 0.4)
+}
+
+.card-image {
+  width: 100%;
+  margin-bottom: 25px;
+  height: 200px;
+  object-fit: contain;
+}
+
+.card-title {
+  font-family: "Permanent Marker", cursive;
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.card-description {
+  font-size: 16px;
+}
+
+.footer {
+  display: flex;
+  /* add missing declarations */
+  min-height: 300px;
+  background-color: #000000;
+}
+
+/* add a CSS rule for the footer signature */
+.footer-signature {
+  font-size: 24px;
+  color: #ffffff;
+  margin: auto;
+}