Code For Travel and Tourism website

Css Code

# Essential Stuff
## Html import links
Google font
“` html
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link
  href=”https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap”
  rel=”stylesheet”>
“`
Ionicon
“` html
<script type=”module” src=”https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js”></script>
<script nomodule src=”https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js”></script>
“`
## Colors
“` css
–united-nations-blue: hsl(214, 56%, 58%);
–bright-navy-blue: hsl(214, 57%, 51%);
–spanish-gray: hsl(0, 0%, 60%);
–black-coral: hsl(225, 8%, 42%);
–oxford-blue: hsl(208, 97%, 12%);
–yale-blue: hsl(214, 72%, 33%);
–blue-ncs: hsl(197, 100%, 36%);
–gunmetal: hsl(206, 34%, 20%);
–gainsboro: hsl(0, 0%, 88%);
–cultured: hsl(0, 0%, 98%);
–white: hsl(0, 0%, 100%);
–black: hsl(0, 0%, 0%);
–onyx: hsl(0, 0%, 25%);
–jet: hsl(0, 0%, 20%);
“`
## Typography
“` css
–ff-poppins: “Poppins”, sans-serif;
–ff-montserrat: “Montserrat”, sans-serif;
–fs-1: calc(20px + 3.5vw);
–fs-2: calc(18px + 1.6vw);
–fs-3: calc(16px + 0.45vw);
–fs-4: 15px;
–fs-5: 14px;
–fs-6: 13px;
–fs-7: 12px;
–fs-8: 11px;
–fw-500: 500;
–fw-600: 600;
–fw-700: 700;
–fw-800: 800;
“`
## Transition
“` css
–transition: 0.25s ease-in-out;
“`
## Spacing
“` css
–section-padding: 60px;
“`
## Border radius
“` css
–radius-15: 15px;
–radius-25: 25px;
“`

SVG CODE

<svg width=”62″ height=”62″ viewBox=”0 0 62 62″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
<g clip-path=”url(#clip0_6_6)”>
<rect width=”62″ height=”62″ rx=”15″ fill=”white”/>
<g clip-path=”url(#clip1_6_6)”>
<path d=”M42.7246 48.9202L40.8129 50.8319C40.6207 51.024 40.3835 51.1647 40.1229 51.2414C39.8623 51.3181 39.5866 51.3282 39.3211 51.2709C39.0556 51.2135 38.8086 51.0905 38.6029 50.9131C38.3972 50.7356 38.2393 50.5095 38.1435 50.2552L32.557 35.4103L25.4515 42.2069L25.988 47.8135C26.1123 48.9044 25.9973 49.5608 25.0135 50.5447L23.7265 51.8316C23.5293 52.0419 23.2843 52.2016 23.0123 52.2971C22.7403 52.3926 22.4492 52.4211 22.1638 52.3803C21.7624 52.3207 21.2037 52.098 20.8101 51.377L17.1346 44.8547C17.1073 44.8059 17.0822 44.7549 17.0592 44.7032C17.0563 44.6989 17.0527 44.6953 17.0484 44.6924C16.9963 44.6699 16.9454 44.6445 16.8962 44.6163L10.3401 40.9099C9.6392 40.5178 9.42591 39.967 9.37061 39.5727C9.33341 39.3079 9.35886 39.038 9.44492 38.7848C9.53099 38.5316 9.67526 38.3021 9.86614 38.1148L11.2249 36.7561C11.9596 36.0214 13.0023 35.6379 13.9539 35.7507L19.4564 36.2878L26.3421 29.1953L11.5165 23.6253C11.2622 23.5298 11.036 23.372 10.8584 23.1665C10.6809 22.9609 10.5577 22.7141 10.5001 22.4487C10.4425 22.1832 10.4524 21.9076 10.5288 21.6469C10.6053 21.3863 10.7458 21.149 10.9376 20.9567L12.8702 19.0241C13.1452 18.7599 13.4762 18.5611 13.8386 18.4423C14.2011 18.3236 14.5856 18.288 14.9636 18.3383L34.8601 20.2737L38.8997 16.0158C39.187 15.6955 40.0229 14.848 40.2175 14.6534C44.1882 10.6871 47.8465 9.60551 50.0053 11.7643C50.6846 12.4437 51.6728 13.9748 50.6581 16.5924C50.0599 18.1386 48.8692 19.8091 47.1197 21.5585C46.9273 21.751 46.082 22.5847 45.7574 22.8763L41.4987 26.9138L43.4119 46.8325C43.4611 47.2098 43.4248 47.5932 43.3059 47.9546C43.1869 48.3159 42.9883 48.6459 42.7246 48.9202V48.9202Z” fill=”#3A78C9″/>
</g>
</g>
<defs>
<clipPath id=”clip0_6_6″>
<rect width=”62″ height=”62″ rx=”15″ fill=”white”/>
</clipPath>
<clipPath id=”clip1_6_6″>
<rect width=”52″ height=”52″ fill=”white” transform=”translate(-4 29) rotate(-45)”/>
</clipPath>
</defs>
</svg>

Read Me

<div align=”center”>
  ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/tourly)
  ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/tourly?style=social)
  ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/tourly?style=social)
[![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
  [![YouTube Video Views](https://img.shields.io/youtube/views/FYFmQEpZywc?style=social)](https://youtu.be/FYFmQEpZywc)
  <br />
  <br />
  <img src=”./readme-images/project-logo.png” />
  <h2 align=”center”>Tourly – Travel website</h2>
  Tourly is fully responsive travel website, <br />Responsive for all devices, built using HTML, CSS, and JavaScript.
  <a href=”https://codewithsadee.github.io/tourly/”><strong>➥ Live Demo</strong></a>
</div>
<br />
### Demo Screeshots
![Tourly Desktop Demo](./readme-images/desktop.png “Desktop Demo”)
### Prerequisites
Before you begin, ensure you have met the following requirements:
* [Git](https://git-scm.com/downloads “Download Git”) must be installed on your operating system.
### Run Locally
To run **Tourly** locally, run this command on your git bash:
Linux and macOS:
“`bash
sudo git clone https://github.com/codewithsadee/tourly.git
“`
Windows:
“`bash
git clone https://github.com/codewithsadee/tourly.git
“`
### Contact
If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
### License
This project is **free to use** and does not contains any license.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Resize text
Scroll to Top