├── .gitattributes
├── AlbumLayout
├── index.html
└── style.css
├── BlurLanding
├── index.html
└── style.css
├── CSSgridResponsive
├── index.html
└── style.css
├── CodepenClone
├── index.html
└── style.css
├── Corps
├── about.html
├── css
│ └── style.css
├── img
│ ├── logo_brush.png
│ ├── logo_css.png
│ ├── logo_html.png
│ └── showcase.jpg
├── index.html
└── services.html
├── FullscreenLanding
├── index.html
└── style.css
├── MasonaryImageGallery
├── images
│ ├── 1.jpg
│ ├── 10.jpg
│ ├── 11.jpg
│ ├── 12.jpg
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ ├── 5.jpg
│ ├── 6.jpg
│ ├── 7.jpg
│ ├── 8.jpg
│ └── 9.jpg
└── index.html
├── ParallaxSite
├── css
│ └── style.css
├── img
│ ├── image1.jpg
│ ├── image2.jpg
│ └── image3.jpg
└── index.html
├── PhotographySite
├── index.html
├── main.js
└── style.css
├── PluralsightClone
├── index.html
└── site.css
├── README.md
├── RestaurantWebsite
├── assets
│ ├── images
│ │ ├── flower.png
│ │ └── topography.svg
│ └── style.css
├── images
│ ├── queso-taco.png
│ └── taco.jpg
├── index.html
└── style.css
├── StyledConferences
├── assets
│ ├── images
│ │ ├── home
│ │ │ ├── schedule.jpg
│ │ │ ├── speakers.jpg
│ │ │ └── venue.jpg
│ │ └── speakers
│ │ │ ├── aaron-irizarry.jpg
│ │ │ ├── adam-connor.jpg
│ │ │ ├── aj-self.jpg
│ │ │ ├── arman-ghosh.jpg
│ │ │ ├── bermon-painter.jpg
│ │ │ └── shay-howe.jpg
│ └── stylesheets
│ │ └── main.css
├── index.html
├── register.html
├── schedule.html
├── speakers.html
└── venue.html
├── VideoBackground
├── index.html
└── style.css
├── VideoForm
├── California-Desert.mp4
├── index.html
└── style.css
├── index.html
├── myTunes
├── css
│ └── style.css
├── favicon.ico
├── img
│ ├── cards.png
│ ├── mockup1.png
│ ├── mockup2.png
│ ├── section-bg.jpeg
│ └── showcase.jpeg
├── index.html
└── js
│ └── main.js
└── style.css
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/AlbumLayout/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Nesting Grid with Album Layouts!
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Album Title
18 |
Artist Name
19 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
20 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis, excepturi!
21 |
22 |
23 |
24 |
25 |
26 |
Album Title
27 |
Artist Name
28 |
short.
29 |
30 |
31 |
32 |
33 |
34 |
Album Title
35 |
Artist Name
36 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
37 |
38 |
39 |
40 |
41 |
42 |
Album Title
43 |
Artist Name
44 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
45 |
46 |
47 |
48 |
49 |
50 |
Album Title
51 |
Artist Name
52 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
53 |
54 |
55 |
56 |
57 |
58 |
Album Title
59 |
Artist Name
60 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
61 |
62 |
63 |
64 |
65 |
66 |
Album Title
67 |
Artist Name
68 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
69 |
70 |
71 |
72 |
73 |
74 |
Album Title
75 |
Artist Name
76 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
77 |
78 |
79 |
80 |
81 |
82 |
Album Title
83 |
Artist Name
84 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
85 |
86 |
87 |
88 |
89 |
90 |
Album Title
91 |
Artist Name
92 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sed sint doloremque repellat, iste debitis.
93 |
94 |
95 |
96 |
Blur Landing Site
11 |
12 |
13 |
14 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
YouTube
32 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, reiciendis!
33 |
34 |
35 |
36 |
Courses
37 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, reiciendis!
38 |
39 |
40 |
41 |
Freelancing Projects
42 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, reiciendis!
43 |
44 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
54 |
55 |
About Us
56 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non eos aperiam labore consectetur
57 | maiores ea magni exercitationem
58 | similique laborum sed, unde, autem vel iure doloribus aliquid. Aspernatur explicabo consectetur
59 | consequatur non
60 | nesciunt debitis quos alias soluta, ratione, ipsa officia reiciendis.
61 |
62 |
63 |
65 |
66 |
67 | Traversy Media © 2019
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/BlurLanding/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: rgba(0, 0, 0, 0.9);
3 | margin: 0;
4 | color: #fff;
5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
6 | }
7 |
8 | .showcase::after {
9 | content: '';
10 | height: 100vh;
11 | width: 100%;
12 | background-image: url(https://image.ibb.co/gzOBup/showcase.jpg);
13 | background-size: cover;
14 | background-repeat: no-repeat;
15 | background-position: center;
16 | display: block;
17 | filter: blur(10px);
18 | -webkit-filter: blur(10px);
19 | transition: all 1000ms;
20 | }
21 |
22 | .showcase:hover::after {
23 | filter: blur(0px);
24 | -webkit-filter: blur(0px);
25 | }
26 |
27 | .showcase:hover .content {
28 | filter: blur(2px);
29 | -webkit-filter: blur(2px);
30 | }
31 |
32 | .content {
33 | position: absolute;
34 | z-index: 1;
35 | top: 10%;
36 | left: 50%;
37 | margin-top: 105px;
38 | margin-left: -145px;
39 | width: 300px;
40 | height: 350px;
41 | text-align: center;
42 | transition: all 1000ms;
43 | }
44 |
45 | .content .logo {
46 | height: 180px;
47 | width: 180px;
48 | }
49 |
50 | .content .title {
51 | font-size: 2.2rem;
52 | margin-top: 1rem;
53 | }
54 |
55 | .content .text {
56 | line-height: 1.7;
57 | margin-top: 1rem;
58 | }
59 |
60 | .container {
61 | max-width: 960px;
62 | margin: auto;
63 | overflow: hidden;
64 | padding: 4rem 1rem;
65 | }
66 |
67 | .grid-3 {
68 | display: grid;
69 | grid-gap: 20px;
70 | grid-template-columns: repeat(3, 1fr);
71 | }
72 |
73 | .grid-2 {
74 | display: grid;
75 | grid-gap: 20px;
76 | grid-template-columns: repeat(2, 1fr);
77 | }
78 |
79 | .center {
80 | text-align: center;
81 | margin: auto;
82 | }
83 |
84 | .bg-light {
85 | background: #f4f4f4;
86 | color: #333;
87 | }
88 |
89 | .bg-dark {
90 | background: #333;
91 | color: #f4f4f4;
92 | }
93 |
94 | footer {
95 | padding: 2.2rem;
96 | }
97 |
98 | footer p {
99 | margin: 0;
100 | }
101 |
102 | /* Small Screens */
103 | @media (max-width: 560px) {
104 | .showcase::after {
105 | height: 50vh;
106 | }
107 |
108 | .content {
109 | top: 5%;
110 | margin-top: 5px;
111 | }
112 |
113 | .content .logo {
114 | height: 140px;
115 | width: 140px;
116 | }
117 |
118 | .content .text {
119 | display: none;
120 | }
121 |
122 | .grid-3,
123 | .grid-2 {
124 | grid-template-columns: 1fr;
125 | }
126 |
127 | .services div {
128 | border-bottom: #333 dashed 1px;
129 | padding: 1.2rem 1rem;
130 | }
131 | }
132 |
133 | /* Landscape */
134 | @media (max-height: 500px) {
135 | .content .title,
136 | .content .text {
137 | display: none;
138 | }
139 |
140 | .content {
141 | top: 0;
142 | }
143 | }
144 |
--------------------------------------------------------------------------------
/CSSgridResponsive/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSS Grid Responsive Site
10 |
11 |
12 |
13 |
14 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
Web & Application Development
30 |
31 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe sint eligendi possimus? Unde
32 | officiis magnam laborum ipsa distinctio odio, vero dolores dicta aliquam aperiam repellendus.
33 | Perferendis officiis deserunt velit voluptas nobis sequi
34 | animi totam, accusantium, ex eius quia, natus quo?
35 |
36 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
Web Development
47 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum culpa neque quo eum et
48 | quasi velit voluptatum cum maiores exercitationem.
49 |
50 |
52 |
53 |
54 |
55 |
56 |
Mobile Applications
57 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum culpa neque quo eum et
58 | quasi velit voluptatum cum maiores exercitationem.
59 |
60 |
62 |
63 |
64 |
65 |
66 |
Tech Marketing
67 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum culpa neque quo eum et
68 | quasi velit voluptatum cum maiores exercitationem.
69 |
70 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
We handle all of your digital needs
79 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime nam rerum vel earum error fugiat
80 | cupiditate, dolore eius! Minus, explicabo.
81 |
83 |
84 |
85 |
86 |
87 |
Contact Us
88 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, suscipit. Rerum ducimus a quod, ut et
89 | voluptas obcaecati unde fuga.
90 |
contact@acmewebsolutions.test
91 |
93 |
About Our Company
94 |
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio earum porro deserunt, deleniti,
95 | quae facere repudiandae, officiis est exercitationem nobis iusto doloremque! Soluta excepturi in
96 | aut suscipit amet temporibus quo?
97 |
99 |
100 |
101 |
102 |
103 | Acme Web Solutions
104 |
105 |
106 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/CSSgridResponsive/style.css:
--------------------------------------------------------------------------------
1 | /* Core Styles */
2 |
3 | body {
4 | margin: 0;
5 | font-family: Arial, Helvetica, sans-serif;
6 | background: #333;
7 | color: #fff;
8 | font-size: 1.1em;
9 | line-height: 1.5;
10 | text-align: center;
11 | }
12 |
13 | img {
14 | display: block;
15 | width: 100%;
16 | height: auto;
17 | }
18 |
19 | h1,
20 | h2,
21 | h3 {
22 | margin: 0;
23 | padding: 1em 0;
24 | }
25 |
26 | p {
27 | margin: 0;
28 | padding: 1em 0;
29 | }
30 |
31 | .btn {
32 | display: inline-block;
33 | background: #333;
34 | color: #fff;
35 | text-decoration: none;
36 | padding: 1em 2em;
37 | border: 1px solid #666;
38 | margin: 0.5em 0;
39 | }
40 |
41 | .btn:hover {
42 | background: #eaeaea;
43 | color: #333;
44 | }
45 |
46 | /* Header Showcase */
47 |
48 | #showcase {
49 | min-height: 450px;
50 | color: #fff;
51 | text-align: center;
52 | }
53 |
54 | #showcase .bg-image {
55 | position: absolute;
56 | background: #333
57 | url("https://static.pexels.com/photos/248515/pexels-photo-248515.png");
58 | background-position: center;
59 | background-repeat: no-repeat;
60 | background-size: cover;
61 | width: 100%;
62 | height: 450px;
63 | z-index: -1;
64 | opacity: 0.4;
65 | }
66 |
67 | #showcase h1 {
68 | padding-top: 100px;
69 | padding-bottom: 0;
70 | }
71 |
72 | #showcase .content-wrap,
73 | #section-a .content-wrap {
74 | padding: 0 1.5em;
75 | }
76 |
77 | /* Section A */
78 |
79 | #section-a {
80 | background: #eaeaea;
81 | color: #333;
82 | padding-bottom: 2em;
83 | }
84 |
85 | /* Section B */
86 |
87 | #section-b {
88 | padding: 2em 1em 1em;
89 | }
90 |
91 | #section-b ul {
92 | list-style: none;
93 | margin: 0;
94 | padding: 0;
95 | }
96 |
97 | #section-b li {
98 | margin-bottom: 1em;
99 | background: #fff;
100 | color: #333;
101 | }
102 |
103 | .card-content {
104 | padding: 1.5em;
105 | }
106 |
107 | /* Section C */
108 |
109 | #section-c {
110 | background: #fff;
111 | color: #333;
112 | padding: 2em;
113 | }
114 |
115 | /* Section D / Boxes */
116 |
117 | #section-d .box {
118 | padding: 2em;
119 | color: #fff;
120 | }
121 |
122 | #section-d .box:first-child {
123 | background: #2690d4;
124 | }
125 |
126 | /* Footer */
127 |
128 | #main-footer {
129 | padding: 2em;
130 | background: #000;
131 | color: #fff;
132 | text-align: center;
133 | }
134 |
135 | #main-footer a {
136 | color: #2690d4;
137 | text-decoration: none;
138 | }
139 |
140 | /* Media Queries */
141 |
142 | @media (min-width: 700px) {
143 | .grid {
144 | display: grid;
145 | grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
146 | }
147 |
148 | #section-a .content-text {
149 | columns: 2;
150 | column-gap: 2em;
151 | }
152 |
153 | #section-a .content-text p {
154 | padding-top: 0;
155 | }
156 |
157 | .content-wrap,
158 | #section-b ul {
159 | grid-column: 2/4;
160 | }
161 |
162 | .box,
163 | #main-footer div {
164 | grid-column: span 2;
165 | }
166 |
167 | #section-b ul {
168 | display: flex;
169 | justify-content: space-around;
170 | }
171 |
172 | #section-b li {
173 | width: 31%;
174 | }
175 | }
176 |
--------------------------------------------------------------------------------
/CodepenClone/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Recreating Codepen!
8 |
13 |
14 |
15 |
Some Amazing Pen Name
16 |
A Pen by Wes Bos
17 |
☁️ Save
19 | ️️☁️ Save As Private
20 | ⚙ Settings
21 | 👀 Change View
22 |
24 |
25 |
26 |
31 |
32 |
33 | 1
34 |
35 |
36 |
37 |
38 |
40 |
45 |
46 |
47 | 1
48 | 2
49 | 3
50 |
51 |
52 |
56 |
57 |
58 |
60 |
65 |
66 |
67 | 1
68 |
69 |
70 |
71 |
72 |
74 |
77 |
78 | Console
79 | Assets
80 | ⌘
81 |
82 |
Welcome to About
7 |
26 |
27 |
Subscribe to our Newsletter
28 |
32 |
33 |
34 |
35 |
36 |
37 | About Us
38 | corps.com began in 2005. After years in the web hosting industry, we realized that it was near impossible for the average Jane or Joe to create their own website. Traditional web hosting services were simply too complicated, time consuming, and expensive to manage.
39 | We created the corps.com Site Builder with the user's perspective in mind. We wanted to offer a platform that would require no coding skills or design experience. We keep it simple, so users can focus on creating an amazing website that reflects their brand.
40 |
41 |
47 |
49 |
52 |
53 |
--------------------------------------------------------------------------------
/Corps/css/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | font: 15px/1.5 Arial, Helvetica,sans-serif;
3 | padding:0;
4 | margin:0;
5 | background-color:#f4f4f4;
6 | }
7 | /* Global */
8 | .container{
9 | width:80%;
10 | margin:auto;
11 | overflow:hidden;
12 | }
13 |
14 | ul {
15 | margin:0;
16 | padding:0;
17 | }
18 |
19 | .button_1{
20 | height:38px;
21 | background:#e8491d;
22 | border:0;
23 | padding-left: 20px;
24 | padding-right:20px;
25 | color:#ffffff;
26 | }
27 |
28 | .dark{
29 | padding:15px;
30 | background:#35424a;
31 | color:#ffffff;
32 | margin-top:10px;
33 | margin-bottom:10px;
34 | }
35 |
36 | /* Header **/
37 | header{
38 | background:#35424a;
39 | color:#ffffff;
40 | padding-top:30px;
41 | min-height:70px;
42 | border-bottom:#e8491d 3px solid;
43 | }
44 |
45 | header a{
46 | color:#ffffff;
47 | text-decoration:none;
48 | text-transform: uppercase;
49 | font-size:16px;
50 | }
51 |
52 | header li{
53 | float: left;
54 | padding: 0 20px 0 20px;
55 | list-style: none;
56 | }
57 |
58 | header #branding{
59 | float:left;
60 | }
61 |
62 | header #branding h1{
63 | margin:0;
64 | }
65 |
66 | header nav{
67 | float:right;
68 | margin-top:10px;
69 | }
70 |
71 | header .highlight, header .current a{
72 | color:#e8491d;
73 | font-weight:bold;
74 | }
75 |
76 | header a:hover{
77 | color:#cccccc;
78 | font-weight:bold;
79 | }
80 |
81 | /* Showcase */
82 | #showcase{
83 | min-height:400px;
84 | background:url('../img/showcase.jpg') no-repeat 0 -400px;
85 | text-align:center;
86 | color:#ffffff;
87 | }
88 |
89 | #showcase h1{
90 | margin-top:100px;
91 | font-size:55px;
92 | margin-bottom:10px;
93 | }
94 |
95 | #showcase p{
96 | font-size:20px;
97 | }
98 |
99 | /* Newsletter */
100 | #newsletter{
101 | padding:15px;
102 | color:#ffffff;
103 | background:#35424a
104 | }
105 |
106 | #newsletter h1{
107 | float:left;
108 | }
109 |
110 | #newsletter form {
111 | float:right;
112 | margin-top:15px;
113 | }
114 |
115 | #newsletter input[type="email"]{
116 | padding:4px;
117 | height:25px;
118 | width:250px;
119 | }
120 |
121 | /* Boxes */
122 | #boxes{
123 | margin-top:20px;
124 | }
125 |
126 | #boxes .box{
127 | float:left;
128 | text-align: center;
129 | width:30%;
130 | padding:10px;
131 | }
132 |
133 | #boxes .box img{
134 | width:90px;
135 | }
136 |
137 | /* Sidebar */
138 | aside#sidebar{
139 | float:right;
140 | width:30%;
141 | margin-top:10px;
142 | }
143 |
144 | aside#sidebar .quote input, aside#sidebar .quote textarea{
145 | width:90%;
146 | padding:5px;
147 | }
148 |
149 | /* Main-col */
150 | article#main-col{
151 | float:left;
152 | width:65%;
153 | }
154 |
155 | /* Services */
156 | ul#services li{
157 | list-style: none;
158 | padding:20px;
159 | border: #cccccc solid 1px;
160 | margin-bottom:5px;
161 | background:#e6e6e6;
162 | }
163 |
164 | footer{
165 | padding:10px;
166 | margin-top:10px;
167 | color:#ffffff;
168 | background-color:#e8491d;
169 | text-align: center;
170 | }
171 |
172 | /* Media Queries */
173 | @media(max-width: 768px){
174 | header #branding,
175 | header nav,
176 | header nav li,
177 | #newsletter h1,
178 | #newsletter form,
179 | #boxes .box,
180 | article#main-col,
181 | aside#sidebar{
182 | float:none;
183 | text-align:center;
184 | width:100%;
185 | }
186 |
187 | header{
188 | padding-bottom:20px;
189 | }
190 |
191 | #showcase h1{
192 | margin-top:40px;
193 | }
194 |
195 | #newsletter button, .quote button{
196 | display:block;
197 | width:100%;
198 | }
199 |
200 | #newsletter form input[type="email"], .quote input, .quote textarea{
201 | width:100%;
202 | margin-bottom:5px;
203 | }
204 | }
205 |
--------------------------------------------------------------------------------
/Corps/img/logo_brush.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/Corps/img/logo_brush.png
--------------------------------------------------------------------------------
/Corps/img/logo_css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/Corps/img/logo_css.png
--------------------------------------------------------------------------------
/Corps/img/logo_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/Corps/img/logo_html.png
--------------------------------------------------------------------------------
/Corps/img/showcase.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/Corps/img/showcase.jpg
--------------------------------------------------------------------------------
/Corps/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Corps Web Design | Welcome
7 |
26 |
27 |
Affordable Professional Web Sites
28 |
We provide affordable and highly professional Web Sites services. If you get anything better for less, we will give the website for free.
29 |
31 |
32 |
33 |
Subscribe to our Newsletter
34 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
HTML Markup
45 |
Hypertext Markup Language is the standard markup language for creating web pages and web applications. It is used with CSS.
46 |
47 |
48 |
49 |
CSS3 Styling
50 |
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
51 |
52 |
53 |
54 |
Graphics Design
55 |
Graphic design is the process of visual communication and problem-solving through the use of typography, photography and illustration.
56 |
57 |
59 |
62 |
63 |
--------------------------------------------------------------------------------
/Corps/services.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Welcome to Services
8 |
29 |
30 |
Subscribe To Our Newsletter
31 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | Services
42 |
43 |
44 | Website Design
45 | We have a bunch of very talented Web desigers, who will give you the most modern and beautiful design.
46 | Pricing: $1,000 - $3,000
47 |
48 |
49 | Website Maintenance
50 | We will maintain and upgrate your website to the latest software and will provide you a down-time less than 1 mins
51 | Pricing: $250 per month
52 |
53 |
54 | Website Hosting
55 | We have our own farm, which comprises of the latest xeron blades. We have a down-time of less then 30 mins.
56 | Pricing: $25 per month
57 |
58 |
59 |
60 |
61 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/FullscreenLanding/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Fullscreen Landing
10 |
11 |
12 |
13 |
19 |
20 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis
21 | cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium,
22 | officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem
23 | minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id
24 | voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut,
25 | provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione
26 | repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam
27 | culpa fuga deleniti quae.
28 |
29 |
30 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis
31 | cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium,
32 | officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem
33 | minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id
34 | voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut,
35 | provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione
36 | repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam
37 | culpa fuga deleniti quae.
38 |
39 |
40 |
41 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt
42 | nobis temporibus veritatis libero odio!
43 |
44 |
45 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt
46 | nobis temporibus veritatis libero odio!
47 |
48 |
49 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt
50 | nobis temporibus veritatis libero odio!
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/FullscreenLanding/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin:0;
3 | padding:0;
4 | }
5 |
6 | body{
7 | margin:0;
8 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
9 | font-size:17px;
10 | color:#926239;
11 | line-height:1.6;
12 | }
13 |
14 | #showcase{
15 | background-image:url('http://traversymedia.com/downloads/assets/beachshowcase.jpg');
16 | background-size:cover;
17 | background-position:center;
18 | height:100vh;
19 | display:flex;
20 | flex-direction:column;
21 | justify-content:center;
22 | align-items:center;
23 | text-align:center;
24 | padding:0 20px;
25 | }
26 |
27 | #showcase h1{
28 | font-size:50px;
29 | line-height:1.2;
30 | }
31 |
32 | #showcase p{
33 | font-size:20px;
34 | }
35 |
36 | #showcase .button{
37 | font-size:18px;
38 | text-decoration:none;
39 | color:#926239;
40 | border:#926239 1px solid;
41 | padding:10px 20px;
42 | border-radius:10px;
43 | margin-top:20px;
44 | }
45 |
46 | #showcase .button:hover{
47 | background:#926239;
48 | color:#fff;
49 | }
50 |
51 | #section-a{
52 | padding:20px;
53 | background:#926239;
54 | color:#fff;
55 | text-align:center;
56 | }
57 |
58 | #section-b{
59 | padding:20px;
60 | background:#f4f4f4;
61 | text-align:center;
62 | }
63 |
64 | #section-c{
65 | display:flex;
66 | }
67 |
68 | #section-c div{
69 | padding:20px;
70 | }
71 |
72 | #section-c .box-1, #section-c .box-3{
73 | background:#926239;
74 | color:#fff;
75 | }
76 |
77 | #section-c .box-2{
78 | background:#f9f9f9;
79 | }
80 |
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/1.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/10.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/11.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/12.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/2.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/3.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/4.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/5.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/6.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/7.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/8.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/images/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/MasonaryImageGallery/images/9.jpg
--------------------------------------------------------------------------------
/MasonaryImageGallery/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSS Grid Image Gallery!
9 |
10 |
11 |
12 |
13 |
14 |
15 |
× Close
16 |
17 |
18 |
Parallax Website Demo
8 |
12 |
13 |
14 | Parallax Website
15 |
16 |
17 |
20 | Section One
21 |
22 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in. Distinctio provident dolorem modi cumque illo enim quidem tempora deserunt nostrum voluptate labore repellat quisquam quasi cum suscipit dolore ab consequuntur, ad porro earum temporibus. Laborum ad temporibus ex, omnis!
23 |
24 |
25 |
26 |
27 |
28 |
29 | Image Two Text
30 |
31 |
32 |
35 | Section Two
36 |
37 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
38 |
39 |
40 |
41 |
42 |
43 |
44 | Image Three Text
45 |
46 |
47 |
50 | Section Three
51 |
52 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
53 |
54 |
55 |
56 |
57 |
58 |
59 | Traversy Media
60 |
61 |
62 |
Acme Photography
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
Acme Photography
19 |
Beautiful Natural Photography
20 |
21 | View Work
22 |
23 |
24 |
25 |
26 |
29 |
32 |
33 |
34 |
35 |
Photo One
36 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.
37 |
38 |
39 |
40 |
Photo Two
41 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.
42 |
43 |
44 |
45 |
Photo Three
46 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.
47 |
48 |
49 |
50 |
Photo Four
51 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.
52 |
53 |
54 |
55 |
Photo Five
56 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.
57 |
58 |
60 |
61 |
62 | Get In Touch
63 | Email or call us to set up a consult
64 | Email:
65 | contact@acmephotos.test
66 |
67 | Phone:
68 | (617) 555-5555
69 |
70 |
71 |
75 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/PhotographySite/main.js:
--------------------------------------------------------------------------------
1 | // Animate Smooth Scroll
2 | $('#view-work').on('click', function() {
3 | const images = $('#images').position().top;
4 |
5 | $('html, body').animate(
6 | {
7 | scrollTop: images
8 | },
9 | 900
10 | );
11 | });
12 |
--------------------------------------------------------------------------------
/PhotographySite/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
2 |
3 | body {
4 | font-family: 'Roboto Condensed', sans-serif;
5 | margin: 0;
6 | background: #eee;
7 | height: auto;
8 | }
9 |
10 | h1 {
11 | font-weight: 400;
12 | font-size: 2.5rem;
13 | text-transform: uppercase;
14 | margin: 0;
15 | }
16 |
17 | h2 {
18 | font-weight: 400;
19 | font-size: 1.2rem;
20 | text-transform: capitalize;
21 | margin: 0;
22 | }
23 |
24 | img {
25 | display: block;
26 | width: 100%;
27 | }
28 |
29 | main {
30 | max-width: 900px;
31 | margin: auto;
32 | box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1),
33 | -30px 0px 40px rgba(0, 0, 0, 0.1);
34 | }
35 |
36 | #landing {
37 | background: #fff;
38 | }
39 |
40 | #landing-text {
41 | display: flex;
42 | flex: 0 1 40vw;
43 | height: 50vh;
44 | justify-content: center;
45 | align-items: center;
46 | text-align: center;
47 | padding-right: 1rem;
48 | padding-left: 1rem;
49 | }
50 |
51 | #landing-text h2 {
52 | color: #888;
53 | }
54 |
55 | #landing-image {
56 | background: url(https://source.unsplash.com/De8wMYoSSBc);
57 | background-position: center;
58 | background-size: cover;
59 | background-repeat: no-repeat;
60 | height: 50vh;
61 | flex: 0 1 60vw;
62 | margin: 0;
63 | }
64 |
65 | .btn {
66 | padding: 0.5rem 2rem;
67 | border: 1px #ccc solid;
68 | display: inline-block;
69 | margin: 2rem 0 0;
70 | border-radius: 50px;
71 | text-decoration: none;
72 | color: #333;
73 | transition: background 500ms ease;
74 | }
75 |
76 | .btn:hover {
77 | background: #f4f4f4;
78 | }
79 |
80 | #header {
81 | padding: 1.5rem;
82 | text-align: center;
83 | background: #333;
84 | color: #fff;
85 | }
86 |
87 | #header h2 {
88 | border-left: dotted 1px #fff;
89 | border-right: dotted 1px #fff;
90 | display: inline-block;
91 | padding-right: 1rem;
92 | padding-left: 1rem;
93 | }
94 |
95 | .caption {
96 | padding: 0.8rem;
97 | text-align: center;
98 | }
99 |
100 | footer {
101 | text-align: center;
102 | padding: 2rem 1rem;
103 | margin: auto;
104 | color: #333;
105 | }
106 |
107 | footer h3 {
108 | font-size: 3rem;
109 | margin-bottom: 0;
110 | }
111 |
112 | /* Screen Sizes 500px and Up */
113 | @media (min-width: 500px) {
114 | #landing {
115 | display: flex;
116 | height: 100%;
117 | }
118 |
119 | #landing-text {
120 | height: 100vh;
121 | }
122 |
123 | #landing-image {
124 | height: 100vh;
125 | }
126 | }
127 |
128 | /* Screen Sizes 700px and Up */
129 | @media (min-width: 700px) {
130 | .btn {
131 | padding: 1rem 3rem;
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/PluralsightClone/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Pluralsight Clone
10 |
11 |
12 |
13 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/PluralsightClone/site.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Roboto:300');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Roboto', sans-serif;
9 | font-weight: 300;
10 | background: #181818;
11 | color: #fff;
12 | overflow: hidden;
13 | }
14 |
15 | h1,
16 | h2,
17 | h3,
18 | h4,
19 | h5,
20 | h6 {
21 | font-weight: 300;
22 | }
23 |
24 | #wrapper {
25 | display: flex;
26 | flex-direction: row;
27 | }
28 |
29 | #left {
30 | display: flex;
31 | flex-direction: column;
32 | flex: 1;
33 | align-items: center;
34 | justify-content: center;
35 | height: 100vh;
36 | }
37 |
38 | #right {
39 | flex: 1;
40 | }
41 |
42 | /* Sign In */
43 | #signin {
44 | display: flex;
45 | flex-direction: column;
46 | justify-content: center;
47 | align-items: center;
48 | width: 80%;
49 | padding-bottom: 1rem;
50 | }
51 |
52 | #signin form {
53 | width: 80%;
54 | padding-bottom: 3rem;
55 | }
56 |
57 | #signin .logo {
58 | margin-bottom: 8vh;
59 | }
60 |
61 | #signin .logo img {
62 | width: 300px;
63 | }
64 |
65 | #signin label {
66 | font-size: 0.9rem;
67 | line-height: 2rem;
68 | font-weight: 500;
69 | }
70 |
71 | #signin .text-input {
72 | margin-bottom: 1.3rem;
73 | width: 100%;
74 | border-radius: 2px;
75 | background: #181818;
76 | border: 1px solid #555;
77 | color: #ccc;
78 | padding: 0.5rem 1rem;
79 | line-height: 1.3rem;
80 | }
81 |
82 | #signin .primary-btn {
83 | width: 100%;
84 | }
85 |
86 | #signin .secondary-btn,
87 | .or,
88 | .links {
89 | width: 60%;
90 | }
91 |
92 | #signin .links a {
93 | display: block;
94 | color: #fff;
95 | text-decoration: none;
96 | margin-bottom: 1rem;
97 | text-align: center;
98 | font-size: 0.9rem;
99 | }
100 |
101 | #signin .or {
102 | display: flex;
103 | flex-direction: row;
104 | margin-bottom: 1.2rem;
105 | align-items: center;
106 | }
107 |
108 | #signin .or .bar {
109 | flex: auto;
110 | border: none;
111 | height: 1px;
112 | background: #aaa;
113 | }
114 |
115 | #signin .or span {
116 | color: #ccc;
117 | padding: 0 0.8rem;
118 | }
119 |
120 | /* Button */
121 | .primary-btn {
122 | padding: 0.7rem 1rem;
123 | height: 2.7rem;
124 | display: block;
125 | border: 0;
126 | border-radius: 2px;
127 | font-weight: 500;
128 | background: #f96816;
129 | color: #fff;
130 | text-decoration: none;
131 | cursor: pointer;
132 | text-align: center;
133 | transition: all 0.5s;
134 | }
135 |
136 | .primary-btn:hover {
137 | background-color: #ff7b39;
138 | }
139 |
140 | .secondary-btn {
141 | padding: 0.7rem 1rem;
142 | height: 2.7rem;
143 | display: block;
144 | border: 1px solid #f4f4f4;
145 | border-radius: 2px;
146 | font-weight: 500;
147 | background: none;
148 | color: #fff;
149 | text-decoration: none;
150 | cursor: pointer;
151 | text-align: center;
152 | transition: all 0.5s;
153 | }
154 |
155 | .secondary-btn:hover {
156 | border-color: #ff7b39;
157 | color: #ff7b39;
158 | }
159 |
160 | /* Showcase */
161 | #showcase {
162 | display: flex;
163 | justify-content: center;
164 | align-items: center;
165 | background: url('https://image.ibb.co/cO9Lxq/login-bg.jpg') no-repeat center center / cover;
166 | height: 100vh;
167 | text-align: center;
168 | }
169 |
170 | #showcase .showcase-text {
171 | font-size: 3rem;
172 | width: 100%;
173 | color: #fff;
174 | margin-bottom: 1.5rem;
175 | }
176 |
177 | #showcase .secondary-btn {
178 | width: 60%;
179 | margin: auto;
180 | }
181 |
182 | /* Footer */
183 | #main-footer {
184 | color: #ccc;
185 | text-align: center;
186 | font-size: 0.8rem;
187 | max-width: 80%;
188 | padding-top: 5rem;
189 | }
190 |
191 | #main-footer a {
192 | color: #f96816;
193 | text-decoration: underline;
194 | }
195 |
196 | /* Media Queries */
197 | @media (min-width: 1200px) {
198 | #left {
199 | flex: 4;
200 | }
201 |
202 | #right {
203 | flex: 6;
204 | }
205 | }
206 |
207 | @media (max-width: 768px) {
208 | body {
209 | overflow: auto;
210 | }
211 |
212 | #right {
213 | display: none;
214 | }
215 |
216 | #left {
217 | justify-content: start;
218 | margin-top: 4vh;
219 | }
220 |
221 | #signin .logo {
222 | margin-bottom: 2vh;
223 | }
224 |
225 | #signin .text-input {
226 | margin-bottom: 0.7rem;
227 | }
228 |
229 | #main-footer {
230 | padding-top: 1rem;
231 | }
232 | }
233 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WebDesigns
2 | Each folder of this project contains various Web Designs, patterns and also complete Websites. Most are made using pure HTML and CSS, without using any CSS library like bootstrap etc.
3 |
4 | ### Corps
5 | A clean coded responsive mobile friendly HTML5 website for a fictional web design company. This site is created using [this](https://www.youtube.com/watch?v=Wm6CUkswsNw&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=3) Traversy Media youtube video.
6 |
7 | ### myTunes
8 | A clean coded responsive mobile friendly HTML5 website for a Streaming service. It is modeled after the iTunes website as far as layout and content. It use HTML5, CSS3 and a bit of jQuery. This site is created using [this](https://www.youtube.com/watch?v=GJXXf3_dcng&t=177s) Traversy Media youtube video.
9 |
10 | ### BlurLanding
11 | A responsive mobile friendly Langing Page with Blur effect.It uses grid system, media queries, transitions. This site is created using [this](https://www.youtube.com/watch?v=HZv8YHYUHTU&index=5&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) Traversy Media youtube video.
12 |
13 | ### PhotographySite
14 | A responsive single page photography website using a mobile first approach with just HTML5 and CSS3. This site is created using [this](https://www.youtube.com/watch?v=XsEnj-1hG2o&index=6&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) Traversy Media youtube video.
15 |
16 | ### FullscreenLanding
17 | A small simple Langing Page with just HTML5 and CSS3. We use a little bit of flexbox styling. This site is created using [this](https://www.youtube.com/watch?v=hVdTQWASliE&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=9) Traversy Media youtube video.
18 |
19 | ### Pluralsight Login
20 | A clone of Pluralsight login page with HTML5 and CSS3. We use a little bit of flexbox styling. We use Flexbox for styling and media queries for responsiveness. This site is created using [this](https://www.youtube.com/watch?v=wIx1O5Y5EB4&index=10&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) Traversy Media youtube video.
21 |
22 | ### Parallax Site
23 | An implementation of a parallax website with fixed scrolling using HTML and CSS. It so that we can scroll and the images will stay in place. This site is created using [this](https://www.youtube.com/watch?v=JttTcnidSdQ&index=11&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) Traversy Media youtube video.
24 |
25 | ### VideoBackground Site
26 | A landing page with a full screen video background using HTML and CSS. This site is created using [this](https://www.youtube.com/watch?v=Xy3GlrddZFI&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=33) Traversy Media youtube video.
27 |
28 | ### CSS Grid Responsive Site
29 | A "mobile first" single page website layout using the CSS Grid. We are using modern techniques including relative em units, media queries and even a little flex. This site is created using [this](https://www.youtube.com/watch?v=M3qBpPw77qo&index=35&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU) Traversy Media youtube video.
30 |
31 | ### Video Form
32 | A single line form created with the learning from Wes Bos flexbox course. This link is [this](https://courses.wesbos.com/account/access/5ae5513242c2397eec320e27/view/195971710).
33 |
34 | ### Album Layout
35 | An album layout created using CSS grid. This project is created using [this](https://courses.wesbos.com/account/access/5ae5513242c2397eec320e27/view/195971710) unit from Wes Bos CSS Grid course.
36 |
37 | ### Masonary Image Gallery
38 | An Masonary Image Gallery created using CSS grid. This project is created using [this](https://courses.wesbos.com/account/access/5aefd10bf8bd797afd2669c7/view/249560994) unit from Wes Bos CSS Grid course.
39 |
40 | ### Styled Conferences
41 | An Conference website created using pure CSS. This project is created using [this](https://learn.shayhowe.com/html-css/) Shay Howe course.
42 |
43 | ### Codepen Clone
44 | A clone of Codepen created using CSS grid. This project is created using [this](https://courses.wesbos.com/account/access/5aefd10bf8bd797afd2669c7/view/249565560) unit from Wes Bos CSS Grid course.
45 |
46 | ### Restaurant Website
47 | A Responsive Restaurant created using CSS grid. This project is created using [this](https://courses.wesbos.com/account/access/5aefd10bf8bd797afd2669c7/view/249566909) unit from Wes Bos CSS Grid course.
48 |
--------------------------------------------------------------------------------
/RestaurantWebsite/assets/images/flower.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/RestaurantWebsite/assets/images/flower.png
--------------------------------------------------------------------------------
/RestaurantWebsite/assets/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | Oh Hello!
3 |
4 | These are some base styles so that our tutorial looks good.
5 |
6 | Let's go through the important bits real quick
7 | */
8 | :root {
9 | --yellow: #ffc600;
10 | --black: #272727;
11 | }
12 |
13 | html {
14 | /* border-box box model allows us to add padding and border to our elements without increasing their size */
15 | box-sizing: border-box;
16 | /* A system font stack so things load nice and quick! */
17 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
18 | Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
19 | font-weight: 900;
20 | font-size: 10px;
21 | color: var(--black);
22 | text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
23 | }
24 |
25 | /*
26 | WAT IS THIS?!
27 | We inherit box-sizing: border-box; from our selector
28 | Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
29 | */
30 | *,
31 | *:before,
32 | *:after {
33 | box-sizing: inherit;
34 | }
35 |
36 | body {
37 | background-image: url("./images/topography.svg"),
38 | linear-gradient(110deg, #f93d66, #6d47d9);
39 | background-size: 340px, auto;
40 | min-height: calc(100vh - 100px);
41 | margin: 50px;
42 | /* background: white; */
43 | background-attachment: fixed;
44 | letter-spacing: -1px;
45 | }
46 |
47 | h1,
48 | h2,
49 | h3,
50 | h4,
51 | h5,
52 | h6 {
53 | margin: 0 0 5px 0;
54 | }
55 | /* Each item in our grid will contain numbers */
56 | .item {
57 | /* We center the contents of these items. You can also do this with flexbox too! */
58 | display: grid;
59 | justify-content: center;
60 | align-items: center;
61 | border: 5px solid rgba(0, 0, 0, 0.03);
62 | border-radius: 3px;
63 | font-size: 35px;
64 | background-color: var(--yellow); /* best colour */
65 | }
66 |
67 | .item p {
68 | margin: 0 0 5px 0;
69 | }
70 |
--------------------------------------------------------------------------------
/RestaurantWebsite/images/queso-taco.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/RestaurantWebsite/images/queso-taco.png
--------------------------------------------------------------------------------
/RestaurantWebsite/images/taco.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/RestaurantWebsite/images/taco.jpg
--------------------------------------------------------------------------------
/RestaurantWebsite/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Responsive Website!
10 |
11 |
12 |
13 |
14 |
15 |
39 |
40 |
41 | Terry's Taco Joint
42 | Pretty Good Tacos!
43 |
44 |
45 |
$1.99
46 |
Tacos
47 |
48 |
49 |
$3.99
50 |
Kombucha
51 |
52 |
53 |
54 |
55 |
56 |
57 |
🌮
58 |
Tacos
59 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.
60 |
62 |
🍺
63 |
Beer
64 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.
65 |
67 |
🍷
68 |
Wine
69 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.
70 |
72 |
🎵
73 |
Music
74 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.
75 |
77 |
78 |
79 |
81 |
Featured Taco
82 |
Slim Profile, easy to hold and loaded with cheese.
83 |
This is the one you have been waiting for
84 |
Learn More →
85 |
87 |
88 |
89 |
90 | Instant Grams
91 |
102 |
Styles Conference
6 |
26 | Dedicated to the Craft of Building Websites
27 | Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest tech logies. Join us this August!
28 | Register Now
29 |
30 |
31 |
58 |
59 |
72 |
73 |
--------------------------------------------------------------------------------
/StyledConferences/register.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styles Conference
6 |
26 |
27 |
28 |
29 |
Register
30 |
31 |
Every year we aim to have an unbelievable time, and this year we'd love it for you to join us. Conference passes only cost $99, one of the best values you'll find.
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 | Purchase a Conference Pass
41 | $99 per Pass
42 |
43 | Purchase your Styles Conference pass using the form to the right. Multiple passes may be purchased within the same order, so feel free to bring a friend or two along. Once your order is finished we’ll follow up and provide a receipt for your purchase. See you soon!
44 |
45 | Why Attend?
46 |
47 |
48 | Over twenty world-class speakers
49 | One full day of workshops and two full days of presentations
50 | Hosted at The Chicago Theatre, a historical landmark
51 | August in Chicago is simply amazing
52 |
53 |
91 |
92 |
94 |
95 |
108 |
109 |
--------------------------------------------------------------------------------
/StyledConferences/schedule.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styles Conference
6 |
26 |
27 |
28 |
29 |
Schedule
30 |
31 |
The conference opens with amazing workshops and continues with two days of incredible talks and keynotes, all of which are facilitated by industry-leading experts.
32 |
33 |
34 |
36 |
37 |
38 |
102 |
103 |
104 |
105 |
241 |
242 |
243 |
244 |
380 |
381 |
383 |
384 |
385 |
398 |
399 |
--------------------------------------------------------------------------------
/StyledConferences/speakers.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styles Conference
6 |
26 |
27 |
28 |
29 |
Speakers
30 |
31 |
We’re happy to welcome over twenty speakers to present on the industry’s latest technologies. Prepare for an inspiration extravaganza.
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
Aaron Irizarry
45 |
Designing a Culture of Design
46 |
47 |
Workplace culture doesn’t start with beanbags, foosball tables, or a beer fridge, and it doesn’t end with neckties, PCs, or big corporations. It’s the unwritten rules, behavior, beliefs, and the motivations that enable good work to get done, or it’s what stifles a workforce. For design to be most effective and for designers to feel valued, we need to work in a culture that embraces design and allows it to succeed.
48 |
49 |
In Aaron’s session he will explore how to recognize the traits of organizations that *get* design, both large and small. He will share what those teams, departments, and companies have that others don’t, and more importantly, how to begin to change your own workplace’s culture. Once you’ve worked within a culture of design it’s almost impossible to imagine yourself anywhere else.
50 |
51 |
About Aaron
52 |
53 |
Aaron Irizarry is a Senior Product Designer for Nasdaq OMX, a lover of heavy metal, a foodie, and a master of BBQ arts. You can find some of his thoughts and presentations on the conversation surrounding design over at discussingdesign.com .
54 |
55 |
58 |
59 |
60 |
61 |
62 |
66 |
67 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
Adam Connor
79 |
Lights! Camera! Interaction! Design Inspiration from Filmmakers
80 |
81 |
Films succeed in evoking responses and engaging audiences only with a combination of well-written narrative and effective storytelling technique. It’s the filmmaker’s job to put this together. To do so they’ve developed processes, tools and techniques that allow them to focus attention, emphasize information, foreshadow and produce the many elements that together comprise a well-told story.
82 |
83 |
With this workshop, we’ll revisit the topic of using stories in design and expand on the technical aspects used in film to communicate. We’ll look at some tools used in film, such as cinematic patterns, beat sheets, and storyboards. We’ll consider why they’re used and how we might look to them for inspiration.
84 |
85 |
About Adam
86 |
87 |
Adam Connor is a designer, illustrator and speaker passionate about collaboration, communication, creativity and storytelling. As an Experience Design Director with Mad*Pow, Adam combines 10+ years of experience in interaction and experience design with a background in computer science, film, and animation to create effective and easy-to-use digital products and services. He believes that no matter how utilitarian a tool is, at the core of its creation lies a story; uncovering that story is key to its success. Occasionally, he shares his perspectives on design at adamconnor.com and discussingdesign.com .
88 |
89 |
92 |
93 |
94 |
95 |
96 |
100 |
101 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
AJ Self
113 |
(You Should Be) Testing Your JavaScript
114 |
115 |
JavaScript applications frequently utilize battle-tested libraries like jQuery, AngularJS, Backbone.js and more, but how can we be sure that our code is ready for production? This talk will share tips on how writing tests can be written easily and quickly and how to remove buggy code through testing.
116 |
117 |
About AJ
118 |
119 |
AJ is a software engineer specializing in JavaScript working at Belly in Chicago. Lately he has been writing applications with AngularJS and loving it. When not coding he is out loving the outdoors with his dog, Sunshine.
120 |
121 |
124 |
125 |
126 |
127 |
128 |
132 |
133 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
Arman Ghosh
145 |
Designing Deals: How Good Design Drives Sales
146 |
147 |
Perception influences decisions, especially when it comes to selling products and services. Learn why before you even start sales conversations; good, thoughtful design and presentation will define you and your ability to close deals.
148 |
149 |
About Arman
150 |
151 |
Arman is an entrepreneur who has his roots planted in building aggressive sales and revenue-generating teams. Having built out national sales and operations teams in the B2B and consumer spaces, his focus has been driving aggressive growth for technology-based companies. He has an extensive operating background and has built a career disrupting sales processes and approaches with companies doing the same in their respective technology spaces.
152 |
153 |
156 |
157 |
158 |
159 |
160 |
163 |
164 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
Bermon Painter
176 |
Death to Wireframes: Long Live Rapid Prototyping
177 |
178 |
Static wireframes are a drag on the whole design process. Prototyping makes things a little better by allowing you to stitch together static wireframes or mockups while adding basic interactions. Rapid prototyping with HTML, CSS, and JavaScript is even better and faster; it increases collaboration and improves the iteration process. Kill your wireframes. Long live rapid prototyping.
179 |
180 |
About Bermon
181 |
182 |
Bermon is the organizer of various community groups for user experience designers and front-end developers, and the organizer of Blend Conference, a three-day, multi-track event for user experience strategists, designers and developers. He also leads the user experience team for Cardinal Solutions’ Charlotte office, where he consults with large enterprise clients on interesting problems across user experience, design and front-end development.
183 |
184 |
187 |
188 |
189 |
190 |
191 |
195 |
196 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
Shay Howe
208 |
Less Is More: How Constraints Cultivate Growth
209 |
210 |
By setting constraints, we force ourselves to be more productive. They help us make decisions, creating focus around the problem we are trying to solve. They improve our consistency, which provides a better experience for our users. And they help us grow, a valuable asset in times of innovation.
211 |
212 |
About Shay
213 |
214 |
As a designer and front-end developer, Shay Howe has a passion for solving problems while building creative and intuitive products. Shay specializes in product design and interface development, specialties which he regularly writes and speaks about.
215 |
216 |
219 |
220 |
221 |
222 |
223 |
227 |
228 |
230 |
231 |
232 |
233 |
234 |
235 |
237 |
238 |
239 |
252 |
253 |
--------------------------------------------------------------------------------
/StyledConferences/venue.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Styles Conference
6 |
26 |
27 |
28 |
29 |
Venue
30 |
31 |
The conference is held at The Chicago Theatre, a beautiful historical landmark. The conference hotel, Four Seasons, is a short walk away down State Street.
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
Chicago Theatre
43 |
175 N State St
44 |
thechicagotheatre.com
45 |
49 |
50 |
51 |
52 |
Four Seasons
53 |
120 E Delaware PI
54 |
fourseasons.com
55 |
58 |
59 |
61 |
62 |
75 |
76 |
--------------------------------------------------------------------------------
/VideoBackground/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Video Background
10 |
11 |
12 |
13 |
29 |
30 |
31 |
32 |
Section A
33 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et
34 | maiores blanditiis doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod
35 | quae accusantium, ex inventore ducimus. Beatae mollitia exercitationem, quam similique, consectetur
36 | ratione reprehenderit delectus neque eligendi facere soluta dolor ducimus!
37 |
39 |
40 |
41 |
42 |
Section B
43 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et
44 | maiores blanditiis doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod
45 | quae accusantium, ex inventore ducimus. Beatae mollitia exercitationem, quam similique, consectetur
46 | ratione reprehenderit delectus neque eligendi facere soluta dolor ducimus!
47 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/VideoBackground/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | box-sizing: border-box;
3 | }
4 |
5 | body{
6 | margin:0;
7 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
8 | font-size:1rem;
9 | font-weight:normal;
10 | line-height:1.5;
11 | color:#333;
12 | overflow-x:hidden;
13 | }
14 |
15 | .v-header{
16 | height:100vh;
17 | display:flex;
18 | align-items:center;
19 | color:#fff;
20 | }
21 |
22 | .container{
23 | max-width:960px;
24 | padding-left:1rem;
25 | padding-right:1rem;
26 | margin:auto;
27 | text-align:center;
28 | }
29 |
30 | .fullscreen-video-wrap{
31 | position:absolute;
32 | top:0;
33 | left:0;
34 | width:100%;
35 | height:100vh;
36 | overflow:hidden;
37 | }
38 |
39 | .fullscreen-video-wrap video{
40 | min-height:100%;
41 | min-width:100%;
42 | }
43 |
44 | .header-overlay{
45 | height:100vh;
46 | position: absolute;
47 | top:0;
48 | left:0;
49 | width:100vw;
50 | z-index:1;
51 | background:#225470;
52 | opacity:0.85;
53 | }
54 |
55 | .header-content{
56 | z-index:2;
57 | }
58 |
59 | .header-content h1{
60 | font-size:50px;
61 | margin-bottom:0;
62 | }
63 |
64 | .header-content p{
65 | font-size:1.5rem;
66 | display:block;
67 | padding-bottom:2rem;
68 | }
69 |
70 | .btn{
71 | background: #34b3a0;
72 | color:#fff;
73 | font-size:1.2rem;
74 | padding: 1rem 2rem;
75 | text-decoration: none;
76 | }
77 |
78 | .section{
79 | padding:20px 0;
80 | }
81 |
82 | .section-b{
83 | background:#333;
84 | color:#fff;
85 | }
86 |
87 | @media(max-width:960px){
88 | .container{
89 | padding-right:3rem;
90 | padding-left:3rem;
91 | }
92 | }
--------------------------------------------------------------------------------
/VideoForm/California-Desert.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/VideoForm/California-Desert.mp4
--------------------------------------------------------------------------------
/VideoForm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | FlexBox Nav
7 | HTML Templates
10 |
11 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Blur Landing
24 |
Link
25 |
26 |
28 |
29 |
30 |
Responsive Site
31 |
Link
32 |
33 |
35 |
36 |
37 |
Responsive Site Grid
38 |
Link
39 |
40 |
42 |
43 |
44 |
Full Screen Landing
45 |
Link
46 |
47 |
49 |
50 |
51 |
iTunes Clone
52 |
Link
53 |
54 |
56 |
57 |
58 |
Parallax Site
59 |
Link
60 |
61 |
63 |
64 |
65 |
PhotoGraphy Site
66 |
Link
67 |
68 |
70 |
71 |
72 |
PluralSight Clone
73 |
Link
74 |
75 |
77 |
78 |
79 |
VideoBackground Site
80 |
Link
81 |
82 |
84 |
85 |
86 |
Video Form
87 |
Link
88 |
89 |
91 |
92 |
93 |
Album Layout
94 |
Link
95 |
96 |
98 |
99 |
100 |
Masonary Image Gallery
101 |
Link
102 |
103 |
105 |
106 |
107 |
Style Conference
108 |
Link
109 |
110 |
112 |
113 |
114 |
Codepen Clone
115 |
Link
116 |
117 |
119 |
120 |
121 |
Restaurant Website
122 |
Link
123 |
124 |
126 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/myTunes/css/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=PT+Sans');
2 |
3 | /* CSS Variables */
4 | :root {
5 | --primary-color: #b90415;
6 | --primary-color-hover: #d3071b;
7 | --secondary-color: #103063;
8 | --secondary-color-hover: #143f85;
9 | --light-color: #f4f4f4;
10 | }
11 |
12 | body {
13 | font-family: 'PT Sans', sans-serif;
14 | background-color: #252529;
15 | margin: 0;
16 | color: #fff;
17 | line-height: 1.6;
18 | }
19 |
20 | img {
21 | width: 100%
22 | }
23 |
24 | a {
25 | text-decoration: none;
26 | color: #ccc;
27 | }
28 |
29 | /* Section */
30 | .section {
31 | padding: 2rem 0;
32 | }
33 |
34 | .section-head {
35 | font-size: 2.5rem;
36 | margin: 0;
37 | }
38 |
39 | .section h3 {
40 | font-size: 2rem;
41 | }
42 |
43 | section#entertainment {
44 | background: url(../img/section-bg.jpeg) no-repeat bottom/cover;
45 | padding: 10rem 0;
46 | }
47 |
48 | .gift-cards {
49 | display: grid;
50 | grid-gap: 20px;
51 | grid-template-columns: repeat(2, 1fr);
52 | text-align: left;
53 | }
54 | /* Showcase */
55 | #showcase {
56 | margin:0;
57 | padding: 0;
58 | background: url('../img/showcase.jpeg') no-repeat center/cover;
59 | width: 100%;
60 | height: 100vh;
61 | position: relative;
62 | overflow-y: hidden;
63 | }
64 |
65 | #showcase .container {
66 | margin-top: 25vh;
67 | }
68 |
69 | #showcase h1 {
70 | font-size: 4rem;
71 | margin-bottom: 0;
72 | }
73 |
74 | #showcase h2 {
75 | font-size: 2rem;
76 | }
77 |
78 | /* Footer */
79 | footer .footer-cols {
80 | display: grid;
81 | grid-gap: 20px;
82 | grid-template-columns: repeat(4, 1fr);
83 | padding: 2rem;
84 | text-align: left;
85 | font-size: 14px;
86 | }
87 |
88 | footer .footer-cols ul {
89 | list-style: none;
90 | }
91 |
92 | footer .footer-cols ul li:first-child {
93 | font-size: 1.2rem;
94 | padding-bottom: 0.5rem;
95 | border-bottom: #444 solid 1px;
96 | margin-bottom: 1rem;
97 | }
98 |
99 | footer .footer-bottom {
100 | background: #333;
101 | padding: 1rem;
102 | }
103 |
104 | /* Utility Classes */
105 | .container {
106 | max-width: 1180px;
107 | text-align: center;
108 | margin: 0 auto;
109 | padding: 0 3rem;
110 | }
111 |
112 | .lead {
113 | font-size: 1.3rem;
114 | }
115 |
116 | .text-center {
117 | text-align: center;
118 | }
119 |
120 |
121 | /* Buttons */
122 | .btn {
123 | padding: 1rem;
124 | color: #fff;
125 | display: inline-block;
126 | }
127 |
128 | .btn-primary {
129 | background: var(--primary-color);
130 | }
131 |
132 | .btn-primary:hover {
133 | background: var(--primary-color-hover);
134 | }
135 |
136 | .btn-secondary {
137 | background: var(--secondary-color);
138 | }
139 |
140 | .btn-secondary:hover {
141 | background: var(--secondary-color-hover);
142 | }
143 |
144 | /* Text colors */
145 | .text-primary {
146 | color: var(--primary-color);
147 | }
148 |
149 | .text-secondary {
150 | color: var(--secondary-color);
151 | }
152 |
153 | .text-light {
154 | color: var(--light-color);
155 | }
156 |
157 | .bg-light {
158 | background: var(--light-color);
159 | color: #333;
160 | }
161 |
162 | .mb {
163 | margin-bottom: 1rem;
164 | }
165 |
166 | .mt {
167 | margin-top: 1rem;
168 | }
169 |
170 | /* Navigation */
171 | nav {
172 | height: 40px;
173 | width: 100%;
174 | background-color: #333;
175 | color: rgb(51, 34, 34);
176 | position: fixed;
177 | }
178 | nav ul {
179 | padding: 0;
180 | margin: 0;
181 | }
182 | nav li {
183 | display: inline;
184 | float: left;
185 | }
186 | nav a {
187 | display: inline-block;
188 | width: 100px;
189 | text-align: center;
190 | text-decoration: none;
191 | padding: 10px 0;
192 | color: #eee;
193 | text-decoration: none;
194 | }
195 | nav li:hover {
196 | background-color: #444;
197 | }
198 | nav a#openup {
199 | display: none;
200 | }
201 |
202 | @media screen and (max-width: 580px) {
203 |
204 | .hide-on-small {
205 | display: none;
206 | }
207 |
208 | #showcase {
209 | height: 50vh;
210 | }
211 |
212 | #showcase .container {
213 | margin-top: 15vh;
214 | }
215 |
216 | #showcase h1 {
217 | font-size: 3rem;
218 | }
219 |
220 | #showcase h2 {
221 | font-size: 1.5rem;
222 | }
223 |
224 | nav {
225 | height: auto;
226 | border-bottom: 0;
227 | }
228 | nav ul {
229 | display: none;
230 | height: auto;
231 | }
232 | nav li {
233 | width: 100%;
234 | float: left;
235 | position: relative;
236 | }
237 | nav a {
238 | text-align: left;
239 | width: 100%;
240 | text-indent: 25px;
241 | background: #333;
242 | border-bottom: 1px solid #555;
243 | }
244 | nav a:hover {
245 | background: #444;
246 | }
247 | nav a#openup:after {
248 | content: "|||";
249 | transform: rotate(-90deg);
250 | -ms-transform: rotate(-90deg);
251 | /* IE 9 */
252 | -webkit-transform: rotate(-90deg);
253 | /* Safari and Chrome */
254 | width: 30px;
255 | height: 30px;
256 | display: inline-block;
257 | position: absolute;
258 | right: 5px;
259 | top: 20px;
260 | }
261 | nav a#openup {
262 | display: block;
263 | background-color: #333;
264 | width: 100%;
265 | position: relative;
266 | }
267 | }
268 | .cf:before, .cf:after {
269 | content: "";
270 | display: table;
271 | }
272 |
273 | .cf:after {
274 | clear: both;
275 | }
276 |
277 | .cf {
278 | zoom: 1;
279 | }
280 |
281 | @media screen and (max-width: 780px) {
282 | .gift-cards {
283 | grid-template-columns: 1fr;
284 | }
285 |
286 | footer .footer-cols {
287 | display: none;
288 | }
289 | }
290 |
291 | @media screen and (max-height: 580px) {
292 | #showcase p.lead {
293 | display: none;
294 | }
295 | }
296 |
--------------------------------------------------------------------------------
/myTunes/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/myTunes/favicon.ico
--------------------------------------------------------------------------------
/myTunes/img/cards.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/myTunes/img/cards.png
--------------------------------------------------------------------------------
/myTunes/img/mockup1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/myTunes/img/mockup1.png
--------------------------------------------------------------------------------
/myTunes/img/mockup2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/myTunes/img/mockup2.png
--------------------------------------------------------------------------------
/myTunes/img/section-bg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/myTunes/img/section-bg.jpeg
--------------------------------------------------------------------------------
/myTunes/img/showcase.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabendu82/WebDesigns/5ce69ae126100d12c21c59d32886789349758023/myTunes/img/showcase.jpeg
--------------------------------------------------------------------------------
/myTunes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | myTunes
13 |
14 |
15 |
16 |
17 |
18 |
40 |
41 |
myTunes
42 |
Your music, movies, and TV shows take center stage.
43 |
44 | myTunes is the best way to organize and enjoy the music, movies, and TV shows you already have — and shop for
45 | the ones you want. Enjoy all the entertainment myTunes has to offer on your Mac and PC.
46 |
47 |
48 |
52 |
53 |
54 |
56 |
45 million songs. Zero ads.
57 |
Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All
58 | the music in your personal
59 | myTunes library — no matter where it came from — lives right alongside the Orange Music catalog. Start your
60 | free
61 | three-month trial with no commitment, and cancel anytime.
62 |
Start Your Trial Now
63 |
Orange Music is available in myTunes, and for iOS and Android devices.
64 |
65 |
67 |
68 |
69 |
70 |
71 |
The movie and TV collection you always wished for. Granted.
72 |
With over 100,000 movies and TV shows to choose from, there’s always something great to watch
73 | on myTunes and if you
74 | watch on Orange TV 4K, you’ll be able to enjoy a tremendous selection of your favorite content in 4K HDR.
75 | So get
76 | ready to enjoy episodes of your favorite TV shows or hit movies you’ve been waiting to see — anytime,
77 | anywhere. Just
78 | tap to play, or even download if you’re going somewhere you won’t have Wi-Fi.
79 |
Read More
80 |
81 |
83 |
84 |
85 |
86 |
87 |
A world of entertainment. Available wherever you are.
88 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem veniam nobis, nisi ut
89 | expedita, doloribus reprehenderit
90 | explicabo non velit repellat alias saepe inventore repellendus? Molestias suscipit eos tempora? Quae
91 | quaerat cumque
92 | in veritatis impedit dolorum sapiente recusandae minima quo aperiam quam, excepturi quasi totam ad quas?
93 | Ipsam laudantium
94 | soluta delectus!
95 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
Gift Cards
107 |
108 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque expedita tempore quasi omnis a aut
109 | et totam illo fuga accusamus
110 | dolorum vero, ut harum consectetur. Minima molestias officiis culpa non sed dicta itaque. Et
111 | aliquam illo obcaecati
112 | molestias veritatis porro.
113 |
114 |
Already have an Orange MyTunes Music Gift Card?
115 |
116 |
117 |
119 |
120 |
121 |
123 |
124 |
125 |
126 |
127 |
205 |
206 |
209 |
210 |
211 |
213 |
214 |
215 |
216 |
--------------------------------------------------------------------------------
/myTunes/js/main.js:
--------------------------------------------------------------------------------
1 | //Responsive nav
2 | $(function() {
3 | menu = $('nav ul');
4 |
5 | $('#openup').on('click', function(e) {
6 | e.preventDefault(); menu.slideToggle();
7 | });
8 |
9 | $(window).resize(function(){
10 | var w = $(this).width(); if(w > 480 && menu.is(':hidden')) {
11 | menu.removeAttr('style');
12 | }
13 | });
14 |
15 | $('nav li').on('click', function(e) {
16 | var w = $(window).width(); if(w < 480 ) {
17 | menu.slideToggle();
18 | }
19 | });
20 | $('.open-menu').height($(window).height());
21 | });
22 |
23 | // Smooth Scrolling
24 | $('.cf a').on('click', function(event) {
25 | if (this.hash !== '') {
26 | event.preventDefault();
27 |
28 | const hash = this.hash;
29 |
30 | $('html, body').animate(
31 | {
32 | scrollTop: $(hash).offset().top
33 | },
34 | 800,
35 | function() {
36 | window.location.hash = hash;
37 | }
38 | );
39 | }
40 | });
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | body {
7 | margin: 0;
8 | font-family: Arial, Helvetica, sans-serif;
9 | font-size: 1.1em;
10 | line-height: 1.5;
11 | }
12 |
13 | .menu__block{
14 | width: 100%;
15 | height: 3em;
16 | background-color: blueviolet;
17 | display: flex;
18 | justify-content: flex-start;
19 | align-items: center;
20 | }
21 |
22 | .title__text {
23 | margin-left: 3px;
24 | color: black;
25 | }
26 |
27 | .card-title{
28 | color: black;
29 | }
30 |
31 | img {
32 | width: 100%;
33 | height: 120px;
34 | object-fit: cover;
35 |
36 | }
37 |
38 | .gallery__flex {
39 | /* display: flex;
40 | flex-wrap: wrap;
41 | justify-content: center; */
42 | display: grid;
43 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
44 | grid-gap:5px;
45 | }
46 |
47 | .card{
48 | background: lightgray;
49 | padding: 10px;
50 | width: 300px;
51 | height: 200px;
52 | margin: 10px 10px;
53 | color: white;
54 | text-align: center;
55 | }
56 |
57 | /* @media all and (max-width: 500px) {
58 | .gallery__flex {
59 | flex-direction: column;
60 | }
61 | } */
--------------------------------------------------------------------------------
16 | 
25 | 
33 | 
41 | 
49 | 
57 | 
65 | 
73 | 
81 | 
89 | 
17 | 
45 | 
55 | 
65 | 
23 | 
44 | 
49 | 
54 | 
34 | 
39 | 
44 | 
49 | 
54 | 
18 | 
80 | 
92 | 
93 | 
94 | 
95 | 
96 | 
97 | 
98 | 
99 | 
100 | 
101 | 
38 | 
45 | 
52 | 
22 | 
29 | 
57 | 
64 | 
71 | 
65 | 
81 | 
104 |