Task HTML and CSS

HTML Code

Preview Click Here

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Task</title>
    <link rel="stylesheet" href="task.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9Si P4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"/>
  </head>
  <body>
    <div class="header">
      <div class="pageTitle"><strong>Studio Francesca</strong></div>
      <div class="menu">
        <ul>
          <li class="topMenu">Home</li>
          <li class="topMenu">Portofolio</li>
          <li class="topMenu">Blog</li>
          <li class="topMenu">Pages</li>
          <li class="topMenu">Features</li>
          <li class="topMenu">Contact</li>
        </ul>
      </div>
    </div>
    <div class="banner">
      <img
        class="bannerImage"
        src="https://veeravenkatasaidurgaprasad.com/wp-content/uploads/2021/08/banner.jpg"
        alt="bridge"
      />
      <div class="bannerText">
        <div class="dareto"><strong>Dare to</strong></div>
        <div class="dream"><strong>DREAM</strong></div>
      </div>
    </div>
    <div>
      <p class="quote">
        "Vision is the art of seeing what is invisible to others" - Jonathan
        Swift
      </p>
    </div>
    <div class="margin">
      <div class="grid">
        <div class="detailsGrid">
          <div class="icon fa fa-heart">
            <div class="iconTitle">Responsive Design</div>
            <div class="iconDescription">Across all major devices</div>
          </div>
        </div>
        <div class="detailsGrid">
          <div class="icon fa fa-bullhorn">
            <div class="iconTitle">Friendly Documentation</div>
            <div class="iconDescription">Straight to the point</div>
          </div>
        </div>
        <div class="detailsGrid">
          <div class="icon fa fa-user">
            <div class="iconTitle">Alternate Home Pages</div>
            <div class="iconDescription">Full slider, boxed or none</div>
          </div>
        </div>
        <div class="detailsGrid">
          <div class="icon fa fa-camera">
            <div class="iconTitle">Filterable Portofolio</div>
            <div class="iconDescription">Isotop & Pretty Photo</div>
          </div>
        </div>
      </div>
      <div class="center">
        <div>
          <hr />
          <hr />
          <hr />
        </div>
        <div class="whatwedo">What We Do</div>
        <div>
          <hr />
          <hr />
          <hr />
        </div>
      </div>
      <div class="grid">
        <div class="whatWeDoGridTitle">
          Photography
          <div class="paragraph">
            Swine short ribs meatball irure bacon nulla pork belly cupidatat
            meatloaf cow. Nulla corned beef sunt ball tip, qui bresaola enim
            jowl. Capicola short ribs minim salami nulla nostrud pastrami.
          </div>
          <div class="learnmore">Learn more</div>
        </div>
        <div class="whatWeDoGridTitle">
          Artwork
          <div class="paragraph">
            Swine short ribs meatball irure bacon nulla pork belly cupidatat
            meatloaf cow. Nulla corned beef sunt ball tip, qui bresaola enim
            jowl. Capicola short ribs minim salami nulla nostrud pastrami.
          </div>
          <div class="learnmore">Learn more</div>
        </div>
        <div class="whatWeDoGridTitle">
          Logos
          <div class="paragraph">
            Swine short ribs meatball irure bacon nulla pork belly cupidatat
            meatloaf cow. Nulla corned beef sunt ball tip, qui bresaola enim
            jowl. Capicola short ribs minim salami nulla nostrud pastrami.
          </div>
          <div class="learnmore">Learn more</div>
        </div>
      </div>
      <div class="gridBottom">
        <div class="footerParaRightBorder">
          <div class="footerParagraph">
            <em>
              "Duis aute irure dolor in reprehenderit in voluptate velit esse
              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit
              anim id est laborum. Lorem ipsum dolor sit amet, consectetur
              adipisicing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco."
            </em>
          </div>
          <div class="by"><em>&ndash; SANDRA - LA</em></div>
        </div>
      </div>
    </div>
    <div class="footerContent">
      <div class="footer">
        <div class="footerGrid">
          <div class="footerTitle">
            ABOUT US
            <div class="footerP">Our goal is to keep clients satisfied!</div>
          </div>
        </div>
        <div class="footerGrid">
          <div class="footerTitle">
            GET SOCIAL
            <div class="footerIcon">
              <i class="fab fa-twitter-square"></i
              ><i class="fab fa-whatsapp-square"></i
              ><i class="fab fa-linkedin"></i
              ><i class="fab fa-instagram-square"></i
              ><i class="fab fa-google-plus-square"></i>
            </div>
          </div>
        </div>
        <div class="footerGrid">
          <div class="footerTitle">
            NEWS LETTER
            <div class="footerP">
              <div class="input">
                <input
                  type="email"
                  placeholder="Enter Your e-mail address..."
                />
                <div class="go">Go</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="copyright">
        <div class="test">© Test by <span>Teja Sir</span></div>
        <div class="design">Design by <span>Durga Prasad</span></div>
      </div>
    </div>
    </div>
  </body>
</html>

Preview Click Here

CSS Code

