<div id="readability-page-1" class="page"><div>
                <div id="SE-b962470f-95dd-444d-b68c-52cc5484da63">
                            <blockquote>
                                <p id="SE-ea3ccb27-26cd-4ee9-95f8-4c8ba4f46eaa"><span id="SE-1989784a-1fac-48b0-8cdd-f80548496dee">[Web] Template Exam - Responsive Web Template "Xypo"</span></p>
                            </blockquote>
                        </div>
                <div id="SE-673f58cb-6cd9-40f5-910f-ae2b2eff26ce">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-673f58cb-6cd9-40f5-910f-ae2b2eff26ce&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTNfMTY1/MDAxNjAyNTU4ODMwNzg1.QtFJwzUpcAyF73Ia8JWxCX14wqMKegFgjvHvQcsrF1Yg.YeaMi3kr5Q_vuTC_mCO-35CtK5BseQToSv27dYxIGG4g.GIF.backsajang420/responsive-web-xypo.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTNfMTY1/MDAxNjAyNTU4ODMwNzg1.QtFJwzUpcAyF73Ia8JWxCX14wqMKegFgjvHvQcsrF1Yg.YeaMi3kr5Q_vuTC_mCO-35CtK5BseQToSv27dYxIGG4g.GIF.backsajang420/responsive-web-xypo.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDEwMTNfMTY1/MDAxNjAyNTU4ODMwNzg1.QtFJwzUpcAyF73Ia8JWxCX14wqMKegFgjvHvQcsrF1Yg.YeaMi3kr5Q_vuTC_mCO-35CtK5BseQToSv27dYxIGG4g.GIF.backsajang420/responsive-web-xypo.gif?type=w800" data-width="693" data-height="469" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-74d19cfb-f3c8-459d-83d3-afd0f36076cb">
                                    <p>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Complete Website Design Using HTML and CSS&lt;/title&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;

  &lt;script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;section id="header"&gt;
    &lt;div class="container"&gt;
      &lt;img src="images/logo.png" alt="_" class="logo"&gt;
      &lt;div class="header-text"&gt;
        &lt;h1&gt;The purpose is to&lt;br /&gt;teach, bring learning to people&lt;/h1&gt;
        &lt;span class="square"&gt;&lt;/span&gt;
        &lt;p&gt;There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
          some form, by inhected humour, or randomised words which don't look even slightly believable.&lt;/p&gt;
        &lt;button class="common-btn"&gt;Read More&lt;/button&gt;
        &lt;div class="line"&gt;
          &lt;span class="line-1"&gt;&lt;/span&gt;&lt;br /&gt;
          &lt;span class="line-2"&gt;&lt;/span&gt;&lt;br /&gt;
          &lt;span class="line-3"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;nav id="sideNav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#header"&gt;HOME&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#about"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#features"&gt;FEATURES&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#courses"&gt;COURSES&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#offer"&gt;OFFER&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;img src="images/menu.png" alt="_" id="menuBtn"&gt;

  &lt;!-- aabout --&gt;

  &lt;section id="about"&gt;
    &lt;div class="about-left-col"&gt;
      &lt;img src="images/about.png" alt="_"&gt;
    &lt;/div&gt;
    &lt;div class="about-right-col"&gt;
      &lt;div class="about-text"&gt;
        &lt;h1&gt;About Us&lt;/h1&gt;
        &lt;span class="square"&gt;&lt;/span&gt;
        &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
          College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
          and going through the cites of the word in classical literature, discovered the undoubtable source.&lt;/p&gt;
        &lt;br /&gt;&lt;br /&gt;
        &lt;div class="line"&gt;
          &lt;span class="line-1"&gt;&lt;/span&gt;&lt;br /&gt;
          &lt;span class="line-2"&gt;&lt;/span&gt;&lt;br /&gt;
          &lt;span class="line-3"&gt;&lt;/span&gt;
        &lt;/div&gt;

        &lt;h2&gt;"Learning is not attained by chance, it must be sought for with ardor and attended to with diligence"&lt;/h2&gt;
        &lt;h3&gt;----Abigail Adams&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- features --&gt;
  &lt;section id="features"&gt;
    &lt;div class="feature-row"&gt;
      &lt;div class="feature-col"&gt;
        &lt;img src="images/pic-1.png" alt="_"&gt;
        &lt;h4&gt;Learn Anywhere&lt;/h4&gt;
        &lt;p&gt;Switch between your computer, tablet or mobile device.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="feature-col"&gt;
        &lt;img src="images/pic-2.png" alt="_"&gt;
        &lt;h4&gt;Expert Teachers&lt;/h4&gt;
        &lt;p&gt;Learn from industry experts who are passionate about teaching.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="feature-col"&gt;
        &lt;img src="images/pic-3.png" alt="_"&gt;
        &lt;h4&gt;Unlimted Access&lt;/h4&gt;
        &lt;p&gt;Choose what you'd like to learn from our extensive subscription library.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="feature-btn"&gt;
      &lt;div class="line"&gt;
        &lt;span class="line-1"&gt;&lt;/span&gt;&lt;br /&gt;
        &lt;span class="line-2"&gt;&lt;/span&gt;&lt;br /&gt;
        &lt;span class="line-3"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;button class="common-btn"&gt;Start Free Trial&lt;/button&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- courses --&gt;
  &lt;section id="courses"&gt;
    &lt;div class="container course-row"&gt;
      &lt;div class="course-left-col"&gt;
        &lt;div class="course-text"&gt;
          &lt;h1&gt;Browse Our Top&lt;br /&gt;courses&lt;/h1&gt;
          &lt;span class="square"&gt;&lt;/span&gt;
          &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
            Latin
            literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden&lt;/p&gt;
          &lt;button class="common-btn"&gt;View All Courses&lt;/button&gt;
          &lt;div class="line"&gt;
            &lt;span class="line-1"&gt;&lt;/span&gt;&lt;br /&gt;
            &lt;span class="line-2"&gt;&lt;/span&gt;&lt;br /&gt;
            &lt;span class="line-3"&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="course-right-col"&gt;
        &lt;img src="images/course.png" alt="_"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</p>
                                </div>                <div id="SE-4b15207d-8450-4821-a1d1-4902956fa5bd">
                                    <p>  &lt;!-- Offer --&gt;
  &lt;section id="offer"&gt;
    &lt;div class="about-left-col"&gt;
      &lt;img src="images/offer.png" alt="_"&gt;
    &lt;/div&gt;
    &lt;div class="about-right-col"&gt;
      &lt;div class="about-text"&gt;
        &lt;h1&gt;Limitless learning,&lt;br /&gt;limitless possibilities&lt;/h1&gt;
        &lt;span class="square"&gt;&lt;/span&gt;
        &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
          College in Virginia.&lt;/p&gt;
        &lt;button class="common-btn"&gt;Start Free Trial&lt;/button&gt;
        &lt;div class="line"&gt;
          &lt;span class="line-1"&gt;&lt;/span&gt;&lt;br /&gt;
          &lt;span class="line-2"&gt;&lt;/span&gt;&lt;br /&gt;
          &lt;span class="line-3"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- Contact --&gt;
  &lt;section id="contact"&gt;
    &lt;div class="container contact-row"&gt;
      &lt;div class="contact-left-col"&gt;
        &lt;h1&gt;Sign Up to join our&lt;br /&gt;learning community&lt;/h1&gt;
        &lt;form&gt;
          &lt;input type="text" placeholder="Enter Name"&gt;
          &lt;input type="email" placeholder="Enter Email"&gt;
          &lt;input type="password" placeholder="Enter Password"&gt;
          &lt;div class="btn-box"&gt;
            &lt;button class="common-btn"&gt;Sign Up&lt;/button&gt;
            &lt;button class="common-btn"&gt;Start Free Trial&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;div class="line"&gt;
          &lt;span class="line-1"&gt;&lt;/span&gt;&lt;br /&gt;
          &lt;span class="line-2"&gt;&lt;/span&gt;&lt;br /&gt;
          &lt;span class="line-3"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="contact-right-col"&gt;
        &lt;img src="images/contact.png" alt="_"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- Footer --&gt;
  &lt;section id="footer"&gt;
    &lt;div class="container footer-row"&gt;
      &lt;hr /&gt;
      &lt;div class="footer-left-col"&gt;
        &lt;div class="footer-links"&gt;
          &lt;div class="link-title"&gt;
            &lt;h4&gt;Product&lt;/h4&gt;
            &lt;small&gt;Our Plan&lt;/small&gt;&lt;br /&gt;
            &lt;small&gt;Free Trial&lt;/small&gt;
          &lt;/div&gt;
          &lt;div class="link-title"&gt;
            &lt;h4&gt;About Us&lt;/h4&gt;
            &lt;small&gt;Request Demo&lt;/small&gt;&lt;br /&gt;
            &lt;small&gt;FAQs&lt;/small&gt;
          &lt;/div&gt;
          &lt;div class="link-title"&gt;
            &lt;h4&gt;Support&lt;/h4&gt;
            &lt;small&gt;Features&lt;/small&gt;&lt;br /&gt;
            &lt;small&gt;Contact Us&lt;/small&gt;
          &lt;/div&gt;
          &lt;div class="link-title"&gt;
            &lt;h4&gt;Explore&lt;/h4&gt;
            &lt;small&gt;Find a nonprofit&lt;/small&gt;&lt;br /&gt;
            &lt;small&gt;Coporate Solution&lt;/small&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer-right-col"&gt;
        &lt;div class="footer-info"&gt;
          &lt;div class="copyright-text"&gt;
            &lt;small&gt;support@Xypo.com&lt;/small&gt;&lt;br /&gt;
            &lt;small&gt;copyright 2020 Xypo&lt;/small&gt;
          &lt;/div&gt;
          &lt;div class="footer-logo"&gt;
            &lt;img src="images/logo.png" alt="_"&gt;
            &lt;button class="common-btn"&gt;English&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- social-icons --&gt;
  &lt;div class="social-icons"&gt;
    &lt;img src="images/facebook.png" alt="_"&gt;
    &lt;img src="images/instagram.png" alt="_"&gt;
    &lt;img src="images/twitter.png" alt="_"&gt;
    &lt;img src="images/linkedin.png" alt="_"&gt;
  &lt;/div&gt;</p>
                                </div>                <div id="SE-eed8e9a2-65da-40ee-bbe3-6d6190931e91">
                                    <p>  &lt;script&gt;
    var menuBtn = document.getElementById("menuBtn");
    var sideNav = document.getElementById("sideNav");

    sideNav.style.right = "-250px";
    menuBtn.onclick = function () {
      if (sideNav.style.right === "-250px") {
        sideNav.style.right = "0";
      } else {
        sideNav.style.right = "-250px";
      }
    }
  &lt;/script&gt;

  &lt;script&gt;
    var scroll = new SmoothScroll('a[href*="#"]', {
      speed: 1000,
      speedAsDuration: true
    });
  &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</p>
                                </div>                                <div id="SE-2d8fe47e-856d-4e47-aaa5-b49cecf4b662">
                                    <p>* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#header {
  height: 100vh;
  background-image: url(images/background.png);
  background-position: center;
  background-size: cover;
}
.container {
  margin-right: 100px;
  margin-left: 100px;
}
.logo {
  margin-top: 30px;
  width: 100px;
}
.header-text {
  max-width: 350px;
  margin-top: 140px;
}
h1 {
  font-size: 34px;
}
.square {
  height: 12px;
  width: 12px;
  display: inline-block;
  background: #f67c92;
  margin: 15px 0;
}
.common-btn {
  padding: 18px 40px;
  background: transparent;
  outline: none;
  border: 2px solid #f67c92;
  font-weight: bold;
  cursor: pointer;
}
p {
  font-size: 15px;
  line-height: 18px;
  color: #777;
}
.header-text button {
  margin-top: 20px;
  margin-bottom: 60px;
}
.line-1 {
  width: 15px;
  height: 15px;
  background: #f67c92;
  display: inline-block;
}
.line-2 {
  width: 80px;
  height: 1px;
  background: #f67c92;
  display: inline-block;
}
.line-3 {
  width: 60px;
  height: 1px;
  background: #f67c92;
  display: inline-block;
}
.line {
  line-height: 8px;
}

