Skip to main content

Archive

Show more

Mobile App Download Link Design | HTML And CSS

by Rustcode
Mobile-App-Download-Link-Design-HTML-And-CSS

Mobile App Download Link Design | HTML And CSS

"Mobile App Download Link" is very popular nowadays website to download mobile app. You must have seen this element on many websites. Some websites use image for this animation but we will design with html and css.

This design is very simple, this design will use flexbox to align all the elements. It's easy to align items with Flexbox.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Mobile App Download Link Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

Images Github Link: Download 

<!DOCTYPE html>
<html>
<head>
  <title>Mobile App Download Link Design | Rustcode</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="wrapper">
  <a href="#" class="link-wrapper">
    <div class="img-wrapper">
      <img src="apple-logo.png">
    </div>
    <div class="content-wrapper">
      <h6>Download in the</h6>
      <p>App Store</p>
    </div>
  </a>

  <a href="#" class="link-wrapper">
    <div class="img-wrapper">
      <img src="google-play.png">
    </div>
    <div class="content-wrapper">
      <h6>Android app on</h6>
      <p>Google Play</p>
    </div>
  </a>
</div>

</body>
</html>



03. CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #E1E1E1;
  padding: 0px;
  margin: 0px;
}

.img-wrapper{
  width: 48px;
  display: flex;
  align-items: center;
}

img{
  width: 100%;
}

.link-wrapper{
  background: #111;
  color: #E1E1E1 !important;
  width: 185px;
  height: 48px;
  text-decoration: none;
  padding: 28px 16px;
  border-radius: 4px;
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.wrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 400px;
}

.content-wrapper{
  display: flex;
  justify-content: flex-start;
  margin-left: 18px;
  flex-direction: column;
  width: 140px;
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment