Web Dev

Monday, September 28, 2020

CSS Stylised



body {
  background-color: #fff;
  margin: 0;
  font-family: 'Roboto Slab', Roboto, sans-serif;
}

h1 {
  color: #fff;
  font-size: 5.5rem;
  line-height: 2;
  margin: 50px auto 0 auto;
  font-family: 'Caveat', cursive;
}

h2 {
  color: #2c3e50;
  font-size: 2.5rem;
  font-weight: normal;
  font-family: 'Roboto Mono', monospace;
  padding-bottom: 10px;
}

h3 {
  color: #000;
  font-size: 1.5rem;
  font-family: 'Roboto Mono', monospace;
}

h4 {
  font-size: 1rem;
}

p {
  line-height: 2;
}

a {
	color:#597ea2;
	text-decoration:none;
}

hr {
  border-style: none;
  border-top-style: dotted;
  border-color: lightgray;
  border-width: 5px;
  width: 5%;
  margin: 100px auto;
}

table {
  text-align: justify;
}


* {
  box-sizing: border-box;
}

.nav {
  height: 50px;
  width: 100%;
  background-color: #b4c9da;
  position: relative;
  padding-top: 20px;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 5px 10px 10px 10px;
  margin-left: 10px;
}

.nav > .nav-btn {
  display: none;
}

@media (max-width: 600px) {
  .nav > .nav-links > a {
    display: block;
    width: 100%;
    padding: 20px;
    margin-top: 20px;
  }
}

.nav > .nav-links {
  display: inline;
  float: right;
  font-size: 18px;
  margin-right: 20px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #f2f2f2;
}

.nav > .nav-links > a:hover {
  background-color: #b4c9da;
}

.nav > #nav-check {
  display: none;
}