#sideNav {
  width: 250px;
  height: 100vh;
  position: fixed;
  right: -250px;
  top: 0;
  background: #f67c92;
  z-index: 2;
  transition: 0.5s;
}
nav ul li {
  list-style: none;
  margin: 50px 20px;
}
nav ul li a {
  text-decoration: none;
  color: #fff;
}

#menuBtn {
  width: 50px;
  position: fixed;
  right: 65px;
  top: 35px;
  z-index: 2;
  cursor: pointer;
}

/* ---- about ---- */
#about,
#offer {
  padding: 100px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.about-left-col {
  flex-basis: 50%;
}
.about-left-col img {
  width: 100%;
}
.about-right-col {
  flex-basis: 50%;
  text-align: right;
}
.about-text {
  max-width: 500px;
  margin-right: 100px;
  display: inline-block;
}
.about-text h2 {
  margin: 50px 0 10px;
  font-size: 28px;
  font-style: italic;
}
.about-text h3 {
  font-size: 20px;
  font-style: italic;
  color: #797979;
}

/* ---- features ---- */
#features {
  padding-top: 50px;
  padding-bottom: 50px;
}
.feature-row {
  width: 80%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.feature-col {
  flex-basis: 25%;
  text-align: center;
}
.feature-col img {
  width: 100px;
}
.feature-col h4 {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 400;
}
.feature-btn {
  margin: 80px auto 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.feature-btn .line {
  text-align: right;
  display: inline-block;
  margin-right: 25px;
}

/* ---- courses ---- */
#courses {
  padding: 100px 0;
}
.course-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.course-left-col,
.course-right-col {
  flex-basis: 50%;
}
.course-text {
  max-width: 350px;
}
.course-text button {
  margin: 30px 0;
}
.course-right-col img {
  width: 100%;
}

/* ---- offer ---- */
#offer button {
  margin: 30px 0;
}

