├── .gitignore ├── 00template ├── README.md ├── index.html ├── style.css └── style.scss ├── 01searchUI-1 ├── README.md ├── assets │ ├── clock.svg │ ├── message-square.svg │ ├── paperclip.svg │ ├── search.svg │ ├── users.svg │ └── x.svg ├── index.html ├── style.css └── style.scss ├── 02recList ├── README.md ├── assets │ ├── chrome.svg │ ├── firefox.svg │ ├── opera.svg │ └── play.svg ├── index.html ├── style.css └── style.scss ├── 03domainLandingSite ├── Readme.md ├── index.html ├── style.css └── style.scss ├── LICENSE ├── README.md ├── index.html └── site └── banner.png /.gitignore: -------------------------------------------------------------------------------- 1 | # Log files generated by extensions 2 | *.log 3 | 4 | # VSCode settings folder 5 | .vscode -------------------------------------------------------------------------------- /00template/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Name of the Component

4 | Demo Design 5 |

6 | 7 | Designed by ``
8 | Developed by `` 9 | 10 | 11 | -------------------------------------------------------------------------------- /00template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Name of the Component 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /00template/style.css: -------------------------------------------------------------------------------- 1 | /* CSS goes here */ -------------------------------------------------------------------------------- /00template/style.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevDesigneer/designtocode/387bdbcabf5e453d923d545fd4afcaf3b2b2598c/00template/style.scss -------------------------------------------------------------------------------- /01searchUI-1/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Name of the Component

4 | Demo Design 5 |

6 | 7 | Designed by ``
8 | Developed by `` 9 | 10 | 11 | -------------------------------------------------------------------------------- /01searchUI-1/assets/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01searchUI-1/assets/message-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01searchUI-1/assets/paperclip.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01searchUI-1/assets/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01searchUI-1/assets/users.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01searchUI-1/assets/x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01searchUI-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Search UI 9 | 10 | 11 | 12 |

13 | 41 |

