[Project] Build a landing page

-

 https://codepen.io/wincooo/pen/oNEBpoR



--------------------- HTML ---------------------------

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id="background">
    <img src="https://images.unsplash.com/photo-1553095066-5014bc7b7f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8d2FsbCUyMGJhY2tncm91bmR8ZW58MHx8MHx8&w=1000&q=80" class="stretch" alt="" />
</div>


<head>
  <link rel="stylesheet" href="styles.css">
</head>

  <header id="header">
    
  <img 
       src="https://i.pinimg.com/736x/8f/47/a5/8f47a558f0c764765bed1e25933d4d12--jewelry-logo-letter-logo.jpg" 
       alt="J-logo" 
       border="0"  ''' what would be around the picture '''
       id="header-img" ''' something that you can reference on CSS'''
       width="300px";
       >
   
  <nav id="nav-bar">


      <a  class="nav-link" href="#blog"> Blog </a> &nbsp; &nbsp; &nbsp;

''' nbsp : space '''
      
      <a class="nav-link" href="#portfolio"> Portfolio </a> &nbsp; &nbsp; &nbsp;
      
      <a class="nav-link" href="#mystory"> My Story </a> &nbsp; &nbsp; 

              
  </nav>
  
 </header>


<body>

  <div id="shop-text" style="width: 100%; height: auto; overflow: hidden">
    
  <img src="https://www.ef.com/blog/wp-content/uploads/2017/09/Visit_Seoul_web.jpg" alt="J_Blog" width= "30%";>
    
    </div>
  
    <section id="blog"> ''' #blog correspond to section ID here '''
    <a id="J_header_a" target="_blank" href="https://winco0.blogspot.com/"> 
      <h2> Blog </h2> </a>
      
  
    
  </section>

  

  
  
  <section id="portfolio">
    
    <div id="youtube-logo" align="center" style="width: 100%; height: auto; overflow: hidden; align">
 
   <a id="j_YouTube_a" target="_blank" href="https://www.youtube.com"> 
   <img src="https://pngimg.com/uploads/youtube/youtube_PNG2.png" alt="youtube-logo" width= "10%";>
   </a>
    <h2> YouTube Videos </h2>
          <p> See my videos on youtube.com</p>
    </div>
    
    <div id="phone-logo" align="center" style="width: 100%; height: auto; overflow: hidden">
<br>
<br> 
<br>
<br> 
<br>
<br> 
<br>
<br> 
   <a id="j_GitHub_a" target="_blank" href="https://github.com/Wincooo/"> 
    <img src="https://i.imgur.com/6nLiGv3.png" 
    alt="phone-logo" width= "10%";>
   </a>
      
    <h2> Software Projects </h2> 
   <p> See my projects on github.com/wincooo</p>
    </div>
    
  </section>

  

 <section id="mystory">
   <div id="storylayover" align="left" style="width: 100%; overflow: hidden">
 
    
     <iframe 
             id="video" 
             align="right"
             width="560" 
             height="315" 
             src="https://www.youtube.com" 
             frameborder="0" 
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
             allowfullscreen>
     </iframe>
        <h3> Hi my name is Jay  </h3>
       
     <h2> <i> How would I become an web developer? </i> <h2>
   
   </div>
  </section>
 
</body>

<footer>
<div id="storylayover" align="left" style="width: 100%; overflow: hidden">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input 
             id="text" 
             type="text" 
             name="text" 
             placeholder="Have a question?" 
             class="text" 
             required> 
      </input>
<br>
  <input 
             id="email" 
             type="email" 
             name="email" 
             placeholder="What email would you like to be responded to?" 
             class="email" 
             required> 
      </input>
  <br>
      <input 
             id="submit" 
             type="submit" 
             value="Ask Now" 
             class="submit">
       </input>
  </form>
</div>  
  
</footer>

--------------------- CSS ---------------------------

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&display=swap');

body {
  font-family: 'nunito';
  color: white;
  background-color: black;
  line-height: 1.4;
  width: 100%;
  font-size: 1vw;
}

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

h1 {
  font-size: 1.4vw;
  color: white;
}

h2 {
  font-size: 2vw;
  color: white;
}

h3 {
  font-size: 3vw;
  color: white;
}

a {
  color: white;
  text-decoration: none;
}

a:hover{ 
  text-decoration: underline;
  filter: brightness(150%);
  filter: drop-shadow(8px 8px 10px white);
}


header {
  position:        fixed;
  top: 0px;
  width: 100%;
  height: 19px;
  padding: 25px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  opacity: 0.7;
  
  z-index:5;
}