@media (max-width:600px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #fff;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #b4c9da;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

.top-container {
  background-color: #b4c9da;
  padding-top: 100px;
  margin-top: -20px;
  text-align: center;
}

.ilove {
  font-size: 2rem;
  font-family: 'Caveat', cursive;
  color: #fff;
}

.coding {
  text-decoration: underline;
}

.top-cloud {
  position: absolute;
  right: 500px;
  top: 250px;
}

.bottom-cloud {
  position: absolute;
  right: 60%;
  top: 110px
}

@media screen and (max-width:450px) {
  .bottom-cloud {
    visibility: hidden;
 }
}

.mountain {
  width: 60vw;
}

.jsnamr {
  width: 200px;
}

.jsnamr:hover {
  padding: 25px;
  transform: scale(1.1);
}

.intro {
  margin: auto;
}

.middle-container {
  margin-top: 30px;
  text-align: center;
}

.project {
  width: auto;
  text-align: center;
}

.fa-code {
  font-size: 5vw;
  width: 50%;
  float: left;
  margin-right: 100px;
}

.code-description {
  clear: left;
}

.fa-android {
  font-size: 5vw;
  width: 50%;
  float: left;
  margin-right: 100px;
}

.android-description {
  clear: left;
}

.fa-gamepad {
  font-size: 5vw;
  width: 50%;
  float: left;
  margin-right: 100px;
}

.gamecode-description {
  clear: left;
}

.skills {
margin-top: 20px;
text-align: center;
}

.skill-row {
  width: 50%;
  margin: 100px auto 100px auto;
  text-align: left;
  line-height: 2;
}

.coding-gif {
  width: 8vw;
  float: right;
  margin-left: 30px;
}

.android-gif {
  width: 8vw;
  float: left;
  margin-right: 30px;
}

.contact {
  margin-top: 20px;
  text-align: center;
  padding-bottom: 50px;
}

.bottom-container {
  color: #f2f2f2;
  background-color: #2c3e50;
  line-height: 3;
  text-align: center;
  padding: 20px 0;
}

.bottom-container a{
  color: #f2f2f2;
  align-content: space-between;
  margin: 10px 20px;
}

CSS Stylised Demo

Saturday, September 26, 2020

CSS Sizing



body {
  background-color: #faf9f9;
  margin: 0;
  font-family: 'Roboto Slab', Roboto, sans-serif;
}

h1 {
  color: #488b8f;
  font-size: 5.5rem;
  line-height: 2;
  margin: 50px auto 0 auto;
  font-family: 'Caveat', cursive;
}

h2 {
  color: #5ea3a3;
  font-size: 2.5rem;
  font-weight: normal;
  font-family: 'Roboto Mono', monospace;
  padding-bottom: 10px;
}

h3 {
  color: #6eacac;
  font-size: 1.5rem;
  font-family: 'Roboto Mono', monospace;
}

h4 {
  font-size: 1rem;
}

p {
  line-height: 2;
}

a {
	color:#add2c9;
	text-decoration:none;
}

hr {
  border-style: none;
  border-top-style: dotted;
  border-color: lightgray;
  border-width: 5px;
  width: 5%;
  margin: 100px auto;
}

table {
  text-align: justify;
}

.anchor-nav {
  background-color: #eff6f5;
  float: right;
  padding-top: 20px;
  padding-left: 20px;
  margin-top: -16px;
}

.anchor {
  font-size: 16px;
  font-weight: normal;
}

.top-container {
  background-color: #eff6f5;
  padding-top: 100px;
  margin-top: -20px;
  text-align: center;
}

.coding {
  text-decoration: underline;
}

.top-cloud {
  position: absolute;
  right: 500px;
  top: 250px;
}

.bottom-cloud {
  position: absolute;
  right: 60%;
  top: 110px
}

.mountain {
  width: 60vw;
}

.middle-container {
  margin-top: 30px;
  text-align: center;
}


.jsnamr {
  width: 200px;
}

.jsnamr:hover {
  padding: 25px;
  transform: scale(1.1);
}

.intro {
  margin: auto;
}

.project {
  width: auto;
  text-align: center;
}

.fa-code {
  font-size: 5vw;
  width: 50%;
  float: left;
  margin-right: 100px;
}

.code-description {
  clear: left;
}

.fa-android {
  font-size: 5vw;
  width: 50%;
  float: left;
  margin-right: 100px;
}

.android-description {
  clear: left;
}

.fa-gamepad {
  font-size: 5vw;
  width: 50%;
  float: left;
  margin-right: 100px;
}

.gamecode-description {
  clear: left;
}

.skills {
margin-top: 20px;
text-align: center;
}

.contact {
  margin-top: 20px;
  text-align: center;
  padding-bottom: 50px;
}


.bottom-container {
  margin-top: 40px;
  text-align: center;
}

CSS Sizing Demo

CSS Font Style


/* Font Style */
body {
  background-color: #F1F1F1;
  margin: 0;
  font-family: 'Roboto Slab', Roboto, sans-serif;
}

h1 {
  color: #1b262c;
  font-size: 3em;
  font-family: 'Caveat', cursive;
}

h2 {
  font-family: 'Roboto Mono', monospace;
}

h3 {
  font-family: 'Roboto Mono', monospace;
}

CSS Font Style Demo

Thursday, September 24, 2020

CSS Layout



body {
  background-color: #f1f1f1;
  margin: 0;
}

h1 {
  color: #1b262c;
}

hr {
  border-style: none;
  border-top-style: dotted;
  border-color: grey;
  border-width: 5px;
  width: 5%;
}

table {
  text-align: justify;
}

.anchor-nav {
  background-color: #f4fafe;
  padding-top: 20px;
  padding-left: 20px;
  margin-top: -16px;
}

.anchor {
  font-size: 16px;
  font-weight: normal;
}

.top-container {
  background-color: #f4fafe;
  padding-top: 100px;
  margin-top: -20px;
  text-align: center;
}

.middle-container {
  margin-top: 30px;
  text-align: center;
}

.bottom-container {
  margin-top: 20px;
  text-align: center;
}

.bottom-container {
  margin-top: 20px;
  text-align: center;
}

.footer-container {
  margin-top: 40px;
  text-align: center;
}

.bottom-cloud {
  position: absolute;
  right: 60%;
  top: 110px
}

.top-cloud {
  position: absolute;
  right: 500px;
  top: 250px;
}

.iam {
  font-size: 20px;
}

.jsnamr {
  width: 200px;
}

.jsnamr:hover {
  padding: 25px;
  transform: scale(1.1);
}

#heading {
  font-size: 35px;
  font-family: Noto Sans, sans-serif;
}

CSS Layout Demo

HTML Divs



<body>
<!--Div Tag-->
  <div class="anchor-nav">
    <p><h2>About | <a href="hobbies.html">My Hobbies</a> | <a href="contact me.html">Contact Me</a></h2></p>
  </div>
  <!--Div Tag-->
  <div class="top-container">
  <table cellspacing="20">
    <tr>
      <td><img class="jsnamr" src="https://raw.githubusercontent.com/jsnamr/Github-Pages/gh-pages/My-Site/HTML/Image%20Elements/Images/GitMe-1.png" alt="jsnamr site"></td>
      <td>
        <h1 id="heading">JSNAMR</h1>
        <p><strong>Udemy Student</strong><br>
          <a href="https://www.udemy.com/course/the-complete-web-development-bootcamp/"><em>The Complete 2020 Web Development Bootcamp</em></a>
        </p>
        <p>I am an Beginner Web Developer. I am a fan of web development, programming, and Coding.</p>
        <p><strong></strong>"while not succeed try. ."</strong> <em>while(!(succeed = try ()));</em></p>
      </td>
    </tr>
  </table>
  <hr>
</div>
<!--Div Tag-->
<div class="middle-container">
  <h3>Projects</h3>
  <ul>
    <li><i class="fa fa-github" aria-hidden="true"></i> <a href="https://github.com/jsnamr/WebFundamentals">Github</a> - Discover, share, and build better software.</li>
    <li><i class="fa fa-android" aria-hidden="true"></i> <a href="https://developer.android.com/studio">Android</a> - Learning android application development.</li>
    <li><i class="fa fa-gamepad" aria-hidden="true"></i> <a href="https://www.youtube.com/channel/UCyFWSK_NPUSELF8xglrhT-A">Video Game</a> - Play Retro Classic Games of Yesterday.</li>
  </ul>
  <hr>