42 | 43 | 44 | -------------------------------------------------------------------------------- /01searchUI-1/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #FAF9FF; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | font-family: "Nunito", sans-serif; 16 | } 17 | 18 | main { 19 | background-color: #F4F6FE; 20 | padding: 7em; 21 | } 22 | 23 | img { 24 | height: 15px; 25 | width: 15px; 26 | } 27 | 28 | .search-modal { 29 | background-color: #FFFFFF; 30 | padding: 2.5em; 31 | border-radius: 7px; 32 | box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.15); 33 | transition: all 0.35s; 34 | } 35 | 36 | .search-modal .search-input { 37 | padding: 15px; 38 | } 39 | 40 | .search-modal .search-input img { 41 | width: 1.5em; 42 | height: 1.5em; 43 | margin-right: 10px; 44 | } 45 | 46 | .search-modal .search-input input { 47 | border: none; 48 | padding: 10px 20px 10px 0; 49 | font-family: "Nunito", sans-serif; 50 | font-size: 1.3rem; 51 | outline: none; 52 | } 53 | 54 | .search-modal li { 55 | list-style-type: none; 56 | } 57 | 58 | .search-modal .heading { 59 | margin: 8px 0; 60 | text-transform: uppercase; 61 | color: #AFB4CB; 62 | font-weight: 600; 63 | font-size: 0.9rem; 64 | letter-spacing: 1px; 65 | } 66 | 67 | .search-modal .trending-shortcuts { 68 | border-top: 1px solid #AFB4CB; 69 | padding: 10px; 70 | } 71 | 72 | .search-modal .trending-shortcuts ul { 73 | margin-top: 4px; 74 | } 75 | 76 | .search-modal .trending-shortcuts ul li:nth-child(2) { 77 | background-color: #E6F6F2; 78 | } 79 | 80 | .search-modal .trending-shortcuts ul li:nth-child(3) { 81 | background-color: #F4F3FD; 82 | } 83 | 84 | .search-modal .trending-shortcuts ul li { 85 | margin: 0 6px 0 0; 86 | display: inline-block; 87 | border-radius: 5px; 88 | background-color: #F9EFFA; 89 | padding: 4px 10px 4px 10px; 90 | color: #3C455B; 91 | cursor: pointer; 92 | } 93 | 94 | .search-modal .trending-shortcuts ul li .text { 95 | display: inline-block; 96 | padding: 0 0 4px 0; 97 | } 98 | 99 | .search-modal .trending-shortcuts ul li img { 100 | height: 1.3em; 101 | width: 1.3em; 102 | padding: 8px 5px 0 0; 103 | } 104 | 105 | .search-modal .recent-searches { 106 | padding: 10px; 107 | } 108 | 109 | .search-modal .recent-searches li { 110 | width: 100%; 111 | border-radius: 5px; 112 | padding: 5px 3px; 113 | color: #3C455B; 114 | justify-content: space-between; 115 | transition: all 0.35s; 116 | position: relative; 117 | } 118 | 119 | .search-modal .recent-searches li img { 120 | margin: 0 8px 0 3px; 121 | } 122 | 123 | .search-modal .recent-searches li .cross { 124 | opacity: 0; 125 | display: inline-block; 126 | position: absolute; 127 | right: 4px; 128 | transition: opacity 0.35s; 129 | } 130 | 131 | .search-modal .recent-searches li .cross img { 132 | height: 20px; 133 | width: 20px; 134 | } 135 | 136 | .search-modal .recent-searches li:hover { 137 | background-color: #EBEAF3; 138 | } 139 | 140 | .search-modal .recent-searches li:hover .cross { 141 | opacity: 1; 142 | } -------------------------------------------------------------------------------- /01searchUI-1/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #FAF9FF; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | font-family: 'Nunito', sans-serif; 16 | } 17 | 18 | main { 19 | background-color: #F4F6FE; 20 | } 21 | 22 | img { 23 | height: 15px; 24 | width: 15px; 25 | } 26 | 27 | .search-modal { 28 | background-color: #FFFFFF; 29 | padding: 2.5em; 30 | border-radius: 7px; 31 | box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.15); 32 | transition: all 0.35s; 33 | 34 | .search-input { 35 | padding: 15px; 36 | 37 | img { 38 | width: 1.5em; 39 | height: 1.5em; 40 | margin-right: 10px; 41 | } 42 | 43 | input { 44 | border: none; 45 | padding: 10px 20px 10px 0; 46 | font-family: 'Nunito', sans-serif; 47 | font-size: 1.3rem; 48 | outline: none; 49 | } 50 | } 51 | 52 | li { 53 | list-style-type: none; 54 | } 55 | 56 | .heading { 57 | margin: 8px 0; 58 | text-transform: uppercase; 59 | color: #AFB4CB; 60 | font-weight: 600; 61 | font-size: 0.9rem; 62 | letter-spacing: 1px; 63 | } 64 | 65 | .trending-shortcuts { 66 | border-top: 1px solid #AFB4CB; 67 | padding: 10px; 68 | 69 | ul { 70 | margin-top: 4px; 71 | 72 | li:nth-child(2) { 73 | background-color: #E6F6F2; 74 | } 75 | 76 | li:nth-child(3) { 77 | background-color: #F4F3FD; 78 | } 79 | 80 | li { 81 | margin: 0 6px 0 0; 82 | display: inline-block; 83 | border-radius: 5px; 84 | background-color: #F9EFFA; 85 | padding: 4px 10px 4px 10px; 86 | color: #3C455B; 87 | cursor: pointer; 88 | 89 | .text { 90 | display: inline-block; 91 | padding: 0 0 4px 0; 92 | } 93 | 94 | img { 95 | height: 1.3em; 96 | width: 1.3em; 97 | padding: 8px 5px 0 0; 98 | } 99 | } 100 | } 101 | } 102 | 103 | .recent-searches { 104 | padding: 10px; 105 | 106 | li { 107 | width: 100%; 108 | border-radius: 5px; 109 | padding: 5px 3px; 110 | color: #3C455B; 111 | justify-content: space-between; 112 | transition: all 0.35s; 113 | position: relative; 114 | 115 | img { 116 | margin: 0 8px 0 3px; 117 | // padding: 8px 5px 0 0; 118 | } 119 | 120 | .cross { 121 | opacity: 0; 122 | display: inline-block; 123 | position: absolute; 124 | right: 4px; 125 | transition: opacity 0.35s; 126 | 127 | img { 128 | height: 20px; 129 | width: 20px; 130 | } 131 | } 132 | } 133 | 134 | li:hover { 135 | background-color: #EBEAF3; 136 | 137 | .cross { 138 | opacity: 1; 139 | } 140 | } 141 | } 142 | } -------------------------------------------------------------------------------- /02recList/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Name of the Component

