<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{background-color:#d6edff;}
.fly{
     height:100%;
     width:100%;
     position:absolute;
     top:0;
     left:0;
}
.fly2{
     height:100%;
     width:100%;
     position:absolute;
     top:170%;
     left:0;
     z-index:-1;
}
.fly3{
     height:100%;
     width:100%;
     position:absolute;
     z-index:-2;
     top:240%;
     left:0;
}
.fly4{
     height:100%;
     width:100%;
     position:absolute;
     top:420%;
     left:0;
}
.fly5{
     height:100%;
     width:100%;
     position:absolute;
     top:380%;
     left:0;
}
.fly6{
     height:100%;
     width:100%;
     position:absolute;
     top:650%;
     left:0%;
}
.foot{
     height:50%;
     width:100%;
     background-color:white;
     position:absolute;
     top:720%;
     left:0%;
}
.board{
     height:115%;
     width:70%;
     border-radius:20px;
     background-image:url(boardmaths.svg);
     background-size:100%;
     position:absolute;
     top:100%;
     left:15%;
}
.title{
        font-family: 'Lora', serif;
        font-size:30px;
        position:fixed;
        top:7%;left:5%;
}  
.links{
      font-size:20px;
      position:fixed;
      top:7%;left:50%;
      z-index:5;

}
.links a{
      font-family: 'Poppins', sans-serif;
      text-decoration:none;
      color:#000;
      font-size:18px;
      display:inline-block;
      margin-left:35px;
}  
.booknow a{
          display:inline-block;
          color:blue;
          border-radius:10px;
          border:1px solid blue;
          height:40px;line-height:40px;
          width:150px;
          text-align:center;
}  
.textOne{
        width:60%;
        text-align:center;
        font-family: 'Lora', serif;
        font-size:70px;
        position:absolute;
        top:25%;left:20%;
}
.small{width:73%;display:inline-block;font-size:27px;margin-top:30px;}
.subtitle{
        width:80%;
        text-align:center;
        font-family: 'Lora', serif;
        font-size:40px;
        position:absolute;
        top:9%;left:10%;
}
.two .subtitle{font-size:30px;top:55%;}
.fly2 .textOne,.fly4 .textOne{
              top:45%;
              left:21%;
              font-size:40px;
}
.fly3 .small, .fly2 .small{
             font-family: 'Poppins', sans-serif;
             font-size:18px;
}

.fly3 .textOne{font-size:60px;top:20%;}

.small a{
        line-height:60px;
        text-decoration:none;
        color:#d6edff;
        height:60px;
        width:300px;
        border-radius:60px;
        background-image:url(timg.jpg);
        text-align:center;
        font-size:23px;
        font-family: 'Poppins', sans-serif;
        display:inline-block;
        margin-top:20px;
}
.subtitle a{
        line-height:50px;
        text-decoration:none;
        color:#000;
        height:50px;
        width:210px;
        border-radius:50px;
        border:1px solid #000;
        text-align:center;
        font-size:18px;
        font-family: 'Poppins', sans-serif;
        display:inline-block;
        margin-top:20px;
}
.course1{
        height:80%;
        width:26%;
        background-color:rgba(255,255,255,1);
        box-shadow:0px 3px 10px rgba(0,0,0,0.3);
        border-radius:10px;
        position:absolute;
        top:50%;left:37%;
        overflow:hidden;
}
.course2{
        height:80%;
        width:26%;
        background-color:rgba(255,255,255,1);
        box-shadow:0px 3px 10px rgba(0,0,0,0.3);
        border-radius:10px;
        position:absolute;
        top:55%;left:9%;
        overflow:hidden;
}  
.course3{
        height:80%;
        width:26%;
        background-color:rgba(255,255,255,1);
        box-shadow:0px 3px 10px rgba(0,0,0,0.3);
        border-radius:10px;
        position:absolute;
        top:60%;right:9%;
        overflow:hidden;
} 
.feature1{
        height:70%;
        width:30%;
        position:absolute;
        top:55%;left:20%;
}
.feature2{
        height:70%;
        width:30%;
        position:absolute;
        top:55%;right:20%;
}
.feature3{
        height:70%;
        width:30%;
        position:absolute;
        top:120%;left:20%;
}
.feature4{
        height:70%;
        width:30%;
        position:absolute;
        top:120%;right:20%;
}
.feature5{
        height:70%;
        width:30%;
        position:absolute;
        top:185%;left:20%;
}
.feature6{
        height:70%;
        width:30%;
        position:absolute;
        top:185%;right:20%;
}
.fly4 .subtitle{font-size:30px;top:50%;}
.fly4 .small{font-family:ara;font-size:17px;width:100%;margin-top:13px;}
.blue{
      height:30%;width:100%;
      background-color:#d6edff;
      position:absolute;
      top:26%;left:0;
} 
.pic1{
      height:200px;
      width:200px;
      background-image:url(sun.svg);
      background-size:100%;
      position:absolute;
      right:10%;top:10%;
} 
.pic2{
      height:600px;
      width:600px;
      background-image:url(hero.png);
      background-size:100%;
      position:absolute;
      left:-8%;top:50%;
} 
.pic3{
      height:400px;
      width:420px;
      background-image:url(seed.svg);
      background-size:100%;
      position:absolute;
      top:120%;right:5%;
}
.pic4{
      height:300px;
      width:320px;
      background-image:url(sun.svg);
      background-size:100%;
      background-repeat:no-repeat;
      position:absolute;
      right:10%;top:0%;
}
.two .pic4{background-image:url(seed.svg);}
.three .pic4{background-image:url(veg.png);top:-10%}
.four .pic4{height:400px;width:420px;background-image:url(exam.svg);top:-20%;right:-3%;}
.five .pic4{background-image:url(bird.png);}
.six .pic4{background-image:url(chair.png);top:-10%}

.footer{
      font-size:28px;
      position:absolute;
      top:10%;left:20%;
}
.two .footer{left:40%;}
.three .footer{left:60%;}
.footer a{
      font-family: 'Lora', serif;
      text-decoration:none;
      color:#000;
      font-size:18px;
      display:inline-block;
      margin-top:35px;
}  
@media only screen and (max-width: 800px){
        .title{top:5%;}
        .links{display:none;}
        .textOne{font-size:45px;width:90%;left:5%;top:20%;}
        .pic2{display:block;}
        .board{height:300px;background-repeat:no-repeat;width:90%;left:5%;top:80%;}
        .fly2{top:620px;}
        .fly2 .textOne{width:100%;left:0%;}
        .fly2 .small{width:90%;font-family:'lora',serif;}
        .fly3{top:1120px;}    
        .fly3 .textOne{font-size:45px;}    
        .course1{height:60%;width:85%;left:7.5%;top:45%;}
        .course2{height:60%;width:85%;left:7.5%;top:110%}
        .course3{height:60%;width:85%;left:7.5%;top:175%}
        .subtitle .small{margin-top:30px;}
        .fly5{top:2800px;}
        .fly .textOne{width:95%;left:2.5%;}
        .fly4{top:2900px;}
        .fly4 .textOne{width:80%;left:10%;}
        .feature1 .subtitle,.feature2 .subtitle,.feature3 .subtitle,.feature4 .subtitle,.feature5 .subtitle,.feature6 .subtitle{text-align:left;}
        .feature1{height:50%;width:80%;left:10%;top:35%;}
        .feature2{height:50%;width:80%;left:10%;top:55%;}
        .feature3{height:50%;width:80%;left:10%;top:75%;}
        .feature4{height:50%;width:80%;left:10%;top:95%;}
        .feature5{height:50%;width:80%;left:10%;top:125%;}
        .feature6{height:50%;width:80%;left:10%;top:135%;}
        .pic4{display:none;}
}        
</style>
</head>
<body>
<div class="fly">
   <div class="title">ED102</div>
   <div class="links"><a href="https://www.fiverr.com/share/qxLvb5">Fiverr</a>  <a href="https://www.instagram.com/expressdesign102/">Instagram</a>  <a href="mailto:apthayes@gmail.com">Drop a line</a> <a href="https://www.behance.net/hayesapt">Behance</a> <span class="booknow"><a href="">Freebbies</a></span>  </div>
   <div class="pic2"></div>
   <div class="pic1"></div>
   <div class="notebook"></div>
   <div class="textOne">Hello,<br>I am a graphic designer.<br>
                        <span class="small">I design poster, flyer and package in a 
                                            minimalist and colorful style. <br><a href="#part1">Get started</a>
                        </span>
   </div>
   <div class="links"></div>
</div>
<div class="board"></div>
<div class="fly2" id="part1">
   <div class="textOne">Express design<br>
                        <span class="small">
                                            I always ready for new projects! Unique minimalist poster, name card and flyer
                                            can be crafted for you in under just 4 hrs. My service will be simple and
                                            fast, if you like my style please checkout my fiverr gig and drop me a line.
                        </span>
   </div>
</div>

<div class="fly3">
    <div class="pic3"></div>
    <div class="textOne">What may I do for you?</div>
    <div class="course1">
       <div class="blue"></div>
       <div class="subtitle">Design
              <span class="small"><br><b>Only 3.8* pounds<br></b>Great offer, get your poster design done in 4 pounds.</span>
       </div>
       <div class="two"><div class="subtitle"><span class="small">find me on fiverr</span><br>Deliver in 4hrs<br><a href="https://www.fiverr.com/share/qxLvb5">Get Started</a></div></div>
    </div>
    <div class="course2">
        <div class="blue"></div>
        <div class="subtitle">Freebies<br>
             <span class="small"><br><b>Free illustration</b> Free png illustration, abstract, natural and original. </span>
        </div>
        <div class="two"><div class="subtitle"><span class="small">download now</span><br>5 illustrations<br><a href="https://www.instagram.com/p/CRwcLcrnxHH/?utm_source=ig_web_copy_link">Lets go</a></div></div>
    </div>
    <div class="course3">
        <div class="blue"></div>
        <div class="subtitle">My work<br>
             <span class="small"><br><b>Explore my work<br></b> I easily adapt to all styles! Checkout my works.</span>
       
        </div>
        <div class="two"><div class="subtitle"><span class="small">instagram</span><br>Showcase<br><a href="www.instagram/expressdesign102">take a look</a></div></div>
    </div>
    
</div>
<div class="fly4">
   <div class="textOne">The process</div>
   <div class="feature1">
       <div class="pic4"></div>
       <div class="subtitle">1.Drop a line<br><span class="small">Message me on fiverr or send an email.</span></div>
   </div>
  <div class="feature2">
       <div class="two"><div class="pic4"></div></div>
       <div class="subtitle">2.Tell me more<br><span class="small">Please send me any texts and images that need to be on the poster.</span></div>
   </div>
   <div class="feature3">
       <div class="three"><div class="pic4"></div></div>
       <div class="subtitle">3.Color palette<br><span class="small">Choose a color palette you love, I can do it for you if you want!</span></div>
   </div>
  <div class="feature4">
       <div class="four"><div class="pic4"></div></div>
       <div class="subtitle">4.Select typography<br><span class="small">Typography, the fonts, are as important as exams.</span></div>
   </div>
   <div class="feature5">
       <div class="five"><div class="pic4"></div></div>
       <div class="subtitle">5.Craft illustration<br><span class="small">Original illustration come with abit of extra cost and time.</span></div>
   </div>
  <div class="feature6">
       <div class="six"><div class="pic4"></div></div>
       <div class="subtitle">6.Put it together<br><span class="small">Send to you in pdf or png form. Svg (source file) can be send with extra cost.</span></div>
   </div>
</div>
<div class="fly5">
    <div class="textOne">"Creativity is intelligent having fun."</div>
</div>
<div class="fly6">
   <div class="textOne">Fun fact: this page is Des + Dev by myself.</div>
</div>
<div class="foot">
   <div class="footer"><a href="https://www.fiverr.com/share/qxLvb5">Fiverr</a><br>
                       <a href="illus.html">Freebies</a><br>
                       <a href="price.html">Pricing</a><br>
            
   </div>
   <div class="two"><div class="footer"><a href="www.behance.net/hayesapt">Behance</a><br>
                       <a href="www.instagram.com/expressdesign102">instagram</a><br>
                       <a href="mailto:apthayes@gmail.com">Drop a line</a><br>
   </div></div>
   <div class="three"><div class="footer"><a href="">0798675543</a><br>
                       <a href="">102 post</a><br>
                       <a href="tel:07895564321">street, southewrk</a><br>
                       <a href="tel:07895564321">London city.</a><br>
   </div></div>
</div>
</body>
</html>