Cancer Aware

In this example below you will see how to do a Cancer Aware with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Fucho, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Fucho ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Cancer Aware</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--Author: Fredrick Mgbeoma 
  Portfolio - Web developer & programmer: HTML, CSS, JavaScript, PHP, Java
            Frameworks: Laravel and more
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cancer Aware</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
   <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/custom.css">
</head>
<body>
<!-- top section (navigation here) -->
<div class="header">
  <div class="section">
    <div class="nav">
      <a class="button button-primary" href="http://www.canceraware.org.ng" target="_blank">Home</a>
      <a class="button" href="http://www.canceraware.org.ng/aboutcancer" target="_blank">About Cancer</a>
      <a class="button" href="http://www.canceraware.org.ng/whatwedo" target="_blank">What we do</a>
      <a class="button" href="http://www.canceraware.org.ng/our-projects" target="_blank">Projects</a>
    </div>
    <div class="action">
    </div>
  </div>
</div>
<!-- information section -->
<div class="info">
  <div class="section">
      <h2>Are you concerned about cancer?</h2>
        <h3>The World Health Organisation says that one-third of cancers can be prevented. Another third can be effectively cured with early detection.Here are four major ways to lower the risk of developing some cancers.</h3>
  </div>
  <div class="section boxes">
    <div>
      <h3>Your Diet</h3>
      <p>Eat plenty of vegetables, fruits and whole grains. Limit foods high in fat, sugar and salt. Avoid processed meat and limit consumption of red meat.</p>
      <p class="more"><a href="http://www.canceraware.org.ng" target="_blank" class="button">More info</a></p>
    </div>
    <div>
      <h3>Physical Activity</h3>
      <p>Aim to get at least 30 minutes of moderate physical activity every day. Being physically active contributes to a healthy lifestyle which can reduce your risk of developing cancer. </p>
      <p class="more"><a href="http://www.canceraware.org.ng" class="button" target="_blank">More info</a></p>
    </div>
    <div>
      <h3>Smoking</h3>
      <p>One in three of all cancers is related to smoking. Cut out the cigarettes and reduce the risk of cancer. Also endeavour to avoid second-hand smoke; it increases the risk of lung cancer and heart disease in non-smokers.</p>
      <p class="more"><a href="http://www.canceraware.org.ng/" class="button" target="_blank">More info</a></p>
    </div>
    <div>
      <h3>Screening</h3>
      <p>Checking for cancer (or for conditions that may become cancer) in people who have no symptoms is called screening. Screening can help doctors find and treat several types of cancer early. Early detection is important because when abnormal tissue or cancer is found early, it may be easier to treat. By the time symptoms appear, cancer may have begun to spread and is harder to treat..</p>
      <p class="more"><a href="http://www.canceraware.org.ng" class="button" target="_blank">More info</a></p>
    </div>
  </div>
</div>
<!-- footer -->
<div class="footer section">
  <div class="copyright">
     <p>© 2016 Made with <span class="heart">&heartsuit;</span> by Fredrick Mgbeoma. Contents from CancerAware™ Nigeria. </p>
  </div>
  <div class="signup">
    <form class="container" action="mailto:talk@canceraware.org.ng">
      <input class="button-primary" type="submit" value="Join">
    </form>
  </div>
</div>
</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Fucho/cancer-aware-aBBZEb */
/* custom styles */

body {
  background-color: rgba(0,0,0,.8);
}

.header {
  padding: 0;
  /*background-size: contain;*/
  background: url("https://static.wixstatic.com/media/9c3ede_8b6096ecf456462d84db49a5d0725a42.jpg/v1/fill/w_842,h_560,al_c,q_85,usm_0.66_1.00_0.01/9c3ede_8b6096ecf456462d84db49a5d0725a42.jpg") 50% center / cover no-repeat;
  height: 400px;
}

.section {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}
.nav a {
  padding-left: 0;
  padding-right: 0;
}
.info {
  background-color: white;
}

.footer {
  color: white;
  padding: 30px;
}

.footer .copyright .heart {
  color: red;
}

.button {
  background-color: rgba(255,255,255,.5);
  border: none;
}
.button:hover {
  background-color: rgba(255,255,255,.3);
}
.action {
  text-align: center;
  padding-top: 37px;
}
.action h1 {
  margin: 30px 0 0 0;
  font-weight: 600;
}
.action h2 {
  margin: 0 0 20px 0;
  font-weight: 600;
}

.info h2 {
  font-size: 3.8rem;
  text-align: center;
}
.info .button {
  background-color: rgba(228, 1, 152, 1);
  border: none;
  color: white;
}

.info .button:hover {
  background-color: rgba(228, 1, 152, .6);
  border: none;
}

.info .section:first-of-type {
  padding-bottom: 0;
}
.info .section:nth-of-type(2) {
  padding-top: 0;
}

.info .section h3{
  font-size: x-large;
}

/* base css */
.nav, .boxes, .footer, .footer form {
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
}

.nav {
    -webkit-justify-content: space-between;
}

.nav a {
    width: 23%;
}

.boxes div {
    -webkit-flex: 1 1 250px;
    margin: 10px;
    border-radius: 5px;
    padding: 10px 10px 0 10px;
    background-color: rgba(0,0,0,.1);
    display: -webkit-flex;
    -webkit-flex-flow: column;
}

.boxes .more {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

.footer .copyright {
    -webkit-flex: 2 1 500px;
    margin-right: 30px;
}

.signup input[type="submit"] {
    border-radius: 4px;
    padding: 0 10px;
    width: 150px;
    border: none;
}

@media (max-width: 500px) {
    .nav {
        -webkit-flex-flow: column;
    }

    .nav a {
        width: 100%;
        margin-top: 2px;
    }

    .header .section .nav {
        display: none;
    }

}

.info .section h3 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    font-weight: 400;
}

Comments