├── images ├── cart.png ├── img.png ├── logo.png ├── back-arrow.png ├── background.png └── next-arrow.png ├── README.md ├── index.html └── style.css /images/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SashenJayathilaka/Animated_Website_Design/HEAD/images/cart.png -------------------------------------------------------------------------------- /images/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SashenJayathilaka/Animated_Website_Design/HEAD/images/img.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SashenJayathilaka/Animated_Website_Design/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/back-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SashenJayathilaka/Animated_Website_Design/HEAD/images/back-arrow.png -------------------------------------------------------------------------------- /images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SashenJayathilaka/Animated_Website_Design/HEAD/images/background.png -------------------------------------------------------------------------------- /images/next-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SashenJayathilaka/Animated_Website_Design/HEAD/images/next-arrow.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Designing Websites 2 | # Designing Websites: The 8 Steps 3 | 4 | Define your site’s purpose and strategy
5 | Research the latest web design trends
6 | Choose your platform
7 | Select a template and start customizing
8 | Decide on your branding
9 | Add in and optimize your content
10 | Publish your website
11 | Analyze and improve
12 | 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Animated Website Design 5 | 6 | 7 | 8 |
9 |
10 | 11 | 19 | 20 |
21 |
22 | 2022 Collections 23 |

You Should Always
Feel Pretty

24 |

Clothes that are sure to heat up your winter.

25 | 26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 | FACEBOOK 35 | INSTAGRAM 36 | TWITTER 37 | 38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .container{ 7 | height: 100vh; 8 | width: 100%; 9 | background-image: url(images/background.png); 10 | background-position: center; 11 | background-size: cover; 12 | padding-left: 5%; 13 | padding-right: 5%; 14 | box-sizing: border-box; 15 | position: relative; 16 | overflow: hidden; 17 | } 18 | 19 | .navbar{ 20 | width: 100%; 21 | height: 15vh; 22 | margin: auto; 23 | display: flex; 24 | align-items: center; 25 | } 26 | .logo{ 27 | width: 160px; 28 | cursor: pointer; 29 | animation: movedown 1s linear 1; 30 | animation-delay: 1s; 31 | visibility: hidden; 32 | animation-fill-mode: forwards; 33 | } 34 | @keyframes movedown{ 35 | 0%{ 36 | transform: translateY(-100px); 37 | visibility: visible; 38 | } 39 | 100%{ 40 | transform: translateY(0); 41 | visibility: visible; 42 | } 43 | } 44 | 45 | 46 | 47 | 48 | 49 | .cart{ 50 | width: 40px; 51 | cursor: pointer; 52 | animation: movedown 1s linear 1; 53 | animation-delay: 3s; 54 | visibility: hidden; 55 | animation-fill-mode: forwards; 56 | } 57 | nav{ 58 | flex: 1; 59 | padding-left: 60px; 60 | animation: movedown 1s linear 1; 61 | animation-delay: 2s; 62 | visibility: hidden; 63 | animation-fill-mode: forwards; 64 | } 65 | nav ul li{ 66 | display: inline-block; 67 | list-style: none; 68 | margin: 0px 20px; 69 | } 70 | nav ul li a{ 71 | text-decoration: none; 72 | cursor: #333; 73 | } 74 | .content h1{ 75 | font-size: 60px; 76 | font-weight: 100; 77 | margin-top: 24px; 78 | margin-bottom: 15px; 79 | color: #232d60; 80 | } 81 | .content p{ 82 | font-size: 20px; 83 | color: #6a7199; 84 | } 85 | .content{ 86 | margin-left: 10%; 87 | margin-top: 10%; 88 | animation: moveright 1s linear 1; 89 | animation-delay: 4s; 90 | visibility: hidden; 91 | animation-fill-mode: forwards; 92 | } 93 | 94 | @keyframes moveright{ 95 | 0%{ 96 | transform: translateX(-100px); 97 | visibility: visible; 98 | } 99 | 100%{ 100 | transform: translateX(0); 101 | visibility: visible; 102 | } 103 | } 104 | 105 | 106 | .content .btn{ 107 | display: inline-block; 108 | background: linear-gradient(45deg, #87adfe, #ff77cd); 109 | border-radius: 6px; 110 | padding: 10px 20px; 111 | box-sizing: border-box; 112 | text-decoration: none; 113 | color: #fff; 114 | box-shadow: 3px 8px 22px rgba(94,28,68,0.15); 115 | } 116 | .arrow-icons{ 117 | margin-top: 40px; 118 | display: flex; 119 | } 120 | .arrow-icons img{ 121 | width: 40px; 122 | margin-right: 25px; 123 | cursor: pointer; 124 | } 125 | .feature-img{ 126 | height: 90%; 127 | position: absolute; 128 | bottom: 0; 129 | right: 160px; 130 | animation: zoomin 1s linear 1; 131 | animation-delay: 5s; 132 | visibility: hidden; 133 | animation-fill-mode: forwards; 134 | 135 | } 136 | 137 | @keyframes zoomin{ 138 | 0%{ 139 | transform: scale(0.5); 140 | visibility: visible; 141 | } 142 | 100%{ 143 | transform: scale(1); 144 | visibility: visible; 145 | } 146 | } 147 | 148 | 149 | 150 | .social-links{ 151 | transform: rotate(-90deg); 152 | position: absolute; 153 | left: -80px; 154 | bottom: 180px; 155 | animation: moveup 1s linear 1; 156 | animation-delay: 6s; 157 | visibility: hidden; 158 | animation-fill-mode: forwards; 159 | } 160 | @keyframes moveup{ 161 | 0%{ 162 | transform: translateY(100px) rotate(-90deg);; 163 | visibility: visible; 164 | } 165 | 100%{ 166 | transform: translateY(0) rotate(-90deg);; 167 | visibility: visible; 168 | } 169 | } 170 | 171 | 172 | 173 | .social-links a{ 174 | text-decoration: none; 175 | color: #6a7199; 176 | padding-right: 20px; 177 | font-size: 14px; 178 | } --------------------------------------------------------------------------------