vendredi 17 septembre 2021

Different response on different web browsers/screen size (not mobile friendly)

Honestly, I probably shouldn't even be writing right now given the fact that I am so heartbroken I just want to curl up in a ball and cry in bed. I have worked so hard SO FLIPPING HARD on my design/build and I was so proud of myself that I have not felt this happy in a long time. However, like reality vs. disney...all happy endings must crash and burn because life is no flipping disney screenplay.

Backstory:

I am a high functioning autistic who grew up in a REALLY flipping bad home. Cared for my mum since I was a child. Dad was an abusive piece of crud. We were really poor so I had to work 3 jobs since I was 8 just to take care of the house, bills, etc. Now mum is recently deceased, I am trying to get my life together and escape my abusive father. I can't afford college (because the "get a scholarship and apply for aid" is a load of cow manure), I can't afford bootcamps, I can't afford a mentor, so I taught myself to code using youtube, google and lots of reading.

After nearly two years of studying, many months of designing, many months of coding, trials and errors and research, I finally finished my portfolio website. I took one look at my masterpiece, bought my domain, and published my work. Right when I thought my life was about to change and that I was ready to apply for new jobs, I saw my beautiful sight that fits so beautifully on my chrome browser via macbook air and I asked myself "is this heaven" God instantly replied back "NO....THIS...IS...SPARTA..." and kicked my happy donkey all the way back to reality. Moral of the story, I am what my mummy called my ex's cooking...trash.

Here's my code please do not roast me like a pig at a nordic pagan festival. I am doing my best (which is clearly not good enough).

-----------------------------------website name------------------------------------------

arthurcurry.co.uk

yes this is my real name, yes I know who my mum named me after, yes I used this and my obsession with fish to create my site. Please do not start with the jokes fam. I have heard it my entire life. If you have no idea what I am speaking of... Congrats, you are the .01% of the world who most likely will not have a go at me because of it.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pimg1,
.pimg2,
.pimg3 {
  position: relative;
  opacity: 0.70;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.pimg1 {
  min-height: 100%;
}

.pimg2 {
  min-height: 400px;
}

.pimg3 {
  min-height: 400px;
}

.pimg4 {
  background-image: url('image4.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
}

.section {
  text-align: center;
  padding: 50px 80px;
}

.section-light {
  background-color: #f4f4f4;
  color: #666;
}

.section-dark {
  background-color: #282e34;
  color: #ddd;
}

.ptext {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 27px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.ptext .border {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

.ptext .border.trans {
  background-color: transparent;
}

@media(max-width:568px) {
  .pimg1,
  .pimg2,
  .pimg3 {
    background-attachment: scroll;
  }
}

.info {
  position: center;
}

.ptext4 {
  position: absolute;
  top: 450%;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 27px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ptext4 .border {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

.ptext4 .border.trans {
  background-color: transparent;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Arthur Curry</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="pimg1">
    <video autoplay muted loop>
    <source src="waves1.mp4" type="video/mp4" class="video1">
  </video>
    <div class="ptext">
      <span class="border">
        Designer. Developer. Conservationist.
      </span>
      <p>"What could be greater than a King? A Hero. A King fights for his nation, a hero fights for everyone." <strong> - Mera</strong></p>
    </div>
  </div>

  <section class="section section-light">
    <div class="text">
      <h2> Who is Arthur Curry? </h2>
      <p>
        Many know his name but even more do not know who he truly is. Ever since Arthur Curry was a child, he felt himself drawn to the 7 seas and her despair as if she was physically calling to him. With the incapability to escape the grasp of her cries for
        help, he knew something must be done. In 2016 he began teaching himself to code using numerous programming languages, text editors, design and developing platforms. Through his work he has made it his life mission to not just design and develop
        but to use his skills for good towards conservation. Many have come to him for advice and have called him a living computer, constantly learning, adapting and solving problems many find challenging.

      </p>
    </div>
  </section>

  <div class="pimg2">
    <video autoplay muted loop>
    <source src="pimg2.mp4" type="video/mp4">
  </video>
    <div class="ptext">
      <span class="border trans">
        Did you know that in 2020 Ocean Cleanup broke world record using technolgy to collect <strong><i>103 tons of plastic</strong></i>!
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Design Tools</h2>
    <p>
      Pen & Paper, Sketch pad, Webflow, Apple Mac, photography/videography camera, dive gear, Microsoft Office, Adobe Photoshop, Adobe Lightroom, & Adobe Animate.
    </p>
  </section>

  <div class="pimg3">
    <video autoplay muted loop>
    <source src="pimg3.mp4" type="video/mp4">
  </video>
    <div class="ptext">
      <span class="border trans">
        Did you know that because of technology, scientist are using biorock which gives coral reefs a 1600% to 5000% higher chance of survival?
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Developer Tools</h2>
    <p>
      Github, HTML, CSS, PHP, Python, JS, Sublime Text Editor, Visual Code Text Editor, & Bootstrap.
    </p>
  </section>

  <div class="pimg4">
    <div class="ptext4">
      <span class="border trans">
        <ul>
        <li>Would you like to know more about becoming a true conservationist?</li>
        <br>
        <li>(website coming soon)</li>
        <br>
        <li><strong><i>ACurry.Business@gmail.com</i></strong></li>
      </span>
      <a href="http://open.spotify.com/user/q77rp6h9ot83qjk8r9xxg63hn" target="_blank">

        <img src="spotify.png" class="spotify">

      </a>
      <a href="https://www.linkedin.com/in/arthurcurry/" target="_blank">

        <img src="linkedin.png" class="linkedin">

      </a>
      <a href="https://www.instagram.com/oceanic_conservationist/" target="_blank">

        <img src="instagram.png" class="instagram">

      </a>

    </div>
  </div>
</body>

</html>



Aucun commentaire:

Enregistrer un commentaire