STDIO Training

45 bundles
2 files3 months ago
2

Frontend Training - CSS Practice

Frontend Training - CSS Practice

https://info.veracode.com/analyst-report-gartner-mq-appsec-testing-2019.html

index.htm

123456789101112131415161718192021222324252627282930313233343536373839404142434445<!DOCTYPE html>
<html>
  <head>
    <title>---</title>
    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="header">
      <div class="headerBox">
        <div class="logo"></div>
      </div>
    </section>

    <section class="content">
      <div class="contentBox">
        <div class="contentColLeft">Content</div>
        <div class="contentColRight">
          <div class="title">Read the Report</div>
          <div class="form">
            <div class="input">
              <label>Label</label>
              <input />
            </div>
            <div class="input">
              <!-- <label></label>
              <input /> -->
            </div>
            <div class="input">
              <!-- <label></label>
              <input /> -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="intro">
      <div class="introBox"></div>
    </section>

    <section class="footer">
      <div class="footerBox"></div>
    </section>
  </body>
</html>

style.css

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899body {
  margin: 0;
}

.header {
  width: 100%;
  height: 60px;
}

.header .headerBox {
  width: 1100px;
  height: 60px;
  margin: 0 auto 0 auto;
}

.header .logo {
  width: 150px;
  height: 40px;
  background-color: #000;
  margin-left: auto;
  margin-right: auto;
}

.content {
  width: 100%;
  display: table;

  background-image: url(bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.content .contentBox {
  width: 1100px;
  margin: 80px auto 80px auto;
  display: table;

  background-color: #f00;
}

.content .contentColLeft {
  width: 50%;
  height: 500px;
  background-color: #000;

  float: left;
}

.content .contentColRight {
  width: 50%;
  height: 500px;
  background-color: #fff;

  padding: 20px;
  box-sizing: border-box;
  float: left;
}

.contentColRight .title {
  width: 100%;
  height: 45px;
  color: #227799;

  margin-bottom: 30px;
  border-bottom: 5px solid #ddd;
}

.contentColRight .form {
  width: 100%;
  display: table;
}

.contentColRight .form .input {
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
}

.contentColRight .form .input label {
  width: 100%;
}

.contentColRight .form .input input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.intro {
  width: 100%;
  height: 60px;
  background-color: #00f;
}

.footer {
  width: 100%;
  height: 60px;
}