What's new

Closed Help po

Status
Not open for further replies.

Jmrie_

in memoriam 1995-2021
Joined
Aug 21, 2017
Posts
104,956
Solutions
1
Reaction
53,216
Points
27,061
Age
28
Pa check po kasi pag cp ako nag cocode di responsive yung output ko e

HTML:
<head>
  <title>Professional Resume</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">
  <style>
    html {
      background-color: #444;
      padding: 0 1em;
    }

    body {
      background-color: #FFF;
      font-family: 'Lato', sans-serif;
      margin: 1em auto;
      max-width: 50em;
      height: 52.625em;
    }

    #section-left {
      width: 35%;
      float: left;
      height: 100%;
      background-color: #fc7a70;
      color: #fff;
      text-align: center;
    }

    #section-left .section {
      margin-top: 40%;
      padding: 1em;
    }

    #section-left .section .logo {
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0 auto;
      background-image:
        url('https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/40152267_255705208606329_5243992362169925632_n.jpg?_nc_cat=0&oh=79fc0a006e5402e3a59a5500282a6b4e&oe=5C38D07F');
    }

    .intro hr {
      width: 4em;
      display: block;
      height: 2px;
      border: 0px;
      border-top: 2px solid;
    }

    .dob {
      text-decoration: overline underline;
    }

    .intro .content {
      margin-bottom: 20px;
    }

    #contact {
      margin-top: 45px;
    }

    h1 {
      font-family: 'Open Sans', sans-serif;
      text-transform: uppercase;
    }

    #section-right {
      width: 65%;
      float: right;
      /*height: 100%;*/
    }

    #section-right .section {
      margin: 0 0 30px 0;
    }

    .wrapper {
      padding: 2em;
    }

    .fa {
      margin-right: 15px;
    }

    .wrapper .title {
      color: #fc7a70;
      font-size: 1.3em;
      font-variant: small-caps;
      letter-spacing: 0.1em;
      font-weight: bold;
      border-bottom: 2px solid #f2f2f2;
    }

    a:link {
      color: #fff;
      text-decoration: none;
    }

    a:visited {
      color: #fff;
      text-decoration: none;
    }

    a:hover {
      color: #fff;
      text-decoration: none;
    }

    a:active {
      color: #fff;
      text-decoration: none;
    }

    h2 {
      text-transform: uppercase;
      font-size: 1em;
      }
      h3 {
        font-size: 0.8em;
        text-transform: uppercase;
        font-weight: normal;
      }

      .num{
border:3px solid #fff;
padding:1px;
      }
      .name{
border:3px solid #fff;
padding:1px;
      }
    </style>
    </head>
    
    <body>
      <div id="section-left">
        <div class="section intro">
          <div class="logo">
    
    
          </div>
          <h1 class="name">y.g c</h1>
          <div class="content">
            <span class="dob">2 Jun 1995</span>
            <br>
            <span class="intro">I.t student</span>
            <br>
            <span class="title">my Resume</span>
          </div>
          <hr>
          <div id="contact">
    
            <span class="num">966xxxxxx</span>
    
            <div class="email">
              <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
              <a href="vnie1455@gmail.com">vnie1455@gmail.com</a>
            </div>
            <div class="web">
              <i class="fa fa-link" aria-hidden="true"></i>
              <a href="www.ilarde.com</a>
            </div>
          </div>
        </div>
      </div>
    
      <div id="section-right">
        <div class="wrapper">
          <div class="section">
            <div class="title">
              <i class="fa fa-user" aria-hidden="true"></i>
              Profile
            </div>
            <p>I am a novice coder</p>
          </div>
    
          <div class="section">
            <div class="title">
              <i class="fa fa-pencil" aria-hidden="true"></i>
              Experience
            </div>
            <div class="content">
              <h2>student </h2>
              <h3>im not currently working</h3>
              <ul>
                <li>im simply coding</li>
                <li>modifying simple apps</li>
              </ul>
            </div>
    
            <div class="content">
              <h2>Web Developer</h2>
              <h3>Company | AUG 2018 &raquo; Current</h3>
              <ul>
                <li>student coder</li>
                <li>student coder</li>
              </ul>
            </div>
          </div>
    
          <div class="section">
            <div class="title">
              <i class="fa fa-book" aria-hidden="true"></i>
              Education
            </div>
            <p>Im still  studying from cmu</p>
    
          </div>
    
          <div class="section">
            <div class="title">
              <i class="fa fa-book" aria-hidden="true"></i>
              Skills
            </div>
            <ul>
              <li>Programming</li>
              <li>Photo Editing</li>
              <li>android modder</li>
            </ul>
          </div>
    
          <div class="section">
            <div class="title">
              <i class="fa fa-trophy" aria-hidden="true"></i>
              Awards
            </div>
            <div class="content">
              <h2>none</h2>
              <h3>none</h3>
              <span class="date">2018</span>
            </div>
          </div>
        </div>
      </div>
    </body>
    
    </html>


Paki screenshot po sa mga naka p.c if my sublime kayo or notepad gusto ko lang makita yung output
 
Laptop yan Teh. pag sa CP possible sirain nya. dapat may code ka na auto resolution. madalas header yun e no. kaso limot ko na Teh. Hehe. Need ko review pa Chie..
 
Laptop yan Teh. pag sa CP possible sirain nya. dapat may code ka na auto resolution. madalas header yun e no. kaso limot ko na Teh. Hehe. Need ko review pa Chie..
Nasira na nga po e haha sa cp ko na lang icode siguro hahays malas
 
Kalikutin ko mga created HTML ko dati. may script lang ako na pinepaste dati. tapos kahit saang browser at resolution na sya. haha. Good Luck Chiee. Kaya mo yan Teh. :)
 
upload_2018-8-31_12-37-16.png
 

Attachments

-Ateh-

You made the correct mark and CSS rules, it just happened your device does not recognize you are in a mobile device. To correct this, you may add meta tag shown below to your head section.

HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">

If you wish to go in-depth, please see You do not have permission to view the full content of this post. Log in or register now.

Then, make sure to add media queries for your target device width. By any chance, could you show me your desired layout for both mobile and web design?
 
Naka Bootstrap, lumelevel up na hahaha... Wala pa nga ako dyan eh

--PHC-Caserol--

This is for You do not have permission to view the full content of this post. Log in or register now. not for the Bootstrap CSS framework.
- The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More options.

Code:
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

I hope this will clear the confusion for starters.
 
-Ateh-

You made the correct mark and CSS rules, it just happened your device does not recognize you are in a mobile device. To correct this, you may add meta tag shown below to your head section.

HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">

If you wish to go in-depth, please see You do not have permission to view the full content of this post. Log in or register now.

Then, make sure to add media queries for your target device width. By any chance, could you show me your desired layout for both mobile and web design?
Not today i dont have my css code and thats not my code
 
Status
Not open for further replies.

Similar threads

Back
Top