4 | Demo Design 5 |

6 | 7 | Designed by ``
8 | Developed by `` 9 | 10 | 11 | -------------------------------------------------------------------------------- /02recList/assets/chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02recList/assets/firefox.svg: -------------------------------------------------------------------------------- 1 | 139 | -------------------------------------------------------------------------------- /02recList/assets/opera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /02recList/assets/play.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /02recList/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Recordings List 9 | 10 | 11 | 12 |

13 |

14 |

15 |

16 |

17 |

18 |

19 |

08 Sep

20 |

21 |

144 events · 12:26 · chrome icon

Chrome on 22 | Windows

23 |

trewghtrg-regtr4gre-regtreg69-stsf

24 |

25 |

26 |

27 |

28 |

29 |

30 |

31 |

08 Sep

32 |

33 |

75 events · 08:50 · opera icon

Opera on 34 | Windows

35 |

trewghtrg-regtr4gre-regtreg69-stsf

36 |

37 |

38 |

39 |

40 |

41 |

42 |

43 |

08 Sep

44 |

45 |

56 events · 11:30 · firefox icon

Firefox on 46 | Windows

47 |

trewghtrg-regtr4gre-regtreg69-stsf

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

08 Sep

56 |

57 |

125 events · 05:20 · chrome icon

Chrome on 58 | Windows

59 |

cewfewfe-regtr4gre-regtreg69-stsf

60 |

61 |

62 |

63 |

64 |