/* ---- contact ---- */
.contact-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.contact-left-col,
.contact-right-col {
  flex-basis: 50%;
}
.contact-right-col img {
  width: 100%;
}
form {
  max-width: 350px;
  margin: 30px 0;
}
form input {
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 5px;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  border: 2px solid #fab3c4;
}
.btn-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.btn-box button {
  flex-basis: 48%;
  padding: 18px 0;
}

/* ---- footer ---- */
#footer {
  padding: 50px 0 30px;
}
hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #f67c92;
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-left-col {
  flex-basis: 50%;
  margin-top: 60px;
}
.footer-right-col {
  flex-basis: 35%;
}
.footer-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.link-title h4 {
  color: #fab3c4;
  margin-bottom: 20px;
}
.link-title small {
  font-size: 13px;
  color: #777;
}
.footer-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-logo img {
  width: 100px;
}
.footer-logo button {
  padding: 12px 38px;
  margin-top: 20px;
  font-size: 10px;
}
.copyright-text,
.footer-logo {
  flex-basis: 40%;
}

/* ---- social-icons ---- */
.social-icons {
  width: 50px;
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.social-icons img {
  display: block;
  width: 20px;
  margin: 0 auto 20px;
  cursor: pointer;
}</p>
                                </div>                <div id="SE-42406ffa-d33f-4111-89da-2de0b1844a11">
                                    <p>@media only screen and (max-width: 770px) {
  #header {
    background-image: none;
  }
  .container {
    margin-right: 50px;
    margin-left: 50px;
  }
  .logo {
    margin-top: 27px;
    width: 70px;
  }
  .header-text {
    margin-top: 100px;
  }
  h1 {
    font-size: 25px;
  }
  #menuBtn {
    width: 40px;
    right: 50px;
  }
  .common-btn {
    padding: 10px 16px;
  }
  .social-icons img {
    width: 14px;
    margin: 15px auto;
  }
  .about-left-col,
  .about-right-col {
    flex-basis: 100%;
  }
  .about-text {
    margin: 50px 50px 0;
    display: inline-block;
  }
  .about-text h2 {
    font-size: 18px;
  }
  .feature-col {
    flex-basis: 100%;
    margin-bottom: 20px;
  }
  .course-left-col {
    flex-basis: 100%;
  }
  .course-right-col {
    flex-basis: 100%;
    margin-top: 70px;
  }
  .contact-left-col,
  .contact-right-col {
    flex-basis: 100%;
  }
  .contact-right-col {
    margin-top: 50px;
  }
  .footer-left-col,
  .footer-right-col {
    flex-basis: 100%;
  }
  .link-title {
    flex-basis: 50%;
    margin-bottom: 30px;
  }
}</p>
                                </div>                                                <div id="SE-8fcc386b-65ad-447d-8f2f-ed30993277fd">

                                    <p id="SE-e70c0aae-6da3-40ba-89b8-fd5202a82a01"><span id="SE-36ff91b6-6911-44d8-9874-eecd1aeb4c37">[reference] - </span><span id="SE-7dd65243-4e9e-4905-8a14-0ba8cc203927"><a href="https://www.youtube.com/watch?v=zmun7JzWGPE" target="_blank">Easy Tutorials</a></span></p>
                            </div>    </div></div>

Dev-JeromeBaek.

[Web] Template Exam - Responsive Web Template "Xypo" index.html style.css [github] - https://github.com/Dev-JeromeBaek/awesome-web-styling [reference] - Easy Tutorials

[Web] Template Exam - Responsive Web Template "Xypo"

댓글