nav{
  position:       
  fixed;
  top: 0px;
}

#blog {
  margin-left: 13%;
  margin-top: -30%;
  display: flex; 
  justify-content: space-between;
  width: 75%;
}


#portfolio {
  margin-left: 27%;
  margin-top: 45%;
  display: flex; 
  justify-content: space-between;
  width: 50%;
}


#phone-logo:hover {
  filter: brightness(150%);
  filter: drop-shadow(8px 8px 10px white);
}

#youtube-logo:hover {
  filter: brightness(150%);
  filter: drop-shadow(8px 8px 10px white);
}

#J_header_a:hover {
  filter: brightness(150%);
  filter: drop-shadow(8px 8px 10px white);
}

#mystory {
  margin-left: 0;
  margin-top: 20%;
  display: flex; 
  justify-content: space-between;
  width: 100%;
}

#storylayover {
  background-color: black;
  width: 100%;
  opacity: 0.9;
}
    

.submit { /* Thanks @yuhomyan for the CSS button effect */
  display: block; 
  width: 51.5%;
  height: 3vw;
  margin-top: 0vw;
  margin-bottom: 1vw;
  font-size: 1.5vw;
  
  color: white;
  border-radius: 5px;
  cursor: pointer;
  
  background: #00aced;
  box-shadow:  0 0 5px #00aced,  0 0 8px #00aced;
  padding: 0;
  border: none;
  z-index: 2;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}


.submit:hover{
  background-color: transparent;
  color: #00aced;
  box-shadow: 0 5px 3px -3px #00aced, 0 -5px 3px -3px #00aced,
    0 5px 3px -3px #00aced, 0 -5px 3px -3px #00aced;
}

  .email {
    display: block; 
    width: 50%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }

  .text {
    display: block; 
    width: 50%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }


@media only screen and (max-width: 800px){
  body {
  flex-wrap: wrap;
  }
  
  #header-img {
  width: 30vw;
  }
  
  .nav-link {
  font-size: 2.5vw; 
  
  }

  #video {
   width: 250px;
   height: auto; 
  }
  
  
  .submit {
    width: 20%;
    padding: 0.75rem;
    background: royalblue;
    color: white;
    border-radius: 2px;
    cursor: pointer;
  }

  .email {
    display: block; 
    width: 18.5%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }

  .text {
    display: block; 
    width: 18.5%;
    height: 2rem;
    padding: 0.25rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
  }
}

#navbar {
    position: fixed;
    top: 0px;
    width: 100%;
}​

Popular posts from this blog

[Python] Dictionary

-
This Chapter, we're going to make basic dictionary.  mondict = {     "1" : "Janunary" ,     "2" : "February" ,     "3" : "March" ,     "4" : "April" } whenever you make dictionary in python, you're going to use open and close curly brackets "{ }" Let's run  print ( mondict [ "2" ]) you get "February"  you can also use "get" function print ( mondict . get ( "2" )) you can specify default value that I wanna use if the key is not found by using get function. so when you run this print ( mondict . get ( "6" )) 6 is not on the list, you're going to get "none"  you can also pass the default value to print out  print ( mondict . get ( "6" , "invalid value" )) and you're going to get "invalid value"
Read more

[Visual Design 2/3]

-
Image
1. Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. The given markup would work well as a two-column layout, with the section and aside elements next to each other.  Let me   Give the #left item a float of left and the #right item a float of right. 2. Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It ...
Read more

[JavaScript] For loop , Function

-
Image
let fruit = prompt ( "which one you need ?" ) switch ( fruit ){   case "apple" :     console . log ( "1,000" );     break ;   case "Banana" :     console . log ( "500" );         break ;   case "Melon" :     console . log ( "2,000" );         break ;   default :     console . log ( "Sorry, We don't sell that one" ); } prompt 는  그 값의 아래는 전부 불러옴. 예를들어 Banana를 입력했을 깨 500과 그 아래 값들도 모두 불러옴. 때문에 break 를 써줘야함 default는 해당하지 않는 값을 입력했을 때 ..  Function function showError (){   alert ( "Error, Try again" ) } showError (); function sayHello ( name ){   const msg = `Hello, ${ name } ` ;   console . log ( msg ); } sayHello ( 'Mike' ); sayHello ( "Jane" ); "Hello, Mike" "Hello, Jane" function sayHello ( name ){     let msg = `Hello` ;     if ( name ){         msg += ', ' + name ;     }     console...
Read more