</div>
<!--Div Tag-->
<div class="bottom-container">
  <h3>Skills</h3>
  <table cellspacing="10">
    <tr>
      <td>
        <table>
          <tr>
            <td>Tech Support</td>
            <td>✪✪✪✪✪</td>
          </tr>
          <tr>
            <td>Android Development</td>
            <td>✪✪✪✪</td>
          </tr>
          <tr>
            <td>Web Development</td>
            <td>✪✪✪</td>
          </tr>
          <tr>
            <td>Photo Editing</td>
            <td>✪✪</td>
          </tr>
        </table>
      </td>
      <td>

      </td>
    </tr>
  </table>
</div>
</body>

Tuesday, September 22, 2020

CSS Selectors



/*TAG SELECTOR*/
body {
  background-color: #F1F1F1;
}

h1 {
 color: #3282b8;
}

hr {
  border-style: none;
  border-top-style: dotted;
  border-color: grey;
  border-width: 5px;
  width: 5%;
}

/*CLASS SELECTOR*/
.jsnamr:hover {
  padding: 25px;
  transform: scale(1.1);
}

/*ID SELECTOR*/
#heading {
  font-size: 35px;
  font-family: Noto Sans, sans-serif;
}

External CSS



<head>
  <!--External CSS Link Tag-->
  <link rel="stylesheet" href="/css/styles.css">
</head>

External CSS Link Demo

Sunday, September 20, 2020

Internal CSS


<head>
  <!-- Internal CSS -->
    <style>
        body {
            background-color: #000;
            color: #fff;
            font-family: 'Arial', sans-serif;
        }

        h1 {
            color: #fff;
        }

        hr {
            border-style: none;
            border-top-style: dotted;
            border-color: grey;
            border-width: 5px;
            width: 5%;
        }

        fa {
            color: white;
        }

        </style>
</head>

Internal CSS Demo

Saturday, September 19, 2020

Inline CSS



<!--Inline CSS-->
<body style="background-color: #000; color: #fff; font-family: 'Arial', sans-serif;">
  <table cellspacing="20">
    <tr>
      <td><img src="https://raw.githubusercontent.com/jsn01000111/site-demo/gh-pages/html/image%20elements/Images/git-black.png" alt="jsn010 site"></td>
      <td><h1><a href="https://github.com/jsn01000111" style="color: #fff; font-size:32px;">JSN010</a></h1>
      <p><em><strong><a href="https://www.udemy.com/">Udemy</a></strong> Web Development Bootcamp Student.</em></p>
      <p>About <a href="hobbies.html">My Hobbies</a> <a href="contact me.html">Contact Me</a></p>
      <p>I am an Beginner Web Developer. I am a fan of web development, programming, and Coding.</p>
      <p><strong></strong>"while not succeed try. ."</strong> <em>while(!(succeed = try ()));</em></p></td>
    </tr>
  </table>
  <hr>
  <h3>Projects</h3>
  <ul>
    <li><i class="fa fa-github" style="color:white;" aria-hidden="true"></i> <a href="https://github.com/jsn01000111/WebFundamentals">Github</a> - Discover, share, and build better software.</li>
    <li><i class="fa fa-android" aria-hidden="true"></i> <a href="https://developer.android.com/studio">Android</a> - Learning android application development.</li>
  </ul>
  <hr>
  <h3>Skills</h3>
<table cellspacing="10">
  <tr>
    <td>
      <table>
        <tr>
          <td>Tech Support</td>
          <td>✪✪✪✪✪</td>
          </tr>
          <tr>
            <td>Android Development</td>
            <td>✪✪✪✪</td>
          </tr>
          <tr>
            <td>Web Development</td>
            <td>✪✪✪</td>
          </tr>
          <tr>
            <td>Photo Editing</td>
            <td>✪✪</td>
          </tr>
      </table>
    </td>
    <td>

    </td>
  </tr>
</table>
</body>

Inline CSS Demo

Friday, September 18, 2020

HTML Forms



  <body>
   <!-- Forms -->
    <h1>Get in Touch</h1>
    <h2>Contact Me</h2>
    <hr>
    <form action="mailto:jsn01000111@gmail.com" method="post" enctype="text/plain">
      <label>Your Name:</label>
      <input type="text" name="Name" value=""><br>
      <label>Your Email:</label>
      <input type="email" name="Email Address" value=""><br>
      <label>Your Message:</label><br>
      <textarea name="Message" rows="10" cols="30"></textarea><br>
      <input type="submit" name="">
    </form>
  </body>

Forms Demo

Coding Web Development

Monday, September 28, 2020

CSS Stylised

Saturday, September 26, 2020

CSS Sizing

CSS Font Style

Thursday, September 24, 2020

CSS Layout

HTML Divs

Tuesday, September 22, 2020

CSS Selectors

External CSS

Sunday, September 20, 2020

Internal CSS

Saturday, September 19, 2020

Inline CSS

Friday, September 18, 2020

HTML Forms

Tags