body {
  margin: 0;
  font-family: "Helvetica Neue", sans-serif;
  overflow-x: hidden;
}
.header {
  display: inline-block;
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-top: 4.1px solid #55a2a6;
}
.pageTitle {
  display: inline-block;
  padding: 22px;
  font-size: 27px;
  margin-right: 200px;
  cursor: pointer;
}
.menu {
  display: inline-block;
  float: right;
  padding: 22px;
  cursor: pointer;
}
.topMenu {
  list-style-type: none;
  display: inline-block;
  font-size: 15px;
  padding: 0 11px;
  color: #555;
}
.banner {
  position: relative;
}
.bannerImage {
  width: 100%;
}
.bannerText {
  position: absolute;
  top: 200px;
  margin: 0;
}
.dareto {
  background-color: #55a2a6;
  font-size: 40px;
  text-align: center;
  padding: 0 35px;
  color: white;
  margin-bottom: 15px;
}
.dream {
  background-color: #333;
  font-size: 50px;
  text-align: center;
  padding: 0 35px;
  color: white;
}
.quote {
  display: inline-block;
  width: 100%;
  height: 75px;
  background-color: #55a2a6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: white;
  font-weight: 400;
  margin-top: -4px;
}
.margin {
  margin: 0 250px;
  position: relative;
}
.grid {
  display: flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  overflow: hidden;
}
.detailsGrid {
  margin-top: -20px;
  color: #333;
  padding: 50px;
  width: 125px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
}
.detailsGrid:hover {
  background-color: black;
  color: rgb(238, 238, 238);
}
.icon {
  font-size: 60px;
  color: #333;
  text-align: center;
  display: inline-block;
}
.iconTitle {
  text-align: center;
  font-size: 20px;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 600;
  display: block;
  padding: 40px;
  opacity: 0.9;
  color: #333;
}
.iconTitle:hover {
  color: rgb(238, 238, 238);
}
.iconDescription {
  display: block;
  font-size: 14px;
  text-align: center;
  color: #666;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 600;
  opacity: 0.8;
}
hr {
  margin: 1px;
  border-top: 1px dotted grey;
  width: 380px;
  display: block;
}
.center {
  display: flex;
  justify-content: space-between;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  overflow: hidden;
}
.whatwedo {
  display: flex;
  flex-direction: column;
  padding: 50px;
  color: #222;
  font-weight: 700;
  font-size: 23px;
}
.whatWeDoGrid {
  margin-top: -20px;
  color: #333;
  padding: 50px;
  width: 125px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
}
.whatWeDoGridTitle {
  display: block;
  font-weight: 700;
  text-align: left;
  padding: 20px;
}
.paragraph {
  display: inline-block;
  font-weight: 500;
  text-align: left;
  font-size: 14px;
  margin: 20px 0;
  line-height: 22px;
  opacity: 0.9;
}
.learnmore {
  display: inline-block;
  background-color: #55a2a6;
  color: white;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
}
.gridBottom {
  margin-top: 50px;
}
.footerParagraph {
  font-size: 14px;
  line-height: 22px;
  opacity: 0.9;
  padding: 20px;
  color: #535151;
  display: inline-block;
}
.footerParaRightBorder {
  border-left: 5px solid #55a2a6;
}
.by {
  font-size: 15px;
  font-weight: 600;
  color: #55a2a6;
  padding-left: 20px;
}
.footerContent {
  /* display: flex; */
  background-color: black;
  opacity: 0.9;
  width: 100%;
  padding: 30px;
  color: white;
  margin-top: 60px;
  border-top: 5px solid #55a2a6;
}
.footer {
  display: flex;
  justify-content: space-between;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  overflow: hidden;
  margin: 0 250px;
}
.footerGrid {
  display: inline-block;
  color: #333;
  width: 325px;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.footerTitle {
  display: flex;
  flex-direction: column;
  color: rgb(218, 218, 218);
  font-weight: 700;
  font-size: 15px;
}
.footerP {
  display: inline-block;
  padding-top: 20px;
  font-weight: 500;
  font-size: 14px;
  opacity: 0.9;
  font-size: 13px;
  color: #666;
}
.footerIcon {
  padding-top: 20px;
  font-size: 40px;
}
.fab {
  padding-right: 5px;
  color: #444;
  cursor: pointer;
}
input {
  background-color: #151515;
  border: none;
}
.input {
  padding: 10px 80px 10px 10px;
  border: none;
  background-color: #151515;
  color: #999;
  position: relative;
}
.go {
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: #444;
  right: 0;
  top: 0;
  height: 37px;
  width: 40px;
  border-radius: 5px;
  text-align: center;
  font-size: large;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
}
.bottom {
  background-color: black;
  opacity: 0.8;
}
.copyright {
  margin: 0 250px;
  font-size: 13px;
  color: #444;
  padding: 15px;
  display: block;
}
.test {
  display: inline-block;
}
.design {
  float: right;
}
span {
  color: rgb(238, 238, 238);
}
.Ads .Ad2 {
  width: 150px;
  height: 2500px;
  background-color: #555;
  position: absolute;
  top: 0;
}

Preview Click Here

Latest

Leave A Reply

Please enter your comment!
Please enter your name here