65 | 66 | 67 | -------------------------------------------------------------------------------- /02recList/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: "Inter", sans-serif; 10 | background-color: #F7F9FC; 11 | display: flex; 12 | min-height: 100vh; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | main { 18 | width: 75%; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | main img { 24 | height: 15px; 25 | width: 15px; 26 | } 27 | 28 | .recording-list { 29 | width: 75%; 30 | } 31 | .recording-list .list-item { 32 | background-color: #fff; 33 | width: 100%; 34 | height: 6em; 35 | border-radius: 7px; 36 | margin: 8px 0px; 37 | display: flex; 38 | flex-direction: row; 39 | justify-content: start; 40 | align-items: center; 41 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 42 | transition: all 0.35s ease-in-out; 43 | } 44 | .recording-list .list-item .play-icon { 45 | margin: 0 1.1em 0 1.5em; 46 | background-color: #F7F9FC; 47 | border: 1px solid #AAAFCB; 48 | border-radius: 50%; 49 | height: 3em; 50 | width: 3.25em; 51 | display: inline-block; 52 | text-align: center; 53 | cursor: pointer; 54 | } 55 | .recording-list .list-item .play-icon img { 56 | margin-top: 1em; 57 | margin-left: 3px; 58 | } 59 | .recording-list .list-item .date { 60 | font-weight: 600; 61 | } 62 | .recording-list .list-item .information { 63 | width: 100%; 64 | } 65 | .recording-list .list-item .information .sub-info { 66 | width: 100%; 67 | display: flex; 68 | flex-direction: row; 69 | justify-content: space-between; 70 | padding-right: 1.5em; 71 | } 72 | .recording-list .list-item .information .sub-info small { 73 | font-size: 0.8rem; 74 | } 75 | .recording-list .list-item .information .sub-info small img { 76 | display: inline-block; 77 | vertical-align: middle; 78 | height: 17px; 79 | width: auto; 80 | padding-bottom: 2px; 81 | } 82 | .recording-list .list-item .information .sub-info .right { 83 | transition: all 0.35s ease-in-out; 84 | color: #646464; 85 | } 86 | .recording-list .list-item:hover { 87 | background-color: #4C5FFF; 88 | color: #fff; 89 | transition: all 0.35s ease-in-out; 90 | } 91 | .recording-list .list-item:hover .information .sub-info .right { 92 | transition: all 0.35s ease-in-out; 93 | color: #fff; 94 | } -------------------------------------------------------------------------------- /02recList/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: 'Inter', sans-serif; 11 | background-color: #F7F9FC; 12 | display: flex; 13 | min-height: 100vh; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | main { 19 | width: 75%; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | 24 | img { 25 | height: 15px; 26 | width: 15px; 27 | } 28 | } 29 | 30 | .recording-list { 31 | width: 75%; 32 | 33 | .list-item { 34 | background-color: #fff; 35 | width: 100%; 36 | height: 6em; 37 | border-radius: 7px; 38 | margin: 8px 0px; 39 | display: flex; 40 | flex-direction: row; 41 | justify-content: start; 42 | align-items: center; 43 | box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 44 | transition: all .35s ease-in-out; 45 | 46 | .play-icon { 47 | margin: 0 1.1em 0 1.5em; 48 | background-color: #F7F9FC; 49 | border: 1px solid #AAAFCB; 50 | border-radius: 50%; 51 | height: 3em; 52 | width: 3.25em; 53 | display: inline-block; 54 | text-align: center; 55 | cursor: pointer; 56 | 57 | img { 58 | margin-top: 1em; 59 | margin-left: 3px; 60 | } 61 | } 62 | 63 | .date { 64 | font-weight: 600; 65 | } 66 | 67 | .information { 68 | width: 100%; 69 | 70 | .sub-info { 71 | width: 100%; 72 | display: flex; 73 | flex-direction: row; 74 | justify-content: space-between; 75 | padding-right: 1.5em; 76 | 77 | small { 78 | font-size: 0.8rem; 79 | 80 | // This is what I had to do to 81 | // make these inline images align properly 82 | img { 83 | display: inline-block; 84 | vertical-align: middle; 85 | height: 17px; 86 | width: auto; // Only because Opera logo was not happy 87 | padding-bottom: 2px; 88 | } 89 | } 90 | 91 | .right { 92 | transition: all .35s ease-in-out; 93 | color: #646464; 94 | } 95 | } 96 | } 97 | } 98 | 99 | .list-item:hover { 100 | background-color: #4C5FFF; 101 | color: #fff; 102 | transition: all .35s ease-in-out; 103 | 104 | .information { 105 | .sub-info { 106 | .right { 107 | transition: all .35s ease-in-out; 108 | color: #fff; 109 | } 110 | } 111 | } 112 | } 113 | } -------------------------------------------------------------------------------- /03domainLandingSite/Readme.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Name of the Component

4 | Demo Design 5 |

6 | 7 | Designed by ``
8 | Developed by `` 9 | 10 | 11 | 12 |

-------------------------------------------------------------------------------- /03domainLandingSite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Domain Landing Page 8 | 9 | 10 | 11 |

12 |

13 |

Domains
Email & Marketing
Hosting
Blog
19 | Sign in 20 |
21 |
22 |
Registered users
23 |
Have an account?
Sign in now.
24 | Sign in 25 |
26 |
27 |
New Customers
28 |
Are you new? Create an
account to get started.
29 | Create Account 30 |
31 |
32 |

34 |

35 |

36 |

37 |

38 |

Buy your domain today

39 |

