Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Feb 6, 2020

Embed
What would you like to do?
Neuomorphic Section
<div class="container">
<div class="row mt-5 mb-5">
<div class="col-md-3 col-sm-3">
<div class="col-md-12 text-center mb-4">
<span class="heading-name">Box</span>
</div>
<div class="box-container">
<div class="col-md-12">
<div class="icon-set-box">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g id="Rfan1">
<path id="fan1" style="fill:#EEEEEE;" d="M226.425,157.47c0-1.411,0.105-2.797,0.294-4.157L65.313,128.649
c-4.184,27.312,34.645,55.904,86.727,63.863c34.703,5.303,66.528,0.104,85.145-12.033
C230.609,174.973,226.425,166.711,226.425,157.47z"/>
<path id="fan2" style="fill:#EEEEEE;" d="M275.533,134.255L383.844,17.92c-20.261-18.814-65.77-2.827-101.648,35.709
c-23.662,25.415-37.217,54.287-37.897,76.401c3.725-1.652,7.844-2.577,12.182-2.577
C263.713,127.453,270.347,130.005,275.533,134.255z"/>
<path style="fill:#EEEEEE;" d="M286.148,162.281c-1.827,11.318-9.985,20.52-20.734,23.857L324.84,334.37
c25.684-10.27,30.629-58.195,11.046-107.045C323.682,196.886,304.835,173.274,286.148,162.281z"/>
</g>
<ellipse style="fill:#69CAEE;" cx="256.48" cy="157.47" rx="30.06" ry="30.02"/>
<path style="fill:#CBC2BA;" d="M265.414,186.139c0.088-0.027-5.726,1.348-8.933,1.348c-7.699,0-14.72-2.895-20.038-7.649v274.479
c6.842,0.887,13.27,2.102,17.477,3.606c5.874-4.398,13.71-8.256,22.598-11.458V213.838L265.414,186.139z"/>
<path d="M461.906,491.768c0,0-21.547,0-21.555,0c-3.808-0.052-6.383-9.115-7.85-11.858c-9.805-18.338-27.808-33.362-46.267-42.482
c-15.169-7.494-31.88-11.287-49.673-11.287h-0.07c-16.757,0.012-33.776,2.39-49.953,6.746V265.749c0,0,28.909,72.11,29.001,72.34
c1.968,4.908,8.1,7.541,13.025,5.57c16.047-6.416,26.254-23.22,28.741-47.318c2.249-21.801-2.054-47.632-12.118-72.735
c-11.499-28.685-29.395-53.029-48.643-66.515c-0.08-8.473-2.814-16.314-7.405-22.755L391.181,24.733
c3.768-4.047,3.537-10.378-0.515-14.141c-12.659-11.754-32.233-13.801-55.115-5.763c-20.702,7.273-42.256,22.183-60.693,41.987
c-22.773,24.461-37.448,52.806-40.145,77.075c-6.739,4.372-12.079,10.713-15.212,18.198l-152.673-23.33
c-5.475-0.841-10.582,2.915-11.419,8.377c-2.615,17.064,6.698,34.38,26.221,48.756c17.663,13.006,42.13,22.422,68.894,26.511
c25.014,3.822,51.959,3.374,75.9-5.529c0,0,0,246.356-0.001,246.356c-20.211-1.596-40.432,0.201-59.351,7.857
c-20.093,8.131-38.251,22.69-50.044,40.903H10.019C4.498,491.989,0,496.48,0,501.994C0,507.517,4.498,512,10.019,512H122.74
c3.767,0,7.284-2.171,8.977-5.543c14.531-28.94,49.698-43.845,80.621-43.845h0.07c17.467,0,33.706,2.474,49.663,9.642
c13.197,5.928,27.235,12.319,38.373,21.712c4.069,3.432,10.545,3.039,14.119-1.188c3.57-4.221,3.038-10.534-1.189-14.1
c-9.599-8.096-24.509-15.983-36.51-21.65c5.113-2.006,10.781-3.822,16.707-5.312c27.259-6.968,57.915-9.066,83.797,3.652
c19.81,9.746,35.41,27.158,45.539,46.506c2.546,4.864,4.688,9.906,11.107,9.906h27.893c5.52,0,10.019-4.492,10.019-10.006
C471.925,496.261,467.426,491.768,461.906,491.768z M153.556,182.622c-23.615-3.608-44.935-11.719-60.033-22.837
c-8.389-6.176-14.142-12.845-16.805-19.271l139.932,21.383c0.605,5.457,2.319,10.685,5.007,15.389
C204.068,184.462,179.167,186.535,153.556,182.622z M266.5,439.628c-5.386,2.264-10.173,4.721-14.323,7.353
c-1.736-0.434-3.642-0.844-5.715-1.23V196.224c4.087,1.053,8.398,1.441,12.651,1.167c0.006,0,0.016,0.006,0.022,0.005l7.365,18.37
V439.628z M290.866,177.965c13.925,11.884,26.819,30.881,35.718,53.079c8.88,22.149,12.711,44.61,10.788,63.246
c-1.068,10.354-3.899,18.69-8.089,24.245l-51.091-127.443C283.361,187.737,287.705,183.225,290.866,177.965z M289.534,60.442
c16.267-17.473,34.971-30.519,52.667-36.736c9.831-3.455,18.59-4.453,25.406-3.042l-93.78,100.73
c-5.38-2.577-11.316-3.948-17.345-3.948c-0.101,0-0.202,0-0.303,0.001C260.618,99.38,272.638,78.589,289.534,60.442z
M256.481,137.458c11.049,0,20.038,8.977,20.038,20.011c0,11.035-8.989,20.011-20.038,20.011c-11.049,0-20.038-8.977-20.038-20.011
S245.432,137.458,256.481,137.458z"/>
<path d=""/>
<path d="M501.971,491.768c-5.52,0-10.009,4.493-10.009,10.006c0,5.514,4.488,10.006,10.009,10.006
c5.53,0,10.029-4.492,10.029-10.006C512,496.261,507.501,491.768,501.971,491.768z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
</div>
<div class="col-md-12">
<p class="heading-main">
DOLOR AMET LOREM IPSUM SIT
</p>
</div>
<div class="col-md-12">
<p class="subheading-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary">Read More</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="col-md-12 text-center mb-4">
<span class="heading-name">CAPSULE</span>
</div>
<div class="box-container capsule">
<div class="col-md-12">
<div class="icon-set-box">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<g>
<ellipse style="fill:#EEEEEE;" cx="254.75" cy="215.79" rx="40.04" ry="40.05"/>
<path style="fill:#EEEEEE;" d="M294.789,358.945c0-22.163-17.926-40.129-40.04-40.129s-40.04,17.966-40.04,40.129v42.804h80.079
v-42.804H294.789z"/>
</g>
<path style="fill:#69CAEE;" d="M258.921,11.199c-11.973,11.975-21.336,25.572-28.093,40.082l187.087,187.123
c14.508-6.759,28.101-16.123,40.074-28.098L258.921,11.199z"/>
<rect x="129.28" y="451.87" style="fill:#75706B;" width="250.93" height="50.12"/>
<rect x="158.23" y="401.75" style="fill:#00ADEE;" width="193.04" height="50.12"/>
<circle style="fill:#EEEEEE;" cx="436.92" cy="30.04" r="20.02"/>
<path style="fill:#00ADEE;" d="M230.828,51.281c-19.111,41.037-17.35,89.383,5.253,129.083c5.575-2.945,11.924-4.619,18.667-4.619
c22.113,0,40.04,17.93,40.04,40.047c0,6.567-1.59,12.759-4.392,18.228c39.398,21.784,87.019,23.252,127.518,4.384L230.828,51.281z"
/>
<path style="fill:#75706B;" d="M254.749,318.816c7.296,0,14.129,1.965,20.02,5.382v-73.73c-5.891,3.41-12.724,5.371-20.02,5.371
s-14.129-1.961-20.02-5.371v73.73C240.62,320.781,247.454,318.816,254.749,318.816z"/>
<path d="M465.068,203.226l-93.01-93.028l51.278-53.388c4.082,2.079,8.694,3.26,13.58,3.26c16.558,0,30.03-13.474,30.03-30.036
S453.475,0,436.916,0c-16.558,0-30.03,13.474-30.03,30.036c0,4.367,0.945,8.516,2.628,12.263l-51.615,53.738L266,4.12
c-3.91-3.91-10.246-3.91-14.157,0c-12.539,12.542-22.662,26.987-30.088,42.934c-0.004,0.008-0.007,0.017-0.011,0.026
c-19.268,41.395-18.648,89.329,1.299,130.028c-11.188,9.185-18.343,23.11-18.343,38.684c0,16.34,7.873,30.866,20.02,40.005v63.074
c-12.145,9.156-20.02,23.707-20.02,40.073v32.792h-46.472c-5.528,0-10.01,4.482-10.01,10.012v40.108h-18.933
c-5.528,0-10.01,4.482-10.01,10.012v40.111H54.01c-5.526,0-10.01,4.485-10.01,10.002c0,5.527,4.484,10.012,10.01,10.012h184.917
c0,0.002,0.001,0.004,0.001,0.006l165.419-0.006c5.525,0,10.01-4.485,10.01-10.012c0-5.517-4.485-10.002-10.01-10.002h-14.124
v-40.111c0-5.529-4.482-10.012-10.01-10.012H361.28v-40.108c0-5.529-4.482-10.012-10.01-10.012h-46.472v-32.792
c0-16.367-7.873-30.92-20.02-40.076v-63.076c3.368-2.535,6.39-5.498,9.022-8.786c20.364,9.662,42.508,14.528,64.692,14.527
c21.731,0,43.499-4.667,63.649-14.054c0.002-0.001,0.005-0.003,0.007-0.004c15.942-7.427,30.381-17.551,42.919-30.09
C468.977,213.476,468.977,207.136,465.068,203.226z M436.916,20.024c5.519,0,10.01,4.491,10.01,10.012s-4.491,10.012-10.01,10.012
s-10.01-4.491-10.01-10.012S431.397,20.024,436.916,20.024z M224.719,358.945c0-16.607,13.471-30.117,30.03-30.117
s30.03,13.511,30.03,30.117v32.792h-60.06V358.945z M244.739,309.819v-44.981c6.565,1.341,13.455,1.341,20.02,0v44.981
c-3.283-0.672-6.636-1.015-10.01-1.015C251.376,308.804,248.022,309.147,244.739,309.819z M370.204,461.881v30.096H139.295v-30.096
H370.204z M341.261,411.761v30.096H168.238v-30.096H341.261z M254.749,245.828c-16.558,0-30.03-13.474-30.03-30.036
s13.471-30.036,30.03-30.036s30.03,13.474,30.03,30.036S271.308,245.828,254.749,245.828z M302.965,229.197
c1.209-4.356,1.834-8.879,1.834-13.405c0-27.603-22.452-50.059-50.05-50.059c-4.741,0-9.468,0.682-14.005,2.003
c-14.911-30.796-17.107-66.312-6.263-98.643l165.622,165.655C368.346,245.386,333.389,243.448,302.965,229.197z M419.9,226.231
L243,49.296c4.5-8.454,9.917-16.374,16.187-23.671l184.38,184.415C436.272,216.312,428.353,221.73,419.9,226.231z"/>
<path d="M254.749,205.431c-2.632,0-5.215,1.071-7.077,2.934c-1.862,1.862-2.933,4.445-2.933,7.078s1.07,5.216,2.933,7.078
c1.862,1.863,4.434,2.934,7.077,2.934c2.632,0,5.215-1.071,7.076-2.934c1.862-1.862,2.934-4.445,2.934-7.078
s-1.071-5.216-2.934-7.078C259.964,206.502,257.382,205.431,254.749,205.431z"/>
<path d="M444.387,491.98c-5.516,0-10,4.485-10,10.002c0,5.527,4.484,10.012,10,10.012c5.525,0,10.01-4.485,10.01-10.012
C454.397,496.466,449.912,491.98,444.387,491.98z"/>
<path d="M254.749,350.603c-2.632,0-5.215,1.071-7.077,2.934c-1.862,1.862-2.933,4.445-2.933,7.078c0,2.643,1.07,5.216,2.933,7.078
c1.862,1.863,4.445,2.934,7.077,2.934s5.215-1.071,7.076-2.934c1.862-1.862,2.934-4.435,2.934-7.078
c0-2.633-1.071-5.216-2.934-7.078C259.964,351.674,257.382,350.603,254.749,350.603z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
</div>
<div class="col-md-12">
<p class="heading-main">
DOLOR AMET LOREM IPSUM SIT
</p>
</div>
<div class="col-md-12">
<p class="subheading-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary">Read More</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="col-md-12 text-center mb-4">
<span class="heading-name">TAG</span>
</div>
<div class="box-container tag">
<div class="col-md-12">
<div class="icon-set-box">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#CBC2BA;" d="M304.736,139.636l-28.731,11.858c-10.581,12.115-28.984,12.115-39.565,0l-27.001-11.858
c0,0-103.582-0.516-139.398,11.969l-6.855,61.875c-2.288,20.042,16.936,73.989,30.495,77.371l98.309,12.228
c4.994,1.245,37.034,20.561,37.034,20.561c9.724,11.133,42.637,11.133,52.36,0c0,0,35.308-19.734,38.624-20.561l98.309-12.228
c13.56-3.382,32.783-57.329,30.495-77.371l-6.861-61.935C406.482,139.121,304.736,139.636,304.736,139.636z"/>
<path style="fill:#00ADEE;" d="M300.786,95.71l-26.403,10.897c-9.724,11.133-26.635,11.133-36.359,0L213.212,95.71
c0,0-136.836-0.686-139.124,19.356l-4.048,36.537c35.816-12.485,139.398-11.969,139.398-11.969l27.001,11.858
c10.581,12.115,28.984,12.115,39.565,0l28.731-11.858c0,0,101.746-0.515,137.215,11.909l-4.041-36.478
C435.622,95.025,300.786,95.71,300.786,95.71z"/>
<path style="fill:#9B4C14;" d="M213.212,95.71l24.813,10.897c9.724,11.133,26.635,11.133,36.359,0l26.403-10.897
c0,0,71.909-0.364,111.589,7.246C386.299,53.066,323.084,10,255.999,10c-67.118,0-130.364,43.109-156.416,93.03
C139.754,95.343,213.212,95.71,213.212,95.71z"/>
<path style="fill:#F6A98A;" d="M281.384,323.64c-9.724,11.133-42.637,11.133-52.36,0c0,0-32.039-19.316-37.034-20.561l-77.479-9.637
L120.313,382c0,66.274,83.146,120,135.685,120s135.685-53.726,135.685-120l7.429-88.761l-79.106,9.84
C316.692,303.905,281.384,323.64,281.384,323.64z"/>
<path d="M288.999,387.81h-60c-5.52,0-10,4.49-10,10c0,5.52,4.48,10,10,10h60c5.51,0,10-4.48,10-10
C298.999,392.3,294.508,387.81,288.999,387.81z"/>
<path d="M458.751,212.378l-10.906-98.445c-1.329-11.644-14.975-16.638-27.649-19.554c-0.123,0.399-0.289,0.785-0.492,1.146
c-14.078-25.54-36.984-48.983-64.873-66.258C323.92,10.121,289.744,0,255.999,0c-33.763,0-67.953,10.13-98.876,29.295
c-27.377,16.967-49.958,39.872-64.086,64.871c-13.782,3.024-27.526,7.867-28.888,19.8L53.25,212.345
c-1.519,13.308,4.112,34.352,9.888,49.608c8.763,23.145,18.225,36.131,28.123,38.6c0.39,0.098,13.811,1.791,13.811,1.791
l5.241,79.993c0.126,33.072,18.554,65.857,51.922,92.348C191.229,497.702,227.156,512,255.999,512s64.77-14.298,93.763-37.315
c33.338-26.466,51.763-59.213,51.922-92.255l6.719-80.27c0,0,11.944-1.51,12.334-1.608c9.898-2.468,19.36-15.455,28.123-38.6
C454.635,246.697,460.266,225.653,458.751,212.378z M250.398,20.106c0,0,23.167,38.642,23.186,38.675
c2.729,4.553,8.998,6.264,13.719,3.435c4.737-2.84,6.274-8.982,3.435-13.719l-16.411-27.374
c50.089,6.009,93.48,35.758,118.035,68.815c-39.653-4.427-89.138-4.239-91.626-4.227c-1.292,0.007-32.867,13.156-33.883,14.319
c-2.776,3.178-6.557,4.928-10.648,4.928s-7.872-1.75-10.647-4.928c-0.967-1.107-30.927-14.313-32.295-14.319
c-0.251-0.001-57.346,0.244-93.686,4.306C146.177,54.15,194.933,22.146,250.398,20.106z M83.811,118.12
c3.139-1.945,16.487-7.638,67.702-10.671c26.74-1.583,52.314-1.732,59.595-1.74l21.032,9.237
c6.412,6.391,15.055,10.012,24.063,10.013l0,0c8.967,0,17.572-3.589,23.975-9.924l22.595-9.326
c7.043,0.006,32.248,0.148,58.676,1.733c50.513,3.027,63.652,8.709,66.732,10.641l2.228,20.108
c-43.413-8.854-121.976-8.569-125.726-8.555c-1.292,0.007-35.196,14.117-36.212,15.28c-3.19,3.653-7.541,5.665-12.251,5.665
s-9.061-2.012-12.251-5.665c-0.966-1.107-33.115-15.273-34.483-15.28c-0.306-0.001-87.513,0.418-127.909,8.63L83.811,118.12z
M381.719,381.166c-0.023,0.277-0.035,0.556-0.035,0.834c0,59.659-77.2,110-125.686,110s-125.686-50.341-125.686-110
c0-0.218-0.007-0.436-0.021-0.654l-5.011-76.488l64.419,8.013c4.201,1.773,19.792,10.699,33.002,18.636
c9.511,9.43,25.752,10.483,32.501,10.483c6.718,0,22.84-1.043,32.369-10.352c6.985-3.897,32.768-17.814,34.909-18.79l65.64-8.165
L381.719,381.166z M430.946,252.739c-6.495,17.871-12.783,26.491-15.24,28.358c0,0-97.728,12.181-98.118,12.278
c-1.379,0.344-42.981,22.822-43.736,23.686c-2.086,2.389-9.332,4.928-18.648,4.928s-16.562-2.539-18.648-4.928
c-0.682-0.781-37.865-22.618-42.146-23.686c-0.39-0.098-98.119-12.278-98.119-12.278c-2.457-1.867-8.745-10.488-15.24-28.358
c-5.503-15.142-8.764-30.819-7.927-38.159l6.127-55.307c35.113-9.131,114.315-9.625,128.083-9.64l23.207,10.192
c6.824,6.862,16.056,10.754,25.68,10.754c9.583,0,18.775-3.858,25.591-10.666l24.91-10.281c13.295,0.013,91.244,0.486,126.016,9.571
l6.138,55.409C439.71,221.92,436.449,237.598,430.946,252.739z"/>
<path d="M289.242,189.132c-0.755-5.471-5.806-9.297-11.274-8.538c-5.471,0.755-9.293,5.803-8.538,11.274c0,0,9.175,66.44,9.184,66.5
c0.72,5.21,5.997,9.271,11.274,8.538c5.471-0.755,9.293-5.803,8.538-11.274L289.242,189.132z"/>
<path d="M231.015,180.594c-5.468-0.758-10.518,3.066-11.274,8.538l-9.184,66.5c-0.756,5.471,3.067,10.519,8.538,11.274
c5.408,0.75,10.531-3.158,11.274-8.538c0-0.002,9.184-66.5,9.184-66.5C240.308,186.397,236.485,181.35,231.015,180.594z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
</div>
<div class="col-md-12">
<p class="heading-main">
DOLOR AMET LOREM IPSUM SIT
</p>
</div>
<div class="col-md-12">
<p class="subheading-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary">Read More</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="col-md-12 text-center mb-4">
<span class="heading-name">NAUTILUS</span>
</div>
<div class="box-container NAUTILUS">
<div class="col-md-12">
<div class="icon-set-box">
<svg version="1.1" width="100%" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#41A75F;" d="M252.737,223.842c-30.605,0-34.981,14.739-67.627,14.739c-31.406,0-26.257-14.009-69.432-15.07
c-6.681,12.975-10.461,27.696-10.461,43.305c0,52.204,42.197,94.525,94.251,94.525c52.052,0,94.25-42.32,94.25-94.525
c0-12.744-2.521-24.895-7.079-35.989C278.467,227.221,267.007,223.842,252.737,223.842z"/>
<path style="fill:#F6931E;" d="M175.467,442.578c0-11.078,12.954-40.187,24-40.187s24,29.109,24,40.187s-12.954,19.282-24,19.282
C188.421,461.86,175.467,453.656,175.467,442.578z"/>
<ellipse style="fill:#CBC2BA;" cx="359.721" cy="116.941" rx="30" ry="30.09"/>
<rect x="144.019" y="461.863" style="fill:#75706B;" width="110.891" height="40.12"/>
<rect x="322.53" y="461.863" style="fill:#CBC2BA;" width="74.38" height="40.12"/>
<path style="fill:#EEEEEE;" d="M220.767,174.715v-36.408h-42.601v36.408c-27.25,6.314-49.969,24.483-62.488,48.795
c43.175,1.061,38.026,15.07,69.432,15.07c32.646,0,37.022-14.739,67.627-14.739c14.27,0,25.729,3.379,33.9,6.985
C275.149,202.87,250.687,181.647,220.767,174.715z"/>
<rect x="152.779" y="95.581" style="fill:#CBC2BA;" width="93.361" height="42.725"/>
<rect x="161.099" y="52.807" style="fill:#EEEEEE;" width="76.11" height="42.73"/>
<path d="M60.998,491.951c-5.51,0-10,4.493-10,10.019c0,5.536,4.49,10.029,10,10.029c5.521,0,10-4.494,10-10.029
C70.998,496.445,66.518,491.951,60.998,491.951z"/>
<path d="M451,491.951h-44.09v-30.092c0-5.539-4.478-10.029-10-10.029h-27.189V155.792c17.233-4.465,30-20.189,30-38.847
s-12.767-34.382-30-38.847V10.029c0-5.539-4.478-10.029-10-10.029s-10,4.49-10,10.029v68.068
c-14.035,3.636-25.108,14.741-28.734,28.818h-64.837V95.583c0-5.178-3.914-9.438-8.936-9.971V52.807c0-5.522-4.478-10-10-10h-76.109
c-5.522,0-10,4.478-10,10v32.899c-4.72,0.803-8.318,4.914-8.318,9.876v11.333h-40.756c-5.522,0-10,4.49-10,10.029
c0,5.539,4.478,10.029,10,10.029h40.756v11.334c0,5.539,4.478,10.029,10,10.029h15.382v18.719
c-26.42,8.312-48.511,26.872-61.373,51.852c-0.001,0.003-0.002,0.006-0.004,0.008c-7.571,14.705-11.573,31.268-11.573,47.899
c0,57.651,46.766,104.555,104.25,104.555s104.251-46.903,104.251-104.555c0-13.765-2.636-27.159-7.834-39.81
c-11.82-28.766-35.825-50.706-65.115-59.945v-18.723h15.381c5.522,0,10-4.49,10-10.029v-11.334h64.837
c3.626,14.076,14.699,25.181,28.734,28.818v296.039h-27.19c-5.522,0-10,4.49-10,10.029v30.092h-47.618V461.86
c0-5.539-4.478-10.029-10-10.029h-23.264c1.165-2.864,1.82-5.962,1.82-9.253c0-12.519-13.73-50.216-34-50.216s-34,37.697-34,50.216
c0,3.294,0.67,6.388,1.837,9.253h-23.28c-5.522,0-10,4.49-10,10.029v30.092H101c-5.51,0-10,4.493-10,10.019
C91,507.507,95.49,512,101,512h350.002c5.521,0,10-4.494,10-10.029C461,496.445,456.52,491.951,451,491.951z M171.102,62.807h56.109
v22.729h-56.109V62.807z M278.857,238.478c3.227,9.076,4.859,18.588,4.859,28.337c0,46.592-37.794,84.496-84.251,84.496
c-46.455,0-84.249-37.904-84.249-84.496c0-11.511,2.241-22.584,6.669-33c16.274,1.042,23.413,4.303,30.342,7.468
c23.292,10.636,48.521,8.521,71.677-0.966c8.445-3.459,15.739-6.447,28.831-6.447C261.915,233.871,270.682,235.419,278.857,238.478z
M265.767,214.67c-4.267-0.571-8.614-0.858-13.03-0.858c-17.018,0-27.311,4.216-36.392,7.936
c-18.083,7.407-37.782,9.522-55.826,1.281c-6.401-2.925-13.954-6.374-27.451-8.242c11.786-15.154,28.414-25.913,47.35-30.301
c4.536-1.051,7.749-5.103,7.749-9.771v-26.379h22.601v26.379c0,4.669,3.213,8.721,7.749,9.771
C237.408,188.864,254.024,199.663,265.767,214.67z M236.148,128.278h-73.363v-22.667h73.363L236.148,128.278L236.148,128.278z
M199.466,412.836c5.221,3.921,14,22.18,14,29.74c0,4.324-7.458,9.253-14,9.253c-6.542,0-14-4.929-14-9.253
C185.466,435.018,194.246,416.758,199.466,412.836z M244.911,491.948h-90.889V471.89h90.889V491.948z M339.719,116.945
c0-11.06,8.972-20.058,20-20.058s20,8.998,20,20.058c0,11.061-8.972,20.058-20,20.058S339.719,128.005,339.719,116.945z
M386.91,491.948h-54.38V471.89h54.38V491.948z"/>
<ellipse cx="233.03" cy="305.332" rx="10" ry="10.03"/>
<ellipse cx="248.03" cy="266.222" rx="10" ry="10.03"/>
<ellipse cx="198.03" cy="279.262" rx="10" ry="10.03"/>
<ellipse cx="178.03" cy="315.362" rx="10" ry="10.03"/>
<ellipse cx="148.029" cy="275.252" rx="10" ry="10.03"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
</div>
<div class="col-md-12">
<p class="heading-main">
DOLOR AMET LOREM IPSUM SIT
</p>
</div>
<div class="col-md-12">
<p class="subheading-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary">Read More</button>
</div>
</div>
</div>
</div>
</div>
body
{
background-color:#ebf5fc;
font-family: 'Rajdhani', sans-serif;
}
.box-container
{
padding-top: 20px;
padding-bottom: 20px;
border-radius: 6px;
background: #ebf5fc;
box-shadow: -2px -2px 5px white, 3px 3px 5px rgba(0, 0, 0, 0.1);
border: 1px solid #c3f9f3;
}
.box-container:hover{
box-shadow: inset -2px -2px 5px white, inset 3px 3px 5px rgba(0, 0, 0, 0.1);
}
.
{
-webkit-animation: rotate-center 4s linear infinite both;
animation: rotate-center 4s linear infinite both;
}
.icon-set-box
{
margin: auto;
text-align: center;
border: 1px solid #cac8c8;
padding: 15px;
border-radius: 50%;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.5098039215686274);
box-shadow: inset -2px -2px 5px white, inset 3px 3px 5px rgba(0, 0, 0, 0.1);
}
.box-container .heading-main
{
text-align: center;
text-transform: uppercase;
padding-top: 20px;
padding-bottom: 20px;
letter-spacing: 3px;
font-weight: bold;
color: #6b6aa0;
font-size: 18px;
}
.box-container .subheading-box
{
text-align: center;
font-size: 18px;
color: #635f82;
}
.heading-name
{
color: #99a9b5;
text-transform: uppercase;
font-size: 18px;
}
.capsule
{
border: 1px solid #dfe5e8;
border-top-left-radius: 55px;
border-top-right-radius: 55px;
border-bottom-right-radius: 55px;
border-bottom-left-radius: 55px;
}
.tag
{
border-top-left-radius: 500px;
border-top-right-radius: 500px;
}
.NAUTILUS
{
border-top-left-radius: 500px;
border-top-right-radius: 500px;
border-bottom-right-radius: 500px;
border-bottom-left-radius: 500px;
}
/**
* ----------------------------------------
* animation rotate-center
* ----------------------------------------
*/
@-webkit-keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.