40 | With 80+ million domains under management, we have more
41 | experience than anyone. We'll make sure you find the right domain. 42 |

43 | 47 |

48 |

49 |

50 |

51 |

52 |

.com

53 |

$99

54 |

Renewal for DKK 189

55 |

56 |

57 |

58 |

59 |

.com

60 |

$99

61 |

Renewal for DKK 189

62 |

63 |

64 |

65 |

66 |

.com

67 |

$99

68 |

Renewal for DKK 189

69 |

Free with hosting

70 |

71 |

72 |

73 |

74 |

.com

75 |

$99

76 |

Renewal for DKK 189

77 |

Free with hosting

78 |

79 |

80 |

81 |

82 |

.com

83 |

$99

84 |

Renewal for DKK 189

85 |

86 |

87 |

88 |

89 |

.com

90 |

$99

91 |

Renewal for DKK 189

92 |

Free with hosting

93 |

94 |

95 |

96 |

97 |

98 | 99 | -------------------------------------------------------------------------------- /03domainLandingSite/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Mulish&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background-color: #F5F1FC; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | font-family: "Mulish", sans-serif; 15 | } 16 | 17 | main { 18 | width: 90vw; 19 | height: 90vh; 20 | background-color: #FFF; 21 | border-radius: 7px; 22 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 23 | } 24 | main nav { 25 | display: flex; 26 | justify-content: flex-end; 27 | height: 5%; 28 | } 29 | main nav li { 30 | list-style-type: none; 31 | display: inline-flex; 32 | flex-direction: column; 33 | height: 100%; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | main nav li a { 38 | padding: 0 1.5em; 39 | text-decoration: none; 40 | color: #000; 41 | height: 50%; 42 | } 43 | main nav .sign-link { 44 | background-color: #000; 45 | position: relative; 46 | border-radius: 0 7px 0 0; 47 | } 48 | main nav .sign-link a { 49 | vertical-align: middle; 50 | color: #fff; 51 | } 52 | main nav .sign-link .sign-register { 53 | position: absolute; 54 | display: none; 55 | width: 30em; 56 | height: 15em; 57 | top: 47px; 58 | left: -380px; 59 | background-color: #fff; 60 | border: 2px solid black; 61 | padding: 25px 45px 25px 45px; 62 | } 63 | main nav .sign-link .sign-register a { 64 | color: black; 65 | } 66 | main nav .sign-link .sign-register .sign-in { 67 | height: 100%; 68 | } 69 | main nav .sign-link .sign-register .register { 70 | height: 100%; 71 | } 72 | main nav .sign-link :hover + .sign-register { 73 | display: flex; 74 | justify-content: space-between; 75 | align-items: center; 76 | } 77 | main .main-content { 78 | height: 95%; 79 | } 80 | main .main-content .hero { 81 | height: 80%; 82 | display: flex; 83 | align-items: center; 84 | background: pink url(https://images.unsplash.com/photo-1518253042715-a2534e1b0a7b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3800&q=80) no-repeat fixed left; 85 | } 86 | main .main-content .hero .hero-content { 87 | padding-left: 5em; 88 | } 89 | main .main-content .hero .hero-content h3 { 90 | font-size: 2rem; 91 | padding: 0 0 0.4em 0; 92 | } 93 | main .main-content .hero .hero-content p { 94 | font-size: 1.2rem; 95 | padding: 0 0 0.4em 0; 96 | } 97 | main .main-content .hero .hero-content .search-box { 98 | display: flex; 99 | } 100 | main .main-content .hero .hero-content .search-box input { 101 | border: none; 102 | height: 2em; 103 | outline: none; 104 | border-radius: 5px 0 0 5px; 105 | padding: 20px 35px 20px 35px; 106 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); 107 | } 108 | main .main-content .hero .hero-content .search-box a { 109 | display: flex; 110 | justify-content: center; 111 | align-items: center; 112 | background-color: #000; 113 | color: #fff; 114 | text-decoration: none; 115 | border-radius: 0 5px 5px 0; 116 | padding: 0 1.5em; 117 | font-size: 0.7rem; 118 | } 119 | main .main-content .tld-cards { 120 | height: 20%; 121 | width: 100%; 122 | display: flex; 123 | justify-content: center; 124 | align-items: center; 125 | } 126 | main .main-content .tld-cards .card-outer { 127 | background-color: #fff; 128 | height: 100%; 129 | width: 100%; 130 | display: flex; 131 | justify-content: center; 132 | align-items: center; 133 | transition: all 0.35s; 134 | } 135 | main .main-content .tld-cards .card-outer .card { 136 | padding: 50px 25px 25px 25px; 137 | position: relative; 138 | height: 100%; 139 | z-index: 1; 140 | } 141 | main .main-content .tld-cards .card-outer .card .card-head { 142 | font-size: 1.75rem; 143 | font-weight: 700; 144 | } 145 | main .main-content .tld-cards .card-outer .card .featured { 146 | position: absolute; 147 | top: 30px; 148 | left: 0; 149 | background-color: #F3F0F7; 150 | padding: 2px; 151 | font-size: 0.75rem; 152 | border-top-right-radius: 5px; 153 | border-bottom-right-radius: 5px; 154 | } 155 | main .main-content .tld-cards .card-outer .card .featured p { 156 | padding: 3px 15px 3px 25px; 157 | } 158 | main .main-content .tld-cards .card-outer:hover { 159 | transform: scale(1.1); 160 | transition: all 0.35s; 161 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); 162 | z-index: 25; 163 | } -------------------------------------------------------------------------------- /03domainLandingSite/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #F5F1FC; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | min-height: 100vh; 15 | font-family: 'Mulish', sans-serif; 16 | } 17 | 18 | main { 19 | width: 90vw; 20 | height: 90vh; 21 | background-color: #FFF; 22 | border-radius: 7px; 23 | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 24 | 25 | nav { 26 | display: flex; 27 | justify-content: flex-end; 28 | height: 5%; 29 | // border: 1px solid red; 30 | 31 | li { 32 | list-style-type: none; 33 | display: inline-flex; 34 | flex-direction: column; 35 | height: 100%; 36 | // border: 1px solid blue; 37 | justify-content: center; 38 | align-items: center; 39 | 40 | a { 41 | padding: 0 1.5em; 42 | text-decoration: none; 43 | color: #000; 44 | // border: 1px solid red; 45 | height: 50%; 46 | } 47 | } 48 | 49 | .sign-link { 50 | background-color: #000; 51 | position: relative; 52 | border-radius: 0 7px 0 0; 53 | 54 | a { 55 | vertical-align: middle; 56 | color: #fff; 57 | } 58 | 59 | .sign-register { 60 | position: absolute; 61 | display: none; 62 | width: 30em; 63 | height: 15em; 64 | top: 47px; 65 | left: -380px; 66 | background-color: #fff; 67 | border: 2px solid black; 68 | padding: 25px 45px 25px 45px; 69 | 70 | a { 71 | color: black; 72 | } 73 | 74 | .sign-in { 75 | height: 100% 76 | } 77 | 78 | .register { 79 | height: 100% 80 | } 81 | } 82 | 83 | :hover+.sign-register { 84 | display: flex; 85 | justify-content: space-between; 86 | align-items: center; 87 | } 88 | } 89 | } 90 | 91 | .main-content { 92 | height: 95%; 93 | 94 | .hero { 95 | height: 80%; 96 | // background-color: pink; 97 | display: flex; 98 | align-items: center; 99 | background: pink url(https://images.unsplash.com/photo-1518253042715-a2534e1b0a7b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3800&q=80) no-repeat fixed left; 100 | 101 | .hero-content { 102 | padding-left: 5em; 103 | 104 | h3 { 105 | font-size: 2rem; 106 | padding: 0 0 0.4em 0; 107 | } 108 | 109 | p { 110 | font-size: 1.2rem; 111 | padding: 0 0 0.4em 0; 112 | } 113 | 114 | .search-box { 115 | display: flex; 116 | 117 | input { 118 | border: none; 119 | height: 2em; 120 | outline: none; 121 | border-radius: 5px 0 0 5px; 122 | padding: 20px 35px 20px 35px; 123 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); 124 | } 125 | 126 | a { 127 | display: flex; 128 | justify-content: center; 129 | align-items: center; 130 | background-color: #000; 131 | color: #fff; 132 | text-decoration: none; 133 | border-radius: 0 5px 5px 0; 134 | padding: 0 1.5em; 135 | font-size: 0.7rem; 136 | } 137 | } 138 | } 139 | } 140 | 141 | .tld-cards { 142 | height: 20%; 143 | width: 100%; 144 | display: flex; 145 | justify-content: center; 146 | align-items: center; 147 | 148 | .card-outer { 149 | // border: 1px solid red; 150 | background-color: #fff; 151 | height: 100%; 152 | width: 100%; 153 | display: flex; 154 | justify-content: center; 155 | align-items: center; 156 | transition: all 0.35s; 157 | 158 | .card { 159 | padding: 50px 25px 25px 25px; 160 | position: relative; 161 | height: 100%; 162 | z-index: 1; 163 | 164 | .card-head { 165 | font-size: 1.75rem; 166 | font-weight: 700; 167 | } 168 | 169 | .featured { 170 | position: absolute; 171 | top: 30px; 172 | left: 0; 173 | background-color: #F3F0F7; 174 | padding: 2px; 175 | font-size: 0.75rem; 176 | border-top-right-radius: 5px; 177 | border-bottom-right-radius: 5px; 178 | 179 | p { 180 | padding: 3px 15px 3px 25px; 181 | } 182 | } 183 | } 184 | } 185 | 186 | .card-outer:hover { 187 | transform: scale(1.1); 188 | transition: all 0.35s; 189 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); 190 | z-index: 25; 191 | } 192 | } 193 | } 194 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

3 |

✨DesignToCode✨

4 | 🦋 Awesome UI component designs using pure HTML+CSS
5 | Learn CSS by implementing awesome designs

6 |

7 |

8 |
9 |

Leave a star 🌟 and show your support! 🙌

10 |

11 | 12 | ## List of implemented Designs: 13 | 14 | 1. [reference-template](https://devdesigneer.github.io/designtocode/00template/)
15 | designed by _▶Designer name linked with relevant work◀_
16 | developed by _▶Developer name linked with relevant profile◀_ 17 | 2. [Search UI Design](https://devdesigneer.github.io/designtocode/01searchUI-1/)
18 | designed by _[Ildiko Gaspar](https://dribbble.com/shots/14183671-Search-UI-Design)_
19 | developed by _[ABSphreak](https://github.com/ABSphreak)_ 20 | 3. [Recordings List Design](https://devdesigneer.github.io/designtocode/02recList/)
21 | designed by _[Ildiko Gaspar](https://dribbble.com/shots/14165497-Recordings-List)_
22 | developed by _[ABSphreak](https://github.com/ABSphreak)_ 23 | 4. [Domain Site Landing Page](https://devdesigneer.github.io/designtocode/03domainLandingSite/)
24 | designed by _[Ildiko Gaspar](https://dribbble.com/shots/14033752-Domain-Site-Landing-Page)_
25 | developed by _[ABSphreak](https://github.com/ABSphreak)_ 26 | 27 | --- 28 | ## License 29 | 30 | [![CC0](https://licensebuttons.net/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/) 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Make UI 8 | 9 | 10 | 11 |

Awesome collection of UI designs implemented in CSS

12 | 13 | 14 | -------------------------------------------------------------------------------- /site/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevDesigneer/designtocode/387bdbcabf5e453d923d545fd4afcaf3b2b2598c/site/banner.png --------------------------------------------